feat: initial setup of the demonstration layout

Author: Ohh-889

packages/ui/src/index.ts

@@ -2,4 +2,6 @@ export * from './components/button';
 
 export * from './components/card';
 
+export * from './components/tabs';
+
 export * from './types';

playground/src/app/(demo)/modules/DemoTabs.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import type { TabsOptionData } from 'soybean-react-ui';
+import { Tabs } from 'soybean-react-ui';
+
+type DemoTabsProps = {
+  items: TabsOptionData[];
+};
+
+export default function DemoTabs({ items }: DemoTabsProps) {
+  const pathname = usePathname();
+
+  const currentTab = pathname.split('/').pop();
+
+  return (
+    <Tabs
+      items={items}
+      value={currentTab}
+    />
+  );
+}

playground/src/app/(demo)/modules/DemoTitle.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { usePathname } from 'next/navigation';
+
+const DemoTitle = () => {
+  const pathname = usePathname();
+
+  const currentTab = pathname.split('/').pop();
+
+  if (!currentTab) return null;
+
+  const title = currentTab.charAt(0).toUpperCase() + currentTab.slice(1);
+
+  return title;
+};
+
+export default DemoTitle;