Unstash changes

src/components/Changelog.tsx

@@ -1,57 +0,0 @@
-import { useEffect, useState } from "react";
-import { ChangelogEntry } from "~/components/ChangelogEntry";
-
-export interface LogEntry {
-  content: string;
-  data: {
-    title: string;
-    date: string;
-  };
-  isEmpty: boolean;
-  excerpt: string;
-}
-
-export const Changelog = () => {
-  const [entries, setEntries] = useState([] as LogEntry[]);
-  const [loaded, setLoaded] = useState(false);
-
-  const getEmployees = () => {
-    fetch("https://xnl.hri7566.info/api/changelog?n=5", {
-      next: {
-        revalidate: 60,
-      },
-    })
-      .then((res) => {
-        res
-          .json()
-          .then((j: { logs: LogEntry[] }) => {
-            setEntries(j.logs);
-            setLoaded(true);
-          })
-          .catch((err) => console.error(err));
-      })
-      .catch((err) => console.error(err));
-  };
-
-  useEffect(() => {
-    getEmployees();
-  }, []);
-
-  return (
-    <>
-      {/* <EmployeeDescription name="Test" position="test" /> */}
-      {loaded ? (
-        entries.map((entry, index) => (
-          <ChangelogEntry
-            title={entry.data.title}
-            date={entry.data.date}
-            content={entry.content}
-            key={index}
-          />
-        ))
-      ) : (
-        <p>Loading...</p>
-      )}
-    </>
-  );
-};

src/components/ChangelogEntry.tsx

@@ -1,18 +0,0 @@
-export const ChangelogEntry = (
-  props: {
-    title: string;
-    date: string;
-    content: string;
-  } = {
-    title: "Title",
-    date: "Date",
-    content: "Content",
-  }
-) => {
-  return (
-    <div className="m-3 flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-2xl hover:backdrop-blur">
-      <h3 className="text-2xl font-bold">{props.date}</h3>
-      <div className="text-lg">{props.content}</div>
-    </div>
-  );
-};

src/components/CornerLogo.tsx

@@ -1,10 +0,0 @@
-import Link from "next/link";
-import { Logo } from "./Logo";
-
-export const CornerLogo = () => {
-  return (
-    <Link className="absolute left-0 top-0 hidden sm:flex" href="/">
-      <Logo />
-    </Link>
-  );
-};

src/components/EmployeeDescription.tsx

@@ -1,16 +0,0 @@
-export const EmployeeDescription = (
-  props: {
-    name: string;
-    position: string;
-  } = {
-    name: "Title",
-    position: "Text",
-  }
-) => {
-  return (
-    <div className="m-3 flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-2xl hover:backdrop-blur">
-      <h3 className="text-2xl font-bold">{props.name}</h3>
-      <div className="text-lg">{props.position}</div>
-    </div>
-  );
-};

src/components/EmployeeList.tsx

@@ -1,48 +0,0 @@
-import { useEffect, useState } from "react";
-import { EmployeeDescription } from "~/components/EmployeeDescription";
-
-export const EmployeeList = () => {
-  const [employees, setEmployees] = useState({} as Record<string, string>);
-  const [loaded, setLoaded] = useState(false);
-
-  const getEmployees = () => {
-    fetch("https://xnl.hri7566.info/employment/", {
-      next: {
-        revalidate: 60,
-      },
-    })
-      .then((res) => {
-        res
-          .json()
-          .then((j) => {
-            setEmployees(j as Record<string, string>);
-            setLoaded(true);
-          })
-          .catch((err) => console.error(err));
-      })
-      .catch((err) => console.error(err));
-  };
-
-  useEffect(() => {
-    getEmployees();
-  }, []);
-
-  return (
-    <>
-      {/* <EmployeeDescription name="Test" position="test" /> */}
-      {loaded ? (
-        Object.keys(employees)
-          .sort()
-          .map((k) => (
-            <EmployeeDescription
-              name={k}
-              position={employees[k] || "<no position>"}
-              key={Object.keys(employees).indexOf(k)}
-            />
-          ))
-      ) : (
-        <p>Loading...</p>
-      )}
-    </>
-  );
-};

src/components/LinkButton.tsx

@@ -1,26 +0,0 @@
-import Link from "next/link";
-
-export const LinkButton = (
-  props: {
-    title: string;
-    text: string;
-    href: string;
-  } = {
-    title: "Title",
-    text: "Text",
-    href: "#",
-  }
-) => {
-  return (
-    <div>
-      <Link
-        className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-2xl hover:backdrop-blur"
-        href={props.href}
-        target="_blank"
-      >
-        <h3 className="text-2xl font-bold">{props.title}</h3>
-        <div className="text-lg">{props.text}</div>
-      </Link>
-    </div>
-  );
-};

src/components/Logo.tsx

@@ -1,9 +0,0 @@
-import Image from "next/image";
-
-export const Logo = () => {
-  return (
-    <div id="logo">
-      <Image src="/xcl.png" alt="XCL" width={209} height={105} />
-    </div>
-  );
-};

src/components/NavigationBar.tsx

@@ -1,12 +0,0 @@
-import { NavigationLink } from "./NavigationLink";
-
-export const NavigationBar = () => {
-  return (
-    <div className="flex">
-      <NavigationLink href="/" text="Home" />
-      <NavigationLink href="/about" text="Our Mission" />
-      <NavigationLink href="/team" text="Our Team" />
-      <NavigationLink href="/changelog" text="Changelog" />
-    </div>
-  );
-};

src/components/NavigationLink.tsx

@@ -1,12 +0,0 @@
-import Link from "next/link";
-
-export const NavigationLink = (props: { href: string; text: string }) => {
-  return (
-    <Link
-      href={props.href}
-      className="m-2 flex max-w-xs cursor-pointer flex-col gap-4 rounded-xl p-4 text-white transition-all hover:bg-white/10 hover:shadow-lg hover:backdrop-blur"
-    >
-      <h3 className="text-lg">{props.text}</h3>
-    </Link>
-  );
-};

src/components/PageContentBox.tsx

@@ -1,18 +0,0 @@
-import { type PropsWithChildren } from "react";
-
-export const PageContentBox = (
-  props: {
-    title: string;
-  } & PropsWithChildren
-) => {
-  return (
-    <div className="flex flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm">
-      {props.title ? (
-        <h3 className="text-2xl font-bold">{props.title}</h3>
-      ) : (
-        <></>
-      )}
-      {props.children}
-    </div>
-  );
-};

src/components/layout.tsx

@@ -1,33 +1,14 @@
 import Head from "next/head";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  const bgs = [
-    "/bg/webp/bg1.webp",
-    "/bg/webp/bg2.webp",
-    "/bg/webp/bg3.webp",
-    "/bg/webp/bg4.webp",
-    "/bg/webp/bg5.webp",
-    "/bg/webp/bg6.webp",
-    "/bg/webp/bg7.webp",
-    "/bg/webp/bg8.webp",
-    "/bg/webp/bg9.webp",
-  ];
-
-  const randomBg = bgs[Math.floor(Math.random() * bgs.length)] as string;
-
   return (
     <>
       <Head>
         <title>XCL</title>
-        <meta name="description" content="XCL homepage" />
-        <link rel="icon" href="/favicon.svg" />
+        <meta name="description" content="XCL" />
+        <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main
-        className="bg-cover bg-center"
-        style={{ backgroundImage: `url("${randomBg}")` }}
-      >
-        {children}
-      </main>
+      <main className="bg-cover bg-center">{children}</main>
     </>
   );
 }

src/components/xcl/Header.tsx

@@ -0,0 +1,9 @@
+import { Logo } from "./Logo";
+
+export function Header() {
+  return (
+    <div className="sticky top-0 z-[100] mx-auto h-[4.5rem] w-full max-w-screen-xl border-b border-[#ffffff10] p-3 shadow-lg backdrop-blur-sm sm:h-24">
+      <Logo />
+    </div>
+  );
+}

src/components/xcl/Logo.tsx

@@ -0,0 +1,5 @@
+import Image from "next/image";
+
+export function Logo() {
+  return <Image src="/xcl.png" width={160} height={116} alt="XCL Logo" />;
+}

src/components/xnl/Header.tsx

@@ -0,0 +1,9 @@
+import { Logo } from "./Logo";
+
+export function Header() {
+  return (
+    <div className="sticky top-0 z-[100] mx-auto h-[4.5rem] w-full max-w-screen-xl border-b border-[#ffffff10] p-3 shadow-lg backdrop-blur-sm sm:h-24">
+      <Logo />
+    </div>
+  );
+}

src/components/xnl/Logo.tsx

@@ -0,0 +1,5 @@
+import Image from "next/image";
+
+export function Logo() {
+  return <Image src="/xnl.png" width={175} height={116} alt="XNL Logo" />;
+}

src/pages/about.tsx

@@ -1,30 +0,0 @@
-import { NavigationBar } from "../components/NavigationBar";
-import { PageContentBox } from "~/components/PageContentBox";
-import { CornerLogo } from "~/components/CornerLogo";
-
-export default function About() {
-  return (
-    <div className="bg-black/60">
-      <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
-        <CornerLogo />
-        <div className="absolute right-0 top-0">
-          <NavigationBar />
-        </div>
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8">
-            <PageContentBox title="Our Mission">
-              At XCL, we pioneer the convergence of innovation and imagination
-              within SwichCraft. Driven by a passion for technological
-              excellence, we are committed to pushing the boundaries of what is
-              achievable with the given technologies of SwitchCraft. Our
-              dedicated team of experts harnesses the power of creativity to
-              deliver cutting-edge solutions tailored to the unique needs of our
-              clients.
-            </PageContentBox>
-          </div>
-          <div className="flex flex-col items-center gap-2"></div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/pages/changelog.tsx

@@ -1,25 +0,0 @@
-import { NavigationBar } from "../components/NavigationBar";
-import { PageContentBox } from "~/components/PageContentBox";
-import { CornerLogo } from "~/components/CornerLogo";
-import { Changelog as ChangelogComponent } from "~/components/Changelog";
-
-export default function Changelog() {
-  return (
-    <div className="bg-black/60">
-      <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
-        <CornerLogo />
-        <div className="absolute right-0 top-0">
-          <NavigationBar />
-        </div>
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8">
-            <PageContentBox title="Changelog">
-              <ChangelogComponent />
-            </PageContentBox>
-          </div>
-          <div className="flex flex-col items-center gap-2"></div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/pages/index.tsx

@@ -1,26 +1,9 @@
-import { Logo } from "../components/Logo";
-import { LinkButton } from "../components/LinkButton";
-import { NavigationBar } from "../components/NavigationBar";
+import { Header } from "~/components/xcl/Header";
 
 export default function Home() {
   return (
-    <div className="bg-black/60">
-      <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
-        <div className="absolute right-0 top-0">
-          <NavigationBar />
-        </div>
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-          <Logo />
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8">
-            <LinkButton
-              href="https://git.hri7566.info/xcl"
-              title="Git →"
-              text="Learn more about XCL."
-            />
-          </div>
-          <div className="flex flex-col items-center gap-2"></div>
-        </div>
-      </div>
+    <div className="flex min-h-screen flex-col bg-stone-950">
+      <Header />
     </div>
   );
 }

src/pages/team.tsx

@@ -1,24 +0,0 @@
-import { NavigationBar } from "~/components/NavigationBar";
-import { PageContentBox } from "~/components/PageContentBox";
-import { EmployeeList } from "~/components/EmployeeList";
-import { CornerLogo } from "~/components/CornerLogo";
-
-export default function Team() {
-  return (
-    <div className="bg-black/60">
-      <div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
-        <CornerLogo />
-        <div className="absolute right-0 top-0">
-          <NavigationBar />
-        </div>
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-          <PageContentBox title="Employees">
-            <div className="grid grid-cols-1 md:grid-cols-3">
-              <EmployeeList />
-            </div>
-          </PageContentBox>
-        </div>
-      </div>
-    </div>
-  );
-}

src/pages/xnl/index.tsx

@@ -0,0 +1,9 @@
+import { Header } from "~/components/xnl/Header";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col bg-zinc-950">
+      <Header />
+    </div>
+  );
+}