elal
/
wych.dev
mirror of https://github.com/almqv/wych.dev
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More stuff

Browse Source
main
Elias Almqvist 8 months ago
parent 2445e07411
commit 341aae53a9
No known key found for this signature in database
GPG Key ID: E31A99CE3E75A158
8 changed files with 55 additions and 111 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

86
src/app/globals.css
Unescape View File

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

8
src/app/layout.tsx
Unescape View File

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

33
src/components/binds/binds.tsx
Unescape View File

@ -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;

2
src/components/binds/index.tsx
Unescape View File

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

16
src/components/binds/navbinds.tsx
Unescape View File

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

13
src/components/layout/header.tsx
Unescape View File

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

2
src/components/layout/index.tsx
Unescape View File

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

6
src/components/layout/nav.tsx
Unescape View File

@ -55,15 +55,15 @@ const ActionCommand: React.FC<ActionCommandProps> = ({
<Button <Button
variant="outline" variant="outline"
className={cn( 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, className,
)} )}
onClick={() => setActionOpen(true)} onClick={() => setActionOpen(true)}
{...props} {...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> <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 <span className="text-xs">⌘</span>K
</kbd> </kbd>
</Button> </Button>

Write Preview
Loading…
Cancel
Save