main
Elias Almqvist 8 months ago
parent 2445e07411
commit 341aae53a9
No known key found for this signature in database
GPG Key ID: E31A99CE3E75A158
  1. 86
      src/app/globals.css
  2. 8
      src/app/layout.tsx
  3. 33
      src/components/binds/binds.tsx
  4. 2
      src/components/binds/index.tsx
  5. 16
      src/components/binds/navbinds.tsx
  6. 13
      src/components/layout/header.tsx
  7. 2
      src/components/layout/index.tsx
  8. 6
      src/components/layout/nav.tsx

@ -5,64 +5,47 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--primary: 24 9.8% 10%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 20 14.3% 4.1%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--radius: 0.5rem;
}
.dark {
--background: 20 14.3% 4.1%;
--foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--primary: 60 9.1% 97.8%;
--primary-foreground: 24 9.8% 10%;
--secondary: 12 6.5% 15.1%;
--secondary-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 60 9.1% 97.8%;
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 12 6.5% 15.1%;
--input: 12 6.5% 15.1%;
--ring: 24 5.7% 82.9%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
}
}
@ -73,4 +56,5 @@
body {
@apply bg-background text-foreground;
}
}
}

@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { Inter as FontSans } from "next/font/google";
import { Lato as FontSans } from "next/font/google";
import "./globals.css";
export const metadata: Metadata = {
@ -12,8 +12,8 @@ import { ThemeProvider } from "@/components/theme-provider";
import Layout from "@/components/layout";
const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
weight: ["400", "700"],
subsets: ["latin", "latin-ext"],
});
export default function RootLayout({
@ -25,7 +25,7 @@ export default function RootLayout({
<html lang="en">
<body
className={cn(
"min-h-screen bg-background text-foreground font-sans antialiased",
"min-h-screen bg-background text-foreground antialiased",
fontSans.className,
)}
>

@ -1,33 +0,0 @@
"use client";
import { useRouter } from "next/navigation";
import Keybinds from "@/components/binds";
import { useActionCommand } from "@/hooks/useActionCommand";
import { useTheme } from "next-themes";
const NavBinds = () => {
const router = useRouter();
const { open: actionOpen, setOpen: setActionOpen } = useActionCommand();
const { theme, setTheme } = useTheme();
return (
<Keybinds
keybinds={{
h: () => {
router.push("/");
},
p: () => {
router.push("/posts");
},
k: () => {
setActionOpen(!actionOpen);
},
l: () => {
setTheme(theme === "light" ? "dark" : "light");
},
}}
/>
);
};
export default NavBinds;

@ -32,7 +32,7 @@ const Keybinds: React.FC<KeybindsProps> = ({ keybinds }) => {
return () => document.removeEventListener("keydown", keyDownHandler);
});
return <div className="" id="keybinds_handler" />;
return <div className="hidden" id="keybinds_handler" />;
};
export default Keybinds;

@ -1,35 +1,27 @@
"use client";
import { useRouter } from "next/navigation";
import Keybinds from "@/components/inputs/keybinds";
import Keybinds from "@/components/binds";
import { useActionCommand } from "@/hooks/useActionCommand";
import { useSidebar } from "@/hooks/useSidebar";
import { useTheme } from "next-themes";
const NavBinds = () => {
const router = useRouter();
const { open: actionOpen, setOpen: setActionOpen } = useActionCommand();
const { open: sidebarOpen, setOpen: setSidebarOpen } = useSidebar();
const { theme, setTheme } = useTheme();
return (
<Keybinds
keybinds={{
f: () => {
h: () => {
router.push("/");
},
s: () => {
router.push("/settings");
},
h: () => {
router.push("/history");
p: () => {
router.push("/posts");
},
k: () => {
setActionOpen(!actionOpen);
},
g: () => {
setSidebarOpen(!sidebarOpen);
},
l: () => {
setTheme(theme === "light" ? "dark" : "light");
},

@ -1,14 +1,15 @@
import Logo from "@/components/logo";
import { Separator } from "@/components/ui/separator";
import Nav from "./nav";
import Link from "next/link";
const Header = () => (
<header className="w-full h-16 flex flex-col justify-center items-center mb-4">
<div className="py-4 flex flex-row justify-between w-full max-w-screen-lg">
<div className="flex flex-row items-center gap-x-2">
<Logo className="h-8 w-8" />
<span className="font-mono text-2xl">wych.dev</span>
</div>
<header className="w-full flex flex-col justify-center items-center">
<div className="py-2 px-4 md:px-8 flex flex-row justify-between w-full max-w-screen-2xl">
<Link href="/" className="flex flex-row items-center gap-x-2 hover:opacity-80 transition-opacity">
<Logo className="h-6 w-6" />
<span className="font-mono text-2xl hidden md:inline-block">wych.dev</span>
</Link>
<Nav />
</div>
<Separator />

@ -5,7 +5,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
return (
<>
<Header />
<div className="max-w-screen-lg md:px-8">{children}</div>
<div className="max-w-screen-xl">{children}</div>
<NavBinds />
</>
);

@ -55,15 +55,15 @@ const ActionCommand: React.FC<ActionCommandProps> = ({
<Button
variant="outline"
className={cn(
"relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64",
"relative h-8 justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none pr-12 md:w-40 lg:w-64",
className,
)}
onClick={() => setActionOpen(true)}
{...props}
>
<span className="hidden lg:inline-flex">Navigation...</span>
<span className="hidden lg:inline-flex">Search navigation...</span>
<span className="inline-flex lg:hidden">Search...</span>
<kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
<kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 flex">
<span className="text-xs"></span>K
</kbd>
</Button>

Loading…
Cancel
Save