Macgeargear/sucu 68 component tab

[macgeargear]

Type of Change

• New features
• Bug fixes
• Breaking changes
• Refactor
• Documentation updates
• Other (please specify):

Description

• Create Tabs component

Tabs context

• to share the state of tabs

Tabs Component

<TabsRoot> // init the tabs context and wraps all tab components
  <TabsList> // container for tabs trigger
    <TabsTrigger /> // updates the active tabs when clicked
  </TabsList> 
  <TabsContent /> // display its content
</TabsRoot>

Usage

<TabsRoot defaultActiveTab="all"> // you can specify the default active tab here
	<TabsList>
		<TabsTrigger value="all">ทั้งหมด</TabsTrigger>
		<TabsTrigger value="sgcu">อบจ.</TabsTrigger>
		<TabsTrigger value="sccu">สภานิสิต</TabsTrigger>
	</TabsList>

	<TabsContent value="all">
		<p>This is the all tab content.</p> // add the tab content here
	</TabsContent>
	<TabsContent value="sgcu">
		<p>This is the sgcu tab content.</p>
	</TabsContent>
	<TabsContent value="sccu">
		<p>This is the sccu tab content.</p>
	</TabsContent>
</TabsRoot>

Screenshots or GIFs (if applicable)

Desktop

Screen.Recording.2024-09-13.at.2.23.02.PM.mov

Mobile

Screen.Recording.2024-09-13.at.2.34.38.PM.mov

[macgeargear]

I don't know what transition should be applied, so I randomly use slide 🤡

[Chulinuwu]

😻😻😻😻 component working alright AAA

[macgeargear]

I add the custom class props for each tab components

[punchanabu]

LGTM

[punchanabu]

merge dev ก่อนนะ