mirror of https://github.com/Lapikud/tipilan
v4ltages
8 months ago
parent
4e65bc5412
commit
6bf3c12b28
17 changed files with 1137 additions and 56 deletions
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
@ -1,20 +1,57 @@ |
||||
'use client'; |
||||
|
||||
// Icons
|
||||
import { MdClose, MdMenu } from "react-icons/md"; |
||||
import { MdClose, MdMenu, MdSunny, MdModeNight } from "react-icons/md"; |
||||
|
||||
// Theme Provider
|
||||
import { useTheme } from "next-themes" |
||||
|
||||
// Shadcn UI
|
||||
import { Button } from "@/components/ui/button" |
||||
import { |
||||
DropdownMenu, |
||||
DropdownMenuContent, |
||||
DropdownMenuItem, |
||||
DropdownMenuTrigger, |
||||
} from "@/components/ui/dropdown-menu" |
||||
|
||||
// Fonts
|
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||
|
||||
const Header = ({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) => ( |
||||
<header className="h-16 flex items-center bg-[#EEE5E5] border-b-3 border-[#007CAB] justify-between px-12 text-[#2A2C3F]"> |
||||
<button onClick={toggleSidebar}> |
||||
{isOpen ? ( |
||||
<MdClose className="h-12 w-12 text-[#2A2C3F]" /> |
||||
) : ( |
||||
<MdMenu className="h-12 w-12 text-[#2A2C3F]" /> |
||||
)} |
||||
</button> |
||||
<p className={`text-3xl ${vipnagorgialla.className} font-bold italic hidden`}>ENG</p> |
||||
</header> |
||||
); |
||||
const Header = ({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) => { |
||||
const { setTheme } = useTheme(); |
||||
|
||||
return ( |
||||
<header className="h-16 flex items-center bg-[#EEE5E5] dark:bg-[#0E0F19] border-b-3 border-[#007CAB] dark:border-[#00A3E0] justify-between px-12 text-[#2A2C3F] dark:text-[#EEE5E5]"> |
||||
<button onClick={toggleSidebar}> |
||||
{isOpen ? ( |
||||
<MdClose className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5]" /> |
||||
) : ( |
||||
<MdMenu className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5]" /> |
||||
)} |
||||
</button> |
||||
<DropdownMenu> |
||||
<DropdownMenuTrigger asChild> |
||||
<Button variant="ghost" size="icon"> |
||||
<MdSunny className="scale-150 text-[#2A2C3F] dark:hidden"/> |
||||
<MdModeNight className="scale-150 dark:text-[#EEE5E5] not-dark:hidden"/> |
||||
<span className="sr-only">Toggle theme</span> |
||||
</Button> |
||||
</DropdownMenuTrigger> |
||||
<DropdownMenuContent align="end" className="w-48 translate-y-4"> |
||||
<DropdownMenuItem className="text-xl" onClick={() => setTheme('light')}> |
||||
Light |
||||
</DropdownMenuItem> |
||||
<DropdownMenuItem className="text-xl" onClick={() => setTheme('dark')}> |
||||
Dark |
||||
</DropdownMenuItem> |
||||
<DropdownMenuItem className="text-xl" onClick={() => setTheme('system')}> |
||||
System |
||||
</DropdownMenuItem> |
||||
</DropdownMenuContent> |
||||
</DropdownMenu> |
||||
</header> |
||||
); |
||||
}; |
||||
|
||||
export default Header; |
||||
|
||||
@ -0,0 +1,11 @@ |
||||
"use client" |
||||
|
||||
import * as React from "react" |
||||
import { ThemeProvider as NextThemesProvider } from "next-themes" |
||||
|
||||
export function ThemeProvider({ |
||||
children, |
||||
...props |
||||
}: React.ComponentProps<typeof NextThemesProvider>) { |
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider> |
||||
} |
||||
@ -0,0 +1,59 @@ |
||||
import * as React from "react" |
||||
import { Slot } from "@radix-ui/react-slot" |
||||
import { cva, type VariantProps } from "class-variance-authority" |
||||
|
||||
import { cn } from "@/lib/utils" |
||||
|
||||
const buttonVariants = cva( |
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", |
||||
{ |
||||
variants: { |
||||
variant: { |
||||
default: |
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", |
||||
destructive: |
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", |
||||
outline: |
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", |
||||
secondary: |
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", |
||||
ghost: |
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", |
||||
link: "text-primary underline-offset-4 hover:underline", |
||||
}, |
||||
size: { |
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3", |
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", |
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4", |
||||
icon: "size-9", |
||||
}, |
||||
}, |
||||
defaultVariants: { |
||||
variant: "default", |
||||
size: "default", |
||||
}, |
||||
} |
||||
) |
||||
|
||||
function Button({ |
||||
className, |
||||
variant, |
||||
size, |
||||
asChild = false, |
||||
...props |
||||
}: React.ComponentProps<"button"> & |
||||
VariantProps<typeof buttonVariants> & { |
||||
asChild?: boolean |
||||
}) { |
||||
const Comp = asChild ? Slot : "button" |
||||
|
||||
return ( |
||||
<Comp |
||||
data-slot="button" |
||||
className={cn(buttonVariants({ variant, size, className }))} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
export { Button, buttonVariants } |
||||
@ -0,0 +1,257 @@ |
||||
"use client" |
||||
|
||||
import * as React from "react" |
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" |
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react" |
||||
|
||||
import { cn } from "@/lib/utils" |
||||
|
||||
function DropdownMenu({ |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) { |
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} /> |
||||
} |
||||
|
||||
function DropdownMenuPortal({ |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) { |
||||
return ( |
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} /> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuTrigger({ |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) { |
||||
return ( |
||||
<DropdownMenuPrimitive.Trigger |
||||
data-slot="dropdown-menu-trigger" |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuContent({ |
||||
className, |
||||
sideOffset = 4, |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) { |
||||
return ( |
||||
<DropdownMenuPrimitive.Portal> |
||||
<DropdownMenuPrimitive.Content |
||||
data-slot="dropdown-menu-content" |
||||
sideOffset={sideOffset} |
||||
className={cn( |
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
</DropdownMenuPrimitive.Portal> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuGroup({ |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) { |
||||
return ( |
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} /> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuItem({ |
||||
className, |
||||
inset, |
||||
variant = "default", |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & { |
||||
inset?: boolean |
||||
variant?: "default" | "destructive" |
||||
}) { |
||||
return ( |
||||
<DropdownMenuPrimitive.Item |
||||
data-slot="dropdown-menu-item" |
||||
data-inset={inset} |
||||
data-variant={variant} |
||||
className={cn( |
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuCheckboxItem({ |
||||
className, |
||||
children, |
||||
checked, |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) { |
||||
return ( |
||||
<DropdownMenuPrimitive.CheckboxItem |
||||
data-slot="dropdown-menu-checkbox-item" |
||||
className={cn( |
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", |
||||
className |
||||
)} |
||||
checked={checked} |
||||
{...props} |
||||
> |
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"> |
||||
<DropdownMenuPrimitive.ItemIndicator> |
||||
<CheckIcon className="size-4" /> |
||||
</DropdownMenuPrimitive.ItemIndicator> |
||||
</span> |
||||
{children} |
||||
</DropdownMenuPrimitive.CheckboxItem> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuRadioGroup({ |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) { |
||||
return ( |
||||
<DropdownMenuPrimitive.RadioGroup |
||||
data-slot="dropdown-menu-radio-group" |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuRadioItem({ |
||||
className, |
||||
children, |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) { |
||||
return ( |
||||
<DropdownMenuPrimitive.RadioItem |
||||
data-slot="dropdown-menu-radio-item" |
||||
className={cn( |
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", |
||||
className |
||||
)} |
||||
{...props} |
||||
> |
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"> |
||||
<DropdownMenuPrimitive.ItemIndicator> |
||||
<CircleIcon className="size-2 fill-current" /> |
||||
</DropdownMenuPrimitive.ItemIndicator> |
||||
</span> |
||||
{children} |
||||
</DropdownMenuPrimitive.RadioItem> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuLabel({ |
||||
className, |
||||
inset, |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & { |
||||
inset?: boolean |
||||
}) { |
||||
return ( |
||||
<DropdownMenuPrimitive.Label |
||||
data-slot="dropdown-menu-label" |
||||
data-inset={inset} |
||||
className={cn( |
||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuSeparator({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) { |
||||
return ( |
||||
<DropdownMenuPrimitive.Separator |
||||
data-slot="dropdown-menu-separator" |
||||
className={cn("bg-border -mx-1 my-1 h-px", className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuShortcut({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<"span">) { |
||||
return ( |
||||
<span |
||||
data-slot="dropdown-menu-shortcut" |
||||
className={cn( |
||||
"text-muted-foreground ml-auto text-xs tracking-widest", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuSub({ |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) { |
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} /> |
||||
} |
||||
|
||||
function DropdownMenuSubTrigger({ |
||||
className, |
||||
inset, |
||||
children, |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { |
||||
inset?: boolean |
||||
}) { |
||||
return ( |
||||
<DropdownMenuPrimitive.SubTrigger |
||||
data-slot="dropdown-menu-sub-trigger" |
||||
data-inset={inset} |
||||
className={cn( |
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", |
||||
className |
||||
)} |
||||
{...props} |
||||
> |
||||
{children} |
||||
<ChevronRightIcon className="ml-auto size-4" /> |
||||
</DropdownMenuPrimitive.SubTrigger> |
||||
) |
||||
} |
||||
|
||||
function DropdownMenuSubContent({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) { |
||||
return ( |
||||
<DropdownMenuPrimitive.SubContent |
||||
data-slot="dropdown-menu-sub-content" |
||||
className={cn( |
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
export { |
||||
DropdownMenu, |
||||
DropdownMenuPortal, |
||||
DropdownMenuTrigger, |
||||
DropdownMenuContent, |
||||
DropdownMenuGroup, |
||||
DropdownMenuLabel, |
||||
DropdownMenuItem, |
||||
DropdownMenuCheckboxItem, |
||||
DropdownMenuRadioGroup, |
||||
DropdownMenuRadioItem, |
||||
DropdownMenuSeparator, |
||||
DropdownMenuShortcut, |
||||
DropdownMenuSub, |
||||
DropdownMenuSubTrigger, |
||||
DropdownMenuSubContent, |
||||
} |
||||
Loading…
Reference in new issue