From 102e0110f5d57a0d396a8643ab4b79a15d8b4e97 Mon Sep 17 00:00:00 2001
From: Ahmad Rafi Wirana <ahmad.rafi02@ui.ac.id>
Date: Sat, 17 Aug 2024 14:42:30 +0700
Subject: [PATCH] feat: improve list component

---
 components/List/ListDocumentation.tsx |  17 +--
 components/List/ListPageClient.tsx    | 185 +++++++++++++++++---------
 2 files changed, 134 insertions(+), 68 deletions(-)

diff --git a/components/List/ListDocumentation.tsx b/components/List/ListDocumentation.tsx
index 6cc42c8..1d0ead3 100644
--- a/components/List/ListDocumentation.tsx
+++ b/components/List/ListDocumentation.tsx
@@ -4,8 +4,8 @@ const ListDocumentation = () => {
   return (
     <>
       {/* Props Section */}
-      <section className="my-5">
-        <h2 className="text-xl md:text-2xl font-medium text-gray-900 dark:text-gray-50 mb-6">Props</h2>
+      <section id="properties" className="my-5 scroll-mt-20">
+        <h2 className="text-xl md:text-2xl font-medium text-gray-900 dark:text-gray-50 mb-5">Props</h2>
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
           <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
             <thead className="bg-gray-50 dark:bg-gray-700">
@@ -19,34 +19,35 @@ const ListDocumentation = () => {
             <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
               <tr>
                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">items</td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 font-mono text-wrap">Array&lt;{`{ content: React.ReactNode, icon?: React.ReactNode }`}&gt;</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 font-mono text-wrap">List[content: React.ReactNode, icon: React.ReactNode]</td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-</td>
-                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-300">Array of items to be displayed in the list. Each item can have content and an optional icon.</td>
+                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-300">Array of items to be displayed in the list, either a content or an icon.</td>
               </tr>
               <tr>
                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">variant</td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 font-mono">{`"ordered" | "unordered"`}</td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">{`"unordered"`}</td>
-                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-300">Determines whether the list is ordered (ol) or unordered (ul).</td>
+                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-300">Type of list: ordered (ol) or unordered (ul).</td>
               </tr>
               <tr>
                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">className</td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 font-mono">string</td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">empty</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-</td>
                 <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-300">Additional classes for styling the list.</td>
               </tr>
               <tr>
                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">iconClassName</td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 font-mono">string</td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">empty</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-</td>
                 <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-300">Additional classes for styling the icons.</td>
               </tr>
             </tbody>
           </table>
         </div>
       </section>
+
       {/* Best Practices Section */}
-      <section>
+      <section id="best-practices" className="scroll-mt-20">
         <h2 className="text-xl md:text-2xl font-medium text-gray-900 dark:text-gray-50 mb-6">Best Practices</h2>
         <div className="space-y-4">
           <ul className="list-decimal list-inside text-gray-700 dark:text-gray-300 space-y-3">
diff --git a/components/List/ListPageClient.tsx b/components/List/ListPageClient.tsx
index 8ed94df..11cfc2e 100644
--- a/components/List/ListPageClient.tsx
+++ b/components/List/ListPageClient.tsx
@@ -1,8 +1,14 @@
 'use client';
 
 import React from 'react';
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { materialLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { ShoppingCart, Star, Heart } from 'lucide-react';
 
+import TOC from '@/components/TOC/TOC';
+import { Tabs, Tab } from '@/components/Tabs/Tabs';
+
 import Layout from '../Layout/Layout';
 import Badge from '../Badge/Badge';
 
@@ -10,71 +16,130 @@ import { List, ListItem } from './List';
 import ListDocumentation from './ListDocumentation';
 
 const ListPageClient: React.FC = () => {
-    const items = ['Item 1', 'Item 2', 'Item 3'];
+    const tocItems = [
+        { id: 'overview', label: 'Overview' },
+        { id: 'variants', label: 'Variants' },
+        { id: 'properties', label: 'Properties' },
+        { id: 'best-practices', label: 'Best Practices' },
+    ];
+
+    const codeExample = `
+    <List 
+        items={[ 
+            { content: 'Apple' }, 
+            { content: 'Banana' }, 
+            { content: 'Cherry' }
+        ]} 
+        variant="unordered" 
+        className="text-gray-900 dark:text-gray-50"
+    />
+    `;
 
     return (
         <Layout>
-            <Badge text="Components" />
-            <div className="flex flex-col mb-5">
-                <h1 className="text-2xl md:text-3xl font-semibold mb-4 text-gray-900 dark:text-gray-50">List</h1>
-                <p className="text-sm md:text-base font-normal font-sans text-gray-900 dark:text-gray-50">
-                    A component for displaying multiple items with customizable styling and optional item icons.
-                </p>
-            </div>
-            <section className="mb-5">
-                <h2 className="text-lg md:text-2xl font-medium font-sans text-gray-900 dark:text-gray-50 mb-5">Variants</h2>
-                <div className="space-y-4 flex flex-col justify-around">
-                    <div>
-                        <h3 className="text-base md:text-lg font-medium font-sans text-gray-900 dark:text-gray-50 mb-2 md:mb-3">
-                            Unordered List
-                        </h3>
-                        <List 
-                            items={[ 
-                                { content: 'Apple' }, 
-                                { content: 'Banana' }, 
-                                { content: 'Cherry' }
-                            ]} 
-                            variant="unordered" 
-                            className="text-gray-900 dark:text-gray-50"
-                        />
-                    </div>
-                    <div>
-                        <h3 className="text-base md:text-lg font-medium font-sans text-gray-900 dark:text-gray-50 mb-2 md:mb-3">
-                            Unordered List with Icons
-                        </h3>
-                        <List
-                            items={[
-                            { content: 'Shopping List', icon: <ShoppingCart /> },
-                            { content: 'Favorites', icon: <Star /> },
-                            { content: 'Wishlist', icon: <Heart /> },
-                            ]}
-                            variant="unordered" 
-                            iconClassName="text-blue-600 dark:text-blue-500"
-                        />
-                    </div>
-                    <div>
-                        <h3 className="text-base md:text-lg font-medium font-sans text-gray-900 dark:text-gray-50 mb-2 md:mb-3">
-                            Ordered List
-                        </h3>  
-                        <List variant="ordered" className="text-gray-900 dark:text-gray-50">
-                            <ListItem>First item</ListItem>
-                            <ListItem>Second item</ListItem>
-                            <ListItem>Third item</ListItem>
-                        </List>
-                    </div>
-                    <div>
-                        <h3 className="text-base md:text-lg font-medium font-sans text-gray-900 dark:text-gray-50 mb-2 md:mb-3">
-                            Ordered List with Icons
-                        </h3>  
-                        <List variant="ordered" className="text-blue-600 dark:text-blue-500">
-                            <ListItem icon={<ShoppingCart />}>Shopping List</ListItem>
-                            <ListItem icon={<Star />}>Favorites</ListItem>
-                            <ListItem icon={<Heart />}>Wishlist</ListItem>
-                        </List>
+            <div className="flex">
+                <div className="w-4/5 pr-2">
+                    <Badge text="Components" />
+                    <div id="overview" className="flex flex-col mb-5 scroll-mt-16">
+                        <h1 className="text-2xl md:text-3xl font-semibold mb-4 text-gray-900 dark:text-gray-50">List</h1>
+                        <p className="text-sm md:text-base font-normal font-sans text-gray-900 dark:text-gray-50">
+                            A component for displaying multiple items with customizable styling and optional item icons.
+                        </p>
                     </div>
+
+                    {/* Variants Section */}
+                    <section id="variants" className="scroll-mt-20">
+                        <Tabs>
+                            <Tab label="Preview">
+                                <div className="relative w-full overflow-hidden mt-4 rounded-lg justify-center items-center bg-zinc-100 dark:bg-zinc-950 shadow border border-slate-300 dark:border-slate-800">
+                                    <div className="space-y-4 flex flex-col justify-around p-5">
+                                        <div>
+                                            <h3 className="text-base md:text-lg font-medium font-sans text-gray-900 dark:text-gray-50 mb-2 md:mb-3">
+                                                Unordered List
+                                            </h3>
+                                            <List 
+                                                items={[ 
+                                                    { content: 'Apple' }, 
+                                                    { content: 'Banana' }, 
+                                                    { content: 'Cherry' }
+                                                ]} 
+                                                variant="unordered" 
+                                                className="text-gray-900 dark:text-gray-50"
+                                            />
+                                        </div>
+                                        <div>
+                                            <h3 className="text-base md:text-lg font-medium font-sans text-gray-900 dark:text-gray-50 mb-2 md:mb-3">
+                                                Unordered List with Icons
+                                            </h3>
+                                            <List
+                                                items={[
+                                                { content: 'Shopping List', icon: <ShoppingCart /> },
+                                                { content: 'Favorites', icon: <Star /> },
+                                                { content: 'Wishlist', icon: <Heart /> },
+                                                ]}
+                                                variant="unordered" 
+                                                iconClassName="text-blue-600 dark:text-blue-500"
+                                            />
+                                        </div>
+                                        <div>
+                                            <h3 className="text-base md:text-lg font-medium font-sans text-gray-900 dark:text-gray-50 mb-2 md:mb-3">
+                                                Ordered List
+                                            </h3>  
+                                            <List variant="ordered" className="text-gray-900 dark:text-gray-50">
+                                                <ListItem>First item</ListItem>
+                                                <ListItem>Second item</ListItem>
+                                                <ListItem>Third item</ListItem>
+                                            </List>
+                                        </div>
+                                        <div>
+                                            <h3 className="text-base md:text-lg font-medium font-sans text-gray-900 dark:text-gray-50 mb-2 md:mb-3">
+                                                Ordered List with Icons
+                                            </h3>  
+                                            <List variant="ordered" className="text-blue-600 dark:text-blue-500">
+                                                <ListItem icon={<ShoppingCart />}>Shopping List</ListItem>
+                                                <ListItem icon={<Star />}>Favorites</ListItem>
+                                                <ListItem icon={<Heart />}>Wishlist</ListItem>
+                                            </List>
+                                        </div>
+                                    </div>
+                                </div>
+                            </Tab>
+                            <Tab label="Code">
+                                <div
+                                    className="relative rounded-lg bg-gray-900 dark:bg-gray-800/90 mt-4"
+                                    role="region"
+                                    aria-label="Code Snippet in tsx"
+                                >
+                                    <div className="flex justify-between items-center px-4 py-2 border-b border-gray-800">
+                                        <span className="text-sm font-medium text-gray-100">
+                                            tsx
+                                        </span>
+                                    </div>
+                                    <div className="overflow-auto rounded-lg border border-gray-800">
+                                        <SyntaxHighlighter
+                                            language="tsx"
+                                            style={materialLight}
+                                            showLineNumbers={false}
+                                            wrapLongLines={true}
+                                            customStyle={{
+                                                margin: 1.5,
+                                                borderRadius: '0.5rem 0.5rem 0.5rem 0.5rem',
+                                                fontSize: '14px',
+                                                lineHeight: '1.25',
+                                                padding: '10px',
+                                            }}
+                                        >
+                                            {codeExample}
+                                        </SyntaxHighlighter>
+                                    </div>
+                                </div>
+                            </Tab>
+                        </Tabs>
+                    </section>
+                    <ListDocumentation />
                 </div>
-            </section>
-            <ListDocumentation />
+                <TOC items={tocItems} />
+            </div>
         </Layout>
     );
 };