feat: expandable article block

isd-sgcu · Jul 28, 2023 · abe3b95 · abe3b95
1 parent 6ae4d8b
commit abe3b95
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 16 deletions.
diff --git a/src/components/Article/Cover/components/Article.tsx b/src/components/Article/Cover/components/Article.tsx
@@ -2,6 +2,10 @@ import { QueueListIcon } from '@heroicons/react/24/solid';
 import { QuestionMarkCircleIcon } from '@heroicons/react/24/solid';
 import { ArticleDetail } from '@/utils/article-page/types';
 import React from 'react';
+import { useState } from 'react';
+import ArticleBlock from './ArticleBlock';
+import Image from 'next/image';
+import czw from '@/public/images/czw.jpg';
 
 //mock data
 const Detail: Array<ArticleDetail> = [
@@ -12,7 +16,7 @@ const Detail: Array<ArticleDetail> = [
             'เกริ่นบทความมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมม',
         fullinfo:
             'ข้อความแบบจริงจังงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงง',
-        img: '',
+        img: 'images/czw.jpg',
     },
     {
         topic: 'ห้องน้ำ',
@@ -21,7 +25,7 @@ const Detail: Array<ArticleDetail> = [
             'เกริ่นบทความมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมมม',
         fullinfo:
             'ข้อความแบบจริงจังงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงง',
-        img: '',
+        img: 'images/og.png',
     },
     {
         topic: 'คำถาม',
@@ -44,21 +48,45 @@ const Detail: Array<ArticleDetail> = [
 ];
 
 const Article: React.FC = () => {
+    const [isVisible, setIsVisible] = useState(true);
+    function handleButtonClick() {
+        setIsVisible(!isVisible);
+    }
     return (
         <div>
-            {Detail.map((article, index) => (
-                <button
-                    key={index}
-                    className="mb-5 flex w-full flex-col rounded-lg bg-white p-6 text-[#333333]"
-                >
-                    <div key={index} className="flex font-bold">
-                        {article.topic}
-                        <article.icon className="ml-1 h-5 w-5" />
-                    </div>
-                    <div className="break-all text-left opacity-80">
-                        {article.preinfo}
-                    </div>
-                </button>
+            {Detail.map((article: ArticleDetail, index: number) => (
+                <ArticleBlock article={article} index={index} key={index} />
+
+                // <button
+                //     onClick={handleButtonClick}
+                //     key={index}
+                //     className="mb-5 flex max-w-2xl flex-col rounded-lg bg-white p-6 text-[#333333]"
+                // >
+                //     <div key={index} className="flex font-bold">
+                //         {article.topic}
+                //         <article.icon className="ml-1 h-5 w-5" />
+                //     </div>
+                //     <div
+                //         className={`${
+                //             isVisible ? 'hidden' : 'visible'
+                //         } break-all text-left opacity-80`}
+                //     >
+                //         {article.preinfo}
+                //     </div>
+                //     <div
+                //         className={`${
+                //             isVisible ? 'visible' : 'hidden'
+                //         } h-fit overflow-auto text-left`}
+                //     >
+                //         <Image
+                //             src={czw}
+                //             width={200}
+                //             height={200}
+                //             alt={article.topic}
+                //         />
+                //         {article.fullinfo}
+                //     </div>
+                // </button>
             ))}
         </div>
     );

diff --git a/src/components/Article/Cover/components/ArticleBlock.tsx b/src/components/Article/Cover/components/ArticleBlock.tsx
@@ -0,0 +1,58 @@
+import { ArticleDetail } from '@/utils/article-page/types';
+import React, { useState, useRef } from 'react';
+import Image from 'next/image';
+
+interface ArticleBlockProps {
+    article: ArticleDetail;
+    index: number;
+}
+
+function ArticleBlock({ article, index }: ArticleBlockProps) {
+    const [expanded, setExpanded] = useState(false);
+    const fullInfoRef = useRef<HTMLDivElement>(null);
+
+    function handleButtonClick() {
+        setExpanded(!expanded);
+    }
+
+    return (
+        <button
+            onClick={handleButtonClick}
+            key={index}
+            className="transition-height mb-5 flex max-w-2xl flex-col rounded-lg bg-white p-6 text-[#333333] duration-300"
+        >
+            <div key={index} className="flex font-bold">
+                {article.topic}
+                <article.icon className="ml-1 h-5 w-5" />
+            </div>
+            <div
+                className={`${
+                    expanded ? 'hidden' : 'visible'
+                } break-all text-left opacity-80`}
+            >
+                {article.preinfo}
+            </div>
+            <div
+                ref={fullInfoRef}
+                style={{
+                    maxHeight: expanded
+                        ? fullInfoRef.current?.scrollHeight + 'px'
+                        : '0',
+                    overflow: 'hidden',
+                    transition: 'max-height 0.3s ease-in-out',
+                }}
+            >
+                <Image
+                    src={article.img}
+                    width={200}
+                    height={200}
+                    alt={article.topic}
+                    className="my-4 w-full"
+                />
+                {article.fullinfo}
+            </div>
+        </button>
+    );
+}
+
+export default ArticleBlock;
diff --git a/src/components/Article/Cover/index.tsx b/src/components/Article/Cover/index.tsx
@@ -2,7 +2,7 @@ import Article from '@/components/Article/Cover/components/Article';
 
 const ArticlePage = () => {
     return (
-        <div className="flex w-screen flex-col items-center px-6 py-10">
+        <div className="flex min-h-screen w-screen flex-col items-center px-6 py-10">
             <Article />
         </div>
     );

diff --git a/src/components/DefaultButton.tsx b/src/components/DefaultButton.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const DefaultButton = ({ content, additionalStyle, onClick, disabled }) => {
+    const buttonClassName =
+        `max-w-full w-40 mx-auto items-center py-2 text-white transition-all duration-500 hover:ring-8 disabled:cursor-not-allowed disabled:ring-0 ` +
+        additionalStyle;
+
+    return (
+        <button
+            className={buttonClassName}
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {content}
+        </button>
+    );
+};
+
+export default DefaultButton;