feat(layout): implement global layout

2024-01-11 23:34:19 +01:00
parent 01ed9437fa
commit 9e75d6b8bb
6 changed files with 56 additions and 1 deletions
--- a/src/components/Terminal.tsx
+++ b/src/components/Terminal.tsx
@@ -0,0 +1,20 @@
+import { type FunctionComponent, type PropsWithChildren } from "react";
+import clsx from "clsx";
+
+type TerminalProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export const Terminal: FunctionComponent<TerminalProps> = ({
+  children,
+  className,
+}) => (
+  <div
+    className={clsx(
+      "rounded-lg border-2 border-[#595959] bg-[#1e1e2e] bg-opacity-95 px-1 text-[#cdd6f4] shadow-window transition-colors duration-[500ms] ease-out hover:border-[#cdd6f4] hover:duration-[200ms]",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,12 @@
 import Head from "next/head";
+import { JetBrains_Mono } from "next/font/google";
+import clsx from "clsx";
+import { Terminal } from "~/components/Terminal";
+
+const text = JetBrains_Mono({
+  subsets: ["latin"],
+  weight: ["400"],
+});

 export default function Home() {
  return (
@@ -6,7 +14,22 @@ export default function Home() {
      <Head>
        <title>pihkaal</title>
      </Head>
-      <main></main>
+      <main
+        className={clsx(
+          "insets-0 fixed flex h-screen w-screen flex-col gap-3 bg-[url(/wallpaper.jpg)] bg-cover p-3",
+          text.className,
+        )}
+      >
+        <nav className="border border-red-500">toolbar</nav>
+
+        <Terminal className="flex-1">nvim</Terminal>
+
+        <div className="flex h-[15%] gap-3">
+          <Terminal className="flex-1">console</Terminal>
+
+          <Terminal className="flex-1">cava</Terminal>
+        </div>
+      </main>
    </>
  );
 }