JoshS/nyvora.app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #43 from anshnk/main

Browse source 
Update Dependencies, Add Midnight Theme, and Implement Theme Switcher
This commit is contained in:
Owski 2024-10-12 17:33:30 -05:00 • committed by GitHub
commit fcd6718d0c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 1307 additions and 897 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
package.json
View file

@ -9,40 +9,41 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@hookform/resolvers": "^3.3.4", "@hookform/resolvers": "^3.9.0",
"@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-label": "^2.0.2", "@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-select": "^2.0.0", "@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.0.7", "@radix-ui/react-toast": "^1.2.2",
"@tomphttp/bare-server-node": "^2.0.3", "@radix-ui/react-tooltip": "^1.1.3",
"@tomphttp/bare-server-node": "^2.0.4",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.1",
"framer-motion": "^11.0.25", "framer-motion": "^11.11.8",
"lucide-react": "^0.363.0", "lucide-react": "^0.452.0",
"mini-svg-data-uri": "^1.4.4", "mini-svg-data-uri": "^1.4.4",
"next": "14.1.4", "next": "14.2.15",
"next-themes": "^0.3.0", "next-themes": "^0.3.0",
"react": "^18", "react": "^18.3.1",
"react-dom": "^18", "react-dom": "^18.3.1",
"react-hook-form": "^7.51.1", "react-hook-form": "^7.53.0",
"react-router-dom": "^6.27.0", "react-router-dom": "^6.27.0",
"sonner": "^1.4.41", "sonner": "^1.5.0",
"store2": "^2.14.3", "store2": "^2.14.3",
"tailwind-merge": "^2.2.2", "tailwind-merge": "^2.5.3",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"zod": "^3.22.4" "zod": "^3.23.8"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^22.7.5",
"@types/react": "^18", "@types/react": "^18.3.11",
"@types/react-dom": "^18", "@types/react-dom": "^18.3.1",
"autoprefixer": "^10.0.1", "autoprefixer": "^10.4.20",
"postcss": "^8", "postcss": "^8.4.47",
"tailwindcss": "^3.3.0", "tailwindcss": "^3.4.13",
"typescript": "^5" "typescript": "^5.6.3"
} }
} }

1772
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

25
src/app/globals.css
View file

@ -70,6 +70,29 @@
--destructive-foreground: 2 82% 90%; --destructive-foreground: 2 82% 90%;
--ring: 223 42% 57%; --ring: 223 42% 57%;
} }
.midnight {
--background: 0 0% 0%;
--foreground: 0 0% 100%;
--muted: 0 0% 15%;
--muted-foreground: 0 0% 50%;
--popover: 0 0% 10%;
--popover-foreground: 0 0% 95%;
--card: 0 0% 5%;
--card-foreground: 0 0% 90%;
--border: 0 0% 25%;
--input: 0 0% 20%;
--primary: 210 100% 40%;
--primary-foreground: 0 0% 100%;
--secondary: 210 50% 30%;
--secondary-foreground: 0 0% 90%;
--accent: 210 50% 25%;
--accent-foreground: 0 0% 90%;
--destructive: 6 90% 50%;
--destructive-foreground: 0 0% 100%;
--ring: 0 0% 70%;
--radius: 0.4rem;
}
} }
@layer base { @layer base {
@ -117,4 +140,4 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
} }

9
src/app/layout.tsx
View file

@ -2,6 +2,7 @@ import type { Metadata } from 'next'
import { Inter } from 'next/font/google' import { Inter } from 'next/font/google'
import './globals.css' import './globals.css'
import Navbar from '@/components/navbar' import Navbar from '@/components/navbar'
import { Themes } from "./providers";
const inter = Inter({ subsets: ['latin'] }) const inter = Inter({ subsets: ['latin'] })
@ -22,9 +23,11 @@ export default function RootLayout({
</head> </head>
<body className={inter.className}> <body className={inter.className}>
<Navbar /> <Themes>
<Navbar />
<div className="pt-14">{children}</div>
<div className="pt-14">{children}</div>
</Themes>
</body> </body>
</html> </html>
) )

7
src/app/providers.tsx Normal file
View file

@ -0,0 +1,7 @@
"use client";
import { ThemeProvider } from "next-themes";
export function Themes({ children }: { children: React.ReactNode }) {
return <ThemeProvider attribute="class">{children}</ThemeProvider>;
}

46
src/components/ThemeSwitch.tsx Normal file
View file

@ -0,0 +1,46 @@
"use client";
import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export function ModeToggle() {
const { setTheme } = useTheme();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("radius")}>
Radius
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("cyberpunk")}>
Cyberpunk
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("bluelight")}>
Bluelight
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("midnight")}>
Midnight
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}

4
src/components/navbar.tsx
View file

@ -6,6 +6,7 @@ import { Button } from './ui/button'
import { useState } from 'react' import { useState } from 'react'
import Sidebar from './sidebar' import Sidebar from './sidebar'
import Link from 'next/link' // Import the Link component import Link from 'next/link' // Import the Link component
import { ModeToggle } from "./ThemeSwitch";
export default function Navbar() { export default function Navbar() {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
@ -17,8 +18,9 @@ export default function Navbar() {
<div className="w-screen fixed h-14 border-b flex items-center px-4"> <div className="w-screen fixed h-14 border-b flex items-center px-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button onClick={() => setOpen(true)} size="icon" variant="ghost"> <Button onClick={() => setOpen(true)} size="icon" variant="ghost">
<Lucide.Menu className="h-7 w-7" /> <Lucide.Menu className="h-7 w-7" />
</Button> </Button>
<ModeToggle />
{/* Wrap the logo and text in a Link */} {/* Wrap the logo and text in a Link */}
<Link href="/" className="flex items-center gap-2"> <Link href="/" className="flex items-center gap-2">
<Lucide.Radius className="h-8 w-8 rotate-180" /> <Lucide.Radius className="h-8 w-8 rotate-180" />

86
src/components/theme-provider.tsx Normal file
View file

@ -0,0 +1,86 @@
import { createContext, useContext, useEffect, useState } from "react";
type Theme =
| "radius"
| "cyberpunk"
| "bluelight"
| "midnight"
| "system";
const themes: Theme[] = [
"radius",
"cyberpunk",
"bluelight",
"midnight",
"system",
];
type ThemeProviderProps = {
children: React.ReactNode;
defaultTheme?: Theme;
storageKey?: string;
};
type ThemeProviderState = {
themes: Theme[];
theme: Theme;
setTheme: (theme: Theme) => void;
};
const initialState: ThemeProviderState = {
themes: themes,
theme: "system",
setTheme: () => null,
};
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
export function ThemeProvider({
children,
defaultTheme = "system",
storageKey = "theme",
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
);
useEffect(() => {
const root = window.document.documentElement;
themes.forEach((theme) => root.classList.remove(theme));
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "default"
: "bluelight";
root.classList.add(systemTheme);
return;
}
root.classList.add(theme);
}, [theme]);
const value = {
theme,
themes,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
},
};
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
);
}
// eslint-disable-next-line
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined)
throw new Error("useTheme must be used within a ThemeProvider");
return context;
};

200
src/components/ui/dropdown-menu.tsx Normal file
View file

@ -0,0 +1,200 @@
"use client"
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"
import { cn } from "@/lib/utils"
const DropdownMenu = DropdownMenuPrimitive.Root
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
const DropdownMenuGroup = DropdownMenuPrimitive.Group
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
const DropdownMenuSub = DropdownMenuPrimitive.Sub
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
const DropdownMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName
const DropdownMenuSubContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
className
)}
{...props}
/>
))
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName
const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName
const DropdownMenuRadioItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
{...props}
/>
)
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
}