Merge pull request aws-samples#228 from aws-samples/fix-web-content

Web コンテンツ抽出画面微修正
fsatsuki · Dec 11, 2023 · 2923ecc · 2923ecc
2 parents 75b2027 + df330e6
commit 2923ecc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/packages/web/src/components/ExpandableField.tsx b/packages/web/src/components/ExpandableField.tsx
@@ -13,7 +13,7 @@ const ExpandableField: React.FC<Props> = (props) => {
   const [expanded, setExpanded] = useState(props.defaultOpened ?? false);
 
   return (
-    <RowItem notItem={props.notItem}>
+    <RowItem notItem={props.notItem} className={props.className}>
       <div
         className="mb-1 flex cursor-pointer items-center text-sm font-semibold"
         onClick={() => {

diff --git a/packages/web/src/pages/WebContent.tsx b/packages/web/src/pages/WebContent.tsx
@@ -218,10 +218,26 @@ const WebContent: React.FC = () => {
             </Button>
           </div>
 
+          <div className="mt-2 rounded border border-black/30 p-1.5">
+            <Markdown>{content}</Markdown>
+            {!loading && content === '' && (
+              <div className="text-gray-500">
+                抽出された文章がここに表示されます
+              </div>
+            )}
+            {loading && (
+              <div className="border-aws-sky h-5 w-5 animate-spin rounded-full border-4 border-t-transparent"></div>
+            )}
+            <div className="flex w-full justify-end">
+              <ButtonCopy text={content}></ButtonCopy>
+            </div>
+          </div>
+
           <ExpandableField
             label={`抽出前のテキスト (${
               fetching ? '読み込み中...' : text === '' ? '未取得' : '取得済'
-            })`}>
+            })`}
+            className="mt-2">
             <div className="rounded border border-black/30 p-1.5">
               {text === '' && (
                 <div className="text-gray-500">
@@ -234,21 +250,6 @@ const WebContent: React.FC = () => {
               </div>
             </div>
           </ExpandableField>
-
-          <div className="rounded border border-black/30 p-1.5">
-            <Markdown>{content}</Markdown>
-            {!loading && content === '' && (
-              <div className="text-gray-500">
-                抽出された文章がここに表示されます
-              </div>
-            )}
-            {loading && (
-              <div className="border-aws-sky h-5 w-5 animate-spin rounded-full border-4 border-t-transparent"></div>
-            )}
-            <div className="flex w-full justify-end">
-              <ButtonCopy text={content}></ButtonCopy>
-            </div>
-          </div>
         </Card>
       </div>
     </div>