Skip to content

Commit

Permalink
feat: improve list component
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahmadrafidev
ahmadrafidev committed Aug 17, 2024
1 parent 312b7e9 commit 102e011
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 68 deletions.
17 changes: 9 additions & 8 deletions components/List/ListDocumentation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down
185 changes: 125 additions & 60 deletions components/List/ListPageClient.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,145 @@
'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';

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>
);
};
Expand Down

0 comments on commit 102e011

Please sign in to comment.