feat: refactor UI components and introduce new ones
- Updated toggle component to use new radix-ui import and improved styles. - Refactored tooltip component to align with new radix-ui structure and enhanced styles. - Added button group component for better button organization. - Introduced chart component with responsive design and tooltip functionality. - Created empty state components for better user experience. - Developed field components for form handling with improved accessibility. - Added input group component for better input management. - Introduced item components for structured content display. - Created keyboard shortcut components for better user interaction. - Added spinner component for loading states.
This commit is contained in:
parent
b436b79769
commit
4f7b579fac
55 changed files with 2036 additions and 718 deletions
26
src/components/ui/kbd.tsx
Normal file
26
src/components/ui/kbd.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
|
||||
return (
|
||||
<kbd
|
||||
data-slot="kbd"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<kbd
|
||||
data-slot="kbd-group"
|
||||
className={cn("gap-1 inline-flex items-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Kbd, KbdGroup }
|
||||
Loading…
Add table
Add a link
Reference in a new issue