-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add Tabs components and related simple docs
- Loading branch information
Ricy
committed
Jan 3, 2024
1 parent
e8a8d60
commit 362b7fa
Showing
11 changed files
with
224 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| export default function Home() { | ||
| return ( | ||
| <main> | ||
| <div className="text-48px">123</div> | ||
| <div className="text-48px">Custom UI</div> | ||
| <p>docs is developing</p> | ||
| </main> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| 'use client'; | ||
| import Tabs from '@/components/Tabs'; | ||
|
|
||
| const items = [ | ||
| { | ||
| id: 1, | ||
| title: 'Tab 1', | ||
| children: <div>Tab 1 Content</div>, | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: 'Tab 2', | ||
| children: <div>Tab 2 Content</div>, | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: 'Tab 3', | ||
| children: <div>Tab 3 Content</div>, | ||
| }, | ||
| ]; | ||
|
|
||
| const TabsPage: React.FC = () => { | ||
| return ( | ||
| <div className="flex flex-col items-center justify-center gap-x-16px h-100vh"> | ||
| <Tabs items={items} defaultActiveId={1} /> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default TabsPage; |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { type PropsWithChildren } from 'react'; | ||
|
|
||
| interface TabContentProps extends PropsWithChildren { | ||
| id: number; | ||
| activeId: number; | ||
| } | ||
|
|
||
| const TabContent: React.FC<TabContentProps> = ({ id, activeId, children }) => { | ||
| return activeId === id ? <>{children}</> : null; | ||
| }; | ||
|
|
||
| export default TabContent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { useCallback } from 'react'; | ||
| import cx from 'clsx'; | ||
| interface TabNavItemProps { | ||
| id: number; | ||
| title: string; | ||
| activeId: number; | ||
| navItemClassName?: string; | ||
| activeNavItemClassName?: string; | ||
| setActiveId: (id: number) => void; | ||
| } | ||
|
|
||
| const TabNavItem: React.FC<TabNavItemProps> = ({ | ||
| id, | ||
| title, | ||
| activeId, | ||
| navItemClassName, | ||
| activeNavItemClassName = 'text-#FFA14A border-b-2px border-#FFA14A border-b-solid', | ||
| setActiveId, | ||
| }) => { | ||
| const handleClick = useCallback(() => { | ||
| setActiveId(id); | ||
| }, []); | ||
| return ( | ||
| <div | ||
| className={cx( | ||
| 'mr-32px h-full flex items-center text-14px leading-22px text-#595A5B cursor-pointer box-border', | ||
| navItemClassName, | ||
| id === activeId && activeNavItemClassName | ||
| )} | ||
| onClick={handleClick} | ||
| > | ||
| {title} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default TabNavItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. | ||
|
|
||
| | prop | type | default | description | | ||
| | ---------------- | ------ | ------- | ----------------------------------- | | ||
| | wrapperClassName | string | 'flex flex-col' | Class name for the wrapper element of navigation bar and each tab's content. | | ||
| | navClassName | string | 'flex flex-row h-36px border-b-1px border-b-solid border-#EBEDF0' | Class name for the navigation bar. | | ||
| | navItemClassName | string | '' | Class name used for modifying each navigation item. | | ||
| | navItemActiveClassName | string | 'text-#FFA14A border-b-2px border-#FFA14A border-b-solid' | Class name for the active navigation item. | | ||
| | bodyClassName | string | '' | Class name used for modifying the content area. | | ||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React, { useState, useCallback } from 'react'; | ||
| import cx from 'clsx'; | ||
| import TabNavItem from './TabNavItem'; | ||
| import TabContent from './TabContent'; | ||
|
|
||
| export interface Item { | ||
| id: number; | ||
| title: string; | ||
| children: JSX.Element; | ||
| } | ||
|
|
||
| interface TabsProps { | ||
| items: Item[]; | ||
| defaultActiveId: number; | ||
| wrapperClassName?: string; | ||
| navClassName?: string; | ||
| navItemClassName?: string; | ||
| activeNavItemClassName?: string; | ||
| bodyClassName?: string; | ||
| onTabChange?: (id: number) => void; | ||
| } | ||
|
|
||
| const Tabs: React.FC<TabsProps> = ({ | ||
| items, | ||
| defaultActiveId, | ||
| navClassName = 'flex flex-row h-36px border-b-1px border-b-solid border-#EBEDF0', | ||
| navItemClassName, | ||
| activeNavItemClassName, | ||
| bodyClassName, | ||
| wrapperClassName = 'flex flex-col', | ||
| onTabChange, | ||
| }) => { | ||
| const [activeId, setActiveId] = useState(defaultActiveId); | ||
| const handleTabChange = useCallback((id: number) => { | ||
| setActiveId(id); | ||
| onTabChange?.(id); | ||
| }, []); | ||
| return ( | ||
| <div className={wrapperClassName}> | ||
| <div className={navClassName}> | ||
| {items.map((item) => ( | ||
| <TabNavItem | ||
| title={item.title} | ||
| setActiveId={handleTabChange} | ||
| id={item.id} | ||
| activeId={activeId} | ||
| key={`${item.id}-tab`} | ||
| navItemClassName={navItemClassName} | ||
| activeNavItemClassName={activeNavItemClassName} | ||
| /> | ||
| ))} | ||
| </div> | ||
| <div className={cx('py-12px w-full', bodyClassName)}> | ||
| {items.map((item) => ( | ||
| <TabContent | ||
| activeId={activeId} | ||
| id={item.id} | ||
| children={item.children} | ||
| key={`${item.id}-content`} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Tabs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters