diff options
| author | MohamedBassem <me@mbassem.com> | 2024-02-22 15:32:40 +0000 |
|---|---|---|
| committer | MohamedBassem <me@mbassem.com> | 2024-02-22 15:32:40 +0000 |
| commit | 942aac691225f4895c159a0260890ad2c576e0c9 (patch) | |
| tree | 06a055fcd59c2753531f498ab58d0af4c7e8464c /packages/web/components/ui/tabs.tsx | |
| parent | 08e7cbcfcb5e0b992d10ada324712c224b7a4d07 (diff) | |
| download | karakeep-942aac691225f4895c159a0260890ad2c576e0c9.tar.zst | |
feature: Add support for credentials registration and sign in
Diffstat (limited to 'packages/web/components/ui/tabs.tsx')
| -rw-r--r-- | packages/web/components/ui/tabs.tsx | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/packages/web/components/ui/tabs.tsx b/packages/web/components/ui/tabs.tsx new file mode 100644 index 00000000..990017db --- /dev/null +++ b/packages/web/components/ui/tabs.tsx @@ -0,0 +1,55 @@ +"use client"; + +import * as React from "react"; +import * as TabsPrimitive from "@radix-ui/react-tabs"; + +import { cn } from "@/lib/utils"; + +const Tabs = TabsPrimitive.Root; + +const TabsList = React.forwardRef< + React.ElementRef<typeof TabsPrimitive.List>, + React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> +>(({ className, ...props }, ref) => ( + <TabsPrimitive.List + ref={ref} + className={cn( + "bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1", + className, + )} + {...props} + /> +)); +TabsList.displayName = TabsPrimitive.List.displayName; + +const TabsTrigger = React.forwardRef< + React.ElementRef<typeof TabsPrimitive.Trigger>, + React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> +>(({ className, ...props }, ref) => ( + <TabsPrimitive.Trigger + ref={ref} + className={cn( + "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm", + className, + )} + {...props} + /> +)); +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; + +const TabsContent = React.forwardRef< + React.ElementRef<typeof TabsPrimitive.Content>, + React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> +>(({ className, ...props }, ref) => ( + <TabsPrimitive.Content + ref={ref} + className={cn( + "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", + className, + )} + {...props} + /> +)); +TabsContent.displayName = TabsPrimitive.Content.displayName; + +export { Tabs, TabsList, TabsTrigger, TabsContent }; |
