wraning section ui updated

2025-11-01 20:09:45 +08:00
parent d99ea3a8db
commit 78e89d9233
7 changed files with 297 additions and 8 deletions
--- a/src/components/new_ui/CustomButton.tsx
+++ b/src/components/new_ui/CustomButton.tsx
@@ -0,0 +1,101 @@
+import { Button } from '@chakra-ui/react'
+
+interface CustomButtonProps {
+  children: React.ReactNode
+  onClick?: () => void
+  variant?: 'primary' | 'secondary'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export const CustomButton = ({ 
+  children, 
+  onClick, 
+  variant = 'primary',
+  size = 'md' 
+}: CustomButtonProps) => {
+  // Primary button - Green/Teal with shadow
+  const primaryStyles = {
+    bg: 'linear-gradient(135deg, #4ade80 0%, #22c55e 100%)',
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: size === 'sm' ? '14px' : size === 'md' ? '16px' : '18px',
+    px: size === 'sm' ? 6 : size === 'md' ? 8 : 10,
+    py: size === 'sm' ? 5 : size === 'md' ? 6 : 7,
+    rounded: 'full',
+    boxShadow: '0 10px 30px rgba(34, 197, 94, 0.4), 0 4px 15px rgba(34, 197, 94, 0.3)',
+    _hover: {
+      bg: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
+      boxShadow: '0 12px 35px rgba(34, 197, 94, 0.5), 0 6px 20px rgba(34, 197, 94, 0.4)',
+      transform: 'translateY(-2px)',
+    },
+    _active: {
+      transform: 'translateY(0)',
+      boxShadow: '0 8px 25px rgba(34, 197, 94, 0.3), 0 3px 12px rgba(34, 197, 94, 0.2)',
+    },
+    transition: 'all 0.3s ease',
+  }
+
+  // Secondary button - Blue with shadow
+  const secondaryStyles = {
+    bg: 'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: size === 'sm' ? '14px' : size === 'md' ? '16px' : '18px',
+    px: size === 'sm' ? 6 : size === 'md' ? 8 : 10,
+    py: size === 'sm' ? 5 : size === 'md' ? 6 : 7,
+    rounded: 'full',
+    boxShadow: '0 10px 30px rgba(59, 130, 246, 0.4), 0 4px 15px rgba(59, 130, 246, 0.3)',
+    _hover: {
+      bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+      boxShadow: '0 12px 35px rgba(59, 130, 246, 0.5), 0 6px 20px rgba(59, 130, 246, 0.4)',
+      transform: 'translateY(-2px)',
+    },
+    _active: {
+      transform: 'translateY(0)',
+      boxShadow: '0 8px 25px rgba(59, 130, 246, 0.3), 0 3px 12px rgba(59, 130, 246, 0.2)',
+    },
+    transition: 'all 0.3s ease',
+  }
+
+  const buttonStyles = variant === 'primary' ? primaryStyles : secondaryStyles
+
+  return (
+    <Button
+      onClick={onClick}
+      {...buttonStyles}
+    >
+      {children}
+    </Button>
+  )
+}
+
+// Example usage component
+export const CustomButtonDemo = () => {
+  return (
+    <div style={{ padding: '40px', display: 'flex', gap: '20px', flexWrap: 'wrap', background: '#f5f5f5' }}>
+      {/* Primary buttons */}
+      <CustomButton variant="primary" size="sm">
+        Small Button
+      </CustomButton>
+      <CustomButton variant="primary" size="md">
+        Medium Button
+      </CustomButton>
+      <CustomButton variant="primary" size="lg">
+        Large Button
+      </CustomButton>
+      
+      {/* Secondary buttons */}
+      <CustomButton variant="secondary" size="sm">
+        Small Button
+      </CustomButton>
+      <CustomButton variant="secondary" size="md">
+        Medium Button
+      </CustomButton>
+      <CustomButton variant="secondary" size="lg">
+        Large Button
+      </CustomButton>
+    </div>
+  )
+}
+
+export default CustomButton