Last active
January 24, 2024 18:33
-
-
Save samkingco/b8b53aea3d3094825833dda980e80512 to your computer and use it in GitHub Desktop.
Random symbol
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { RandomSymbol } from "@/app/RandomSymbol"; | |
| import type { Metadata } from "next"; | |
| import Link from "next/link"; | |
| import "./globals.css"; | |
| export const metadata: Metadata = { | |
| title: "Josh Pigford", | |
| description: "Dabbler", | |
| }; | |
| export default function RootLayout({ | |
| children, | |
| }: Readonly<{ | |
| children: React.ReactNode; | |
| }>) { | |
| return ( | |
| <html lang="en" className="dark"> | |
| <body className="dark:bg-black dark:text-white py-20 px-20"> | |
| <div className="flex items-start gap-4"> | |
| <Link | |
| href="/" | |
| className="text-gold-500 text-6xl font-semibold hover:text-gold-400 w-14 text-right" | |
| > | |
| <RandomSymbol /> | |
| </Link> | |
| <div> | |
| <header className="prose dark:prose-invert font-serif mb-10"> | |
| <h1 className="text-6xl font-light tracking-tight mb-3"> | |
| Josh Pigford | |
| </h1> | |
| <p className="text-xl"> | |
| <Link href="/articles" className="thick-link"> | |
| Articles | |
| </Link>{" "} | |
| /{" "} | |
| <Link href="/projects" className="thick-link"> | |
| Projects | |
| </Link>{" "} | |
| /{" "} | |
| <Link href="/investments" className="thick-link"> | |
| Investments | |
| </Link>{" "} | |
| /{" "} | |
| <Link href="/podcasts" className="thick-link"> | |
| Podcasts | |
| </Link>{" "} | |
| /{" "} | |
| <Link href="/reading" className="thick-link"> | |
| Reading | |
| </Link>{" "} | |
| /{" "} | |
| <Link href="/toys" className="thick-link"> | |
| Toys | |
| </Link>{" "} | |
| /{" "} | |
| <Link href="/keyboards" className="thick-link"> | |
| Keyboards | |
| </Link> | |
| </p> | |
| </header> | |
| <div>{children}</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use client"; | |
| import { useEffect, useState } from "react"; | |
| const symbols = ["⦂⦂", "⦿", "⊛", "⊚", "⊙", "⦚", "⟁", "⦂⦚"]; | |
| function getRandomSymbol() { | |
| const randomIndex = Math.floor(Math.random() * symbols.length); | |
| return symbols[randomIndex]; | |
| } | |
| export function RandomSymbol() { | |
| const [symbol, setSymbol] = useState(" "); | |
| // useEffect to avoid hydration errors where one symbol | |
| // is rendered on the server, and another is rendered | |
| // on the client. useEffect doesn't run on the server | |
| // so the initial symbol is " ". | |
| useEffect(() => { | |
| setSymbol(getRandomSymbol()); | |
| }, []); | |
| return <>{symbol}</>; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment