working on home

g00gol · Oct 8, 2023 · c82979c · c82979c
1 parent e9cccd3
commit c82979c
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 11 deletions.
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
@@ -5,4 +5,26 @@
 html, body {
   width: 100%;
   height: 100%;
+  overflow-y: auto
 }
+
+@layer base {
+  html {
+    @apply text-base font-quicksand;
+  }
+  h1 {
+    @apply text-4xl font-playfair-display font-bold;
+  }
+  h2 {
+    @apply text-3xl font-playfair-display;
+  }
+  h3 {
+    @apply text-2xl font-quicksand;
+  }
+  h4 {
+    @apply text-xl;
+  }
+  small {
+    @apply text-sm;
+  }
+}
diff --git a/frontend/app/layout.js b/frontend/app/layout.js
@@ -1,6 +1,8 @@
 import { Playfair_Display, Quicksand } from "next/font/google";
 
 import "./globals.css";
+import Nav from "@/components/nav";
+import ContextProvider from "@/context/context";
 
 const playfairDisplay = Playfair_Display({
   subsets: ["latin-ext"],
@@ -20,11 +22,14 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+    <html className="bg-night-blue text-mage-silver" lang="en">
       <body
-        className={`${playfairDisplay.className} bg-night-blue text-mage-silver`}
+        className={`${playfairDisplay.variable} ${quicksand.variable} w-3/6 mx-auto`}
       >
-        {children}
+        <ContextProvider>
+          <Nav />
+          {children}
+        </ContextProvider>
       </body>
     </html>
   );

diff --git a/frontend/app/page.js b/frontend/app/page.js
@@ -1,11 +1,19 @@
-import Image from "next/image";
+"use client";
+import React from "react";
+
+import Searchbar from "@/components/searchbar";
 
 export default function Home() {
   return (
     <main className="">
-      <h1 className="text-5xl font-playfair-display">
+      <h2 className="">
         celebrating open source projects. discover projects that interest you!
-      </h1>
+      </h2>
+      <h3>
+        making open source projects more discoverable. we set the standard for
+        collaboration, so you can focus on the projects you love
+      </h3>
+      <Searchbar />
     </main>
   );
 }
diff --git a/frontend/components/cards.js b/frontend/components/cards.js
@@ -0,0 +1,3 @@
+export default function Cards({ children }) {
+  return <div className="flex flex-wrap justify-center">{children}</div>;
+}
diff --git a/frontend/components/nav.js b/frontend/components/nav.js
@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export default function Nav() {
+  return (
+    <nav className="flex my-12">
+      <Link href="/">
+        <h3>frieren.</h3>
+      </Link>
+    </nav>
+  );
+}
diff --git a/frontend/components/searchbar.js b/frontend/components/searchbar.js
@@ -0,0 +1,22 @@
+import { useContext } from "react";
+import SearchbarContext from "@/context/searchbar";
+
+export default function Searchbar() {
+  const { searchTerm, setSearchTerm } = useContext(SearchbarContext);
+
+  function handleSearchbarChange(e) {
+    setSearchTerm(e.target.value);
+  }
+
+  return (
+    <>
+      <label htmlFor="searchbar" />
+      <input
+        id="searchbar"
+        placeholder="search by project name, language, or technologies"
+        className="my-12 w-full py-4 px-2 border-2 border-sky-blue rounded-lg bg-deep-blue font-quicksand text-mage-silver outline-none"
+        onChange={handleSearchbarChange}
+      />
+    </>
+  );
+}
diff --git a/frontend/context/context.js b/frontend/context/context.js
@@ -0,0 +1,14 @@
+"use client";
+
+import { SearchbarProvider } from "@/context/searchbar";
+
+const providers = [SearchbarProvider];
+
+/**
+ * This component is used to wrap the entire application with all the context providers.
+ */
+export default function ContextProvider({ children }) {
+  return providers.reduce((acc, Provider) => {
+    return <Provider>{acc}</Provider>;
+  }, children);
+}
diff --git a/frontend/context/searchbar.js b/frontend/context/searchbar.js
@@ -0,0 +1,15 @@
+import React, { createContext, useState } from "react";
+
+const SearchbarContext = createContext();
+
+export function SearchbarProvider({ children }) {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  return (
+    <SearchbarContext.Provider value={{ searchTerm, setSearchTerm }}>
+      {children}
+    </SearchbarContext.Provider>
+  );
+}
+
+export default SearchbarContext;
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,15 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "13.5.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "autoprefixer": "^10",
-    "postcss": "^8",
-    "tailwindcss": "^3",
     "eslint": "^8",
-    "eslint-config-next": "13.5.4"
+    "eslint-config-next": "13.5.4",
+    "postcss": "^8",
+    "tailwindcss": "^3"
   }
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -12,6 +12,15 @@ module.exports = {
         quicksand: ["var(--font-quicksand)"],
       },
     },
+    fontSize: {
+      sm: "0.750rem",
+      base: " 1rem",
+      xl: "1.333rem",
+      "2xl": "1.777rem",
+      "3xl": "2.369rem",
+      "4xl": "3.158rem",
+      "5xl": "4.210rem",
+    },
     colors: {
       "mage-silver": "#E4DFE6",
       "just-black": "#000000",