{label && (
)}
);
}
);
Input.displayName = 'Input';
```
### Search Input Variant
```tsx
import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/20/solid';
interface SearchInputProps {
value: string;
onChange: (value: string) => void;
placeholder?: string;
}
export function SearchInput({ value, onChange, placeholder = 'Search...' }: SearchInputProps) {
return (
onChange(e.target.value)}
placeholder={placeholder}
leftIcon={
{leftIcon && (
{leftIcon}
)}
{rightIcon && (
{rightIcon}
)}
{error && {error}
} {hint && !error &&{hint}
}{children}
;
}
export function CardTitle({ children, className }: { children: ReactNode; className?: string }) {
return {children}
; } export function CardDescription({ children, className }: { children: ReactNode; className?: string }) { return{children}
; } export function CardContent({ children, className }: { children: ReactNode; className?: string }) { return{children}
;
}
export function CardFooter({ children, className }: { children: ReactNode; className?: string }) {
return {children}
;
}
```
### Card Usage
```tsx
// Default card
Card content
Glass card with blur effect
Click me!
{/* Backdrop */}
e.target === overlayRef.current && onClose()}
/>
{/* Dialog */}
{/* Close button */}
{/* Header */}
{(title || description) && (
)}
{title &&
)}
{/* Content */}
{children}
{title}
} {description &&{description}
}
{children}
);
}
```
### Dialog Usage
```tsx
const [open, setOpen] = useState(false);
```
---
## Tabs
```tsx
import { motion } from 'framer-motion';
import { clsx } from 'clsx';
import { createContext, useContext, useState, type ReactNode } from 'react';
interface TabsContextValue {
activeTab: string;
setActiveTab: (tab: string) => void;
}
const TabsContext = createContext{children}
{children}
);
}
interface TabsTriggerProps {
value: string;
children: ReactNode;
className?: string;
}
export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
const context = useContext(TabsContext);
if (!context) throw new Error('TabsTrigger must be used within Tabs');
const { activeTab, setActiveTab } = context;
const isActive = activeTab === value;
return (
);
}
interface TabsContentProps {
value: string;
children: ReactNode;
className?: string;
}
export function TabsContent({ value, children, className }: TabsContentProps) {
const context = useContext(TabsContext);
if (!context) throw new Error('TabsContent must be used within Tabs');
if (context.activeTab !== value) return null;
return (
Overview content
Analytics content
Settings content
{initials}
);
}
return (