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
|
// 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
|
// Fonts
|
||||||
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
import { vipnagorgialla } from "@/components/Vipnagorgialla"; |
||||||
|
|
||||||
const Header = ({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) => ( |
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]"> |
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}> |
<button onClick={toggleSidebar}> |
||||||
{isOpen ? ( |
{isOpen ? ( |
||||||
<MdClose className="h-12 w-12 text-[#2A2C3F]" /> |
<MdClose className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5]" /> |
||||||
) : ( |
) : ( |
||||||
<MdMenu className="h-12 w-12 text-[#2A2C3F]" /> |
<MdMenu className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5]" /> |
||||||
)} |
)} |
||||||
</button> |
</button> |
||||||
<p className={`text-3xl ${vipnagorgialla.className} font-bold italic hidden`}>ENG</p> |
<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> |
</header> |
||||||
); |
); |
||||||
|
}; |
||||||
|
|
||||||
export default 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