initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/babel"]
+}

.gitignore

@@ -0,0 +1,36 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

components/layout/Card/Card.js

@@ -0,0 +1,20 @@
+import classes from "./Card.module.css";
+import bottle from "../../../assets/bottle.jpg";
+import Image from "next/image";
+export default function Card(props) {
+  return (
+    <div className={classes.card}>
+      <div className={classes.cardItem}>
+        <div className={classes.cardTitle}>
+          <h2>Water Bottle</h2>
+        </div>
+        <div className={classes.cardImage}>
+          <Image src={bottle} className={classes.img} />
+        </div>
+        <div className={classes.cardInfo}>
+          <p class={classes.cardDescription}>Lost water bottle</p>
+        </div>
+      </div>
+    </div>
+  );
+}

components/layout/Card/Card.module.css

@@ -0,0 +1,44 @@
+.card {
+  display: flex;
+  padding: 1rem;
+  margin-bottom: 2rem;
+  width: 100%;
+}
+.cardItem {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  width: 100%;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.cardTitle {
+  display: flex;
+  flex: 1 1 auto;
+  padding: 1rem;
+  line-height: 1.5em;
+}
+.cardInfo {
+  display: flex;
+  flex: 1 1 auto;
+  padding: 1rem;
+  line-height: 1.5em;
+}
+.cardImage {
+  height: 200px;
+  overflow: hidden;
+  border-radius: 6px 6px 0px 0px;
+}
+.img {
+  width: 100%;
+}
+@media (min-width: 40rem) {
+  .card {
+    width: 50%;
+  }
+}
+@media (min-width: 56rem) {
+  .card {
+    width: 33.3%;
+  }
+}

components/layout/Footer.js

@@ -0,0 +1,8 @@
+import classes from "./Footer.module.css";
+export default function Footer() {
+  return (
+    <>
+      <footer className={classes.footer}></footer>
+    </>
+  );
+}

components/layout/Footer.module.css

@@ -0,0 +1,12 @@
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+  background: #393939;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}

components/layout/Layout.js

@@ -0,0 +1,13 @@
+import MainNavigation from "./MainNavigation";
+import classes from "./Layout.module.css";
+export default function Layout(props) {
+  return (
+    <>
+      <div className={classes.container}>
+        <MainNavigation />
+        <main>{props.children}</main>
+      </div>
+      <footer className={classes.footer}></footer>
+    </>
+  );
+}

components/layout/Layout.module.css

@@ -0,0 +1,16 @@
+.container {
+  min-height: 100vh;
+  position: relative;
+  display: block;
+  background-color: #e5e5e5;
+}
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+  background: #393939;
+  width: 100%;
+}

components/layout/MainNavigation.js

@@ -0,0 +1,65 @@
+import { Navbar, Button, Text } from "@nextui-org/react";
+import logo from "../../assets/geekhaven.svg";
+import Image from "next/image";
+import classes from "./MainNavigations.module.css";
+import Link from "next/link";
+export default function App() {
+  const collapseItems = ["Home", "Found", "Lost", "Submit", "Instructions"];
+
+  return (
+    <Navbar
+      variant="static"
+      css={{
+        width: "100%",
+        margin: "$0",
+        padding: "$0",
+      }}
+    >
+      <Navbar.Toggle showIn="xs" />
+      <Navbar.Brand
+        css={{
+          "@xs": {
+            w: "12%",
+          },
+        }}
+      >
+        <Image src={logo} alt="logo" width={50} height={50} />
+      </Navbar.Brand>
+      <Navbar.Content hideIn="xs">
+        <Link href="/" className={classes.item}>
+          Home
+        </Link>
+        <Link href="/found" className={classes.item}>
+          Found
+        </Link>
+        <Link href="/lost" className={classes.item}>
+          Lost
+        </Link>
+        <Link href="/listitem" className={classes.item}>
+          Submit
+        </Link>
+        <Link href="/instructions" className={classes.item}>
+          Instructions
+        </Link>
+        <Link href="/login" className={classes.item}>
+          Login
+        </Link>
+      </Navbar.Content>
+      <Navbar.Collapse>
+        {collapseItems.map((item, index) => (
+          <Navbar.CollapseItem key={item}>
+            <Link
+              color="inherit"
+              css={{
+                minWidth: "100%",
+              }}
+              href="#"
+            >
+              {item}
+            </Link>
+          </Navbar.CollapseItem>
+        ))}
+      </Navbar.Collapse>
+    </Navbar>
+  );
+}

components/layout/MainNavigations.module.css

@@ -0,0 +1,21 @@
+.item {
+  display: inline-block;
+  position: relative;
+}
+.item:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: -8px;
+  left: 0;
+  background-color: #0087ca;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.item:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}

next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig