Hello World!

Author: wem1c

.prettierignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -1,36 +1 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+# TODO

app/_components/ProjectGrid.jsx

@@ -0,0 +1,63 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import clsx from "clsx";
+
+const ProjectGrid = ({ projects }) => {
+  const [selectedProject, setSelectedProject] = useState(1);
+  const router = useRouter();
+
+  return (
+    <main className="grid-rows-9 relative grid min-h-[calc(100svh-3rem)] bg-fuchsia-400 bg-opacity-20 lg:grid-cols-3 lg:grid-rows-3">
+      <Image
+        key={"img" + projects[0].id}
+        src={projects[selectedProject - 1].image}
+        alt="image"
+        fill
+        className={clsx(
+          "object-cover object-center transition-opacity duration-1000",
+        )}
+        priority
+        sizes="100vw"
+      />
+      {projects.map((project) => (
+        <label
+          key={"label_" + project.id}
+          className={clsx(
+            "group z-0 p-4",
+            "border-b border-gray-300 border-opacity-20 last:border-b-0 lg:border",
+            "text-gray-300 text-opacity-40",
+            selectedProject === project.id &&
+              "border-white bg-fuchsia-600 bg-opacity-20 shadow backdrop-blur-sm",
+          )}
+          onMouseEnter={() => setSelectedProject(project.id)}
+        >
+          <input
+            type="radio"
+            checked={project.id === selectedProject}
+            name="projectRadio"
+            value={project.id}
+            onChange={() => setSelectedProject(project.id)}
+            onKeyDown={(e) =>
+              e.key === "Enter" && router.push("/projects/" + project.id)
+            }
+            className="appearance-none"
+          />
+          <a
+            className={clsx(
+              "text-lg underline underline-offset-4 hover:font-medium",
+              selectedProject === project.id && "text-white",
+            )}
+            href={`/projects/${project.id}`}
+          >
+            {project.title}
+          </a>
+        </label>
+      ))}
+    </main>
+  );
+};
+
+export default ProjectGrid;

app/globals.css

@@ -3,25 +3,18 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --primary-rgb: 0, 0, 0;
+  --secondary-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --primary-rgb: 255, 255, 255;
+    --secondary-rgb: 0, 0, 0;
   }
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  color: rgb(var(--primary-rgb));
+  background: rgb(var(--secondary-rgb));
 }

app/layout.js

@@ -0,0 +1,40 @@
+import clsx from "clsx";
+
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "Project Grid Test",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <header>
+          <nav
+            className={clsx(
+              "flex h-12 items-center justify-center",
+              " bg-[rgb(var(--primary-rgb))] text-[rgb(var(--secondary-rgb))]",
+            )}
+          >
+            <a href="/" className="block">
+              Home
+            </a>
+          </nav>
+        </header>
+        {children}
+        <footer
+          className={clsx(
+            "flex h-12 w-full items-center justify-center",
+            "bg-[rgb(var(--primary-rgb))] text-[rgb(var(--secondary-rgb))]",
+          )}
+        >
+          <span className="block">Footer</span>
+        </footer>
+      </body>
+    </html>
+  );
+}