feat: add theme toggle component and environment configuration for LiveKit integration
All checks were successful
GBCI / build (push) Successful in 2m58s
All checks were successful
GBCI / build (push) Successful in 2m58s
This commit is contained in:
parent
7f5c2615c0
commit
df8316094f
4 changed files with 55 additions and 2 deletions
7
.env
Normal file
7
.env
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
# Public environment variables
|
||||||
|
# These variables are exposed to the client-side code
|
||||||
|
# and should not contain any sensitive information.
|
||||||
|
|
||||||
|
|
||||||
|
NEXT_PUBLIC_LIVEKIT_URL=https://call.pragmatismo.com.br
|
||||||
|
|
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -24,5 +24,4 @@ dist-ssr
|
||||||
*.sw?
|
*.sw?
|
||||||
output.sh
|
output.sh
|
||||||
.next
|
.next
|
||||||
ui
|
out
|
||||||
.env
|
|
38
src/components/ui/mode-toggle.tsx
Normal file
38
src/components/ui/mode-toggle.tsx
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
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 default 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("light")}>
|
||||||
|
Light
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||||
|
Dark
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||||
|
System
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
)
|
||||||
|
}
|
9
src/components/ui/theme-provider.tsx
Normal file
9
src/components/ui/theme-provider.tsx
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||||
|
import { type ThemeProviderProps } from "next-themes";
|
||||||
|
|
||||||
|
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||||
|
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue