optimize: optimize code

Author: Ohh-889

packages/ui/src/components/card/card-variants.ts

@@ -6,7 +6,7 @@ export const cardVariants = tv({
     size: 'md'
   },
   slots: {
-    content: 'flex-grow',
+    content: 'flex-grow overflow-auto',
     footer: 'flex items-center justify-between',
     header: 'flex items-center justify-between',
     root: 'flex flex-col items-stretch rounded-md border bg-card text-card-foreground shadow-sm',

packages/ui/src/index.ts

@@ -15,7 +15,6 @@ export * from './components/breadcrumb';
 export * from './components/button';
 
 export * from './components/card';
-
 export * from './components/carousel';
 
 export * from './components/checkbox';
@@ -38,6 +37,8 @@ export * from './components/scroll-area';
 
 export * from './components/sonner';
 
+export * from './components/switch';
+
 export * from './components/tabs';
 
 export * from './lib';

playground/src/app/(demo)/card/page.tsx

@@ -1,6 +1,6 @@
 import { Rocket, X } from 'lucide-react';
 import React from 'react';
-import { Badge, Button, Card } from 'soybean-react-ui'; // 假设这些是你自己封装的 React 组件
+import { Badge, ButtonIcon, Card } from 'soybean-react-ui'; // 假设这些是你自己封装的 React 组件
 import type { ThemeSize } from 'soybean-react-ui';
 
 const sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
@@ -37,13 +37,9 @@ const DemoCard: React.FC = () => {
               size={size}
               title={`Size: ${size}`}
               extra={
-                <Button
-                  asIconButton
-                  fitContent
-                  size={size}
-                >
+                <ButtonIcon size={size}>
                   <X />
-                </Button>
+                </ButtonIcon>
               }
             >
               <p className="text-gray-500 dark:text-neutral-400">Content</p>

playground/src/app/(demo)/layout.tsx

@@ -4,7 +4,7 @@ import process from 'node:process';
 
 import Link from 'next/link';
 import React from 'react';
-import { ScrollArea } from 'soybean-react-ui';
+import { Card, ScrollArea } from 'soybean-react-ui';
 
 import DemoTabs from './modules/DemoTabs';
 import DemoTitle from './modules/DemoTitle';
@@ -43,15 +43,13 @@ function DemoLayout({ children }: { children: React.ReactNode }) {
     <>
       <DemoTabs items={componentTabs} />
 
-      <div className="h-full p-[18px]">
-        <div className="h-full mb-8 border border-gray-200 rounded-xl bg-white p-6 shadow-lg transition-all dark:border-neutral-700 dark:bg-neutral-800 hover:shadow-xl">
-          <h3 className="border-gray-200 text-xl dark:border-neutral-700 mb-4 border-b pb-2 text-gray-800 font-bold dark:text-gray-100">
-            Demo <DemoTitle />
-          </h3>
-
-          <ScrollArea className="h-full pb-20">{children}</ScrollArea>
-        </div>
-      </div>
+      <Card
+        className="h-full"
+        classNames={{ content: 'flex-c gap-3 ' }}
+        title={<DemoTitle />}
+      >
+        {children}
+      </Card>
     </>
   );
 }

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

@@ -10,7 +10,7 @@ const DemoTitle = () => {
 
   const title = currentTab.charAt(0).toUpperCase() + currentTab.slice(1);
 
-  return title;
+  return <h3 className="font-semibold tracking-tight text-base">{title} Demo</h3>;
 };
 
 export default DemoTitle;