feat: day 3 materials update

front-end/package.json

@@ -9,13 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.6.2",
+    "next": "14.0.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0"
   }
-}
+}

front-end/src/components/Navbar.jsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import Logo from "../../public/Logo.png";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+export default function Navbar() {
+  const router = useRouter();
+  const [activePage, setActivePage] = useState(router.pathname);
+  return (
+    <div className="bg-[#F9EFE7] text-black flex justify-between px-[80px] font-quicksand font-semibold">
+      <Image src={Logo} className="py-[24px]" />
+
+      <div className="flex gap-[48px] items-center">
+        <Link href="/" className={activePage === "/" ? "text-[#3A8412]" : "text-neutral-500"}>Beranda</Link>
+        <Link href="/dashboard" className={activePage === "/dashboard" ? "text-[#3A8412]" : "text-neutral-500"}>Dashboard</Link>
+        <Link href="/verifikasi" className={activePage === "/verifikasi" ? "text-[#3A8412]" : "text-neutral-500"}>Verifikasi</Link>
+      </div>
+
+      <div className="flex items-center gap-2">
+        Nama Pengguna
+        <div className="bg-green-500 rounded-full w-[32px] aspect-square"></div>
+      </div>
+    </div>
+  );
+}

front-end/src/pages/axios.js

@@ -0,0 +1,37 @@
+import axios from "axios"
+import { useEffect, useState } from "react"
+
+function WeatherComponent({time, cuaca, temp}) {
+  return(
+    <div className="flex flex-col justify-center bg-white w-fit text-black font-quicksand">
+      <h1>{time}</h1>
+      <h1 className="text-[20px] font-semibold">{cuaca}</h1>
+      <h1 className="text-center">{temp}°C</h1>
+    </div>
+  )
+}
+
+export default function Page() {
+  const [data, setData] = useState([])
+  useEffect(() => {  
+    axios.get("https://ibnux.github.io/BMKG-importer/cuaca/501397.json")
+    .then((res) => {
+      console.log(res.data)
+      setData(res.data)
+    })
+    .catch((err) => {
+      console.log(err)
+    })
+  }, [])
+  return(
+    <main className="text-white grid grid-cols-4 gap-4">
+      {
+        data.map((weather) => {
+          return(
+            <WeatherComponent time={weather.jamCuaca} cuaca={weather.cuaca} temp={weather.tempC} />
+          )
+        })
+      }
+    </main>
+  )
+}

front-end/src/pages/dashboard.jsx

@@ -0,0 +1,10 @@
+import Navbar from "@/components/Navbar";
+
+export default function Dashboard() {
+  return(
+    <main>
+      <Navbar />
+      Dashboard page
+    </main>
+  )
+}

front-end/src/pages/index.js

@@ -1,12 +1,13 @@
 import Image from 'next/image'
 import { Inter } from 'next/font/google'
+import Navbar from '@/components/Navbar'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export default function Home() {
   return (
     <main>
-      landing page
+      <Navbar />
     </main>
   )
 }

front-end/src/pages/verifikasi.js

@@ -0,0 +1,9 @@
+import Navbar from "@/components/Navbar";
+
+export default function VerifikasiPage() {
+  return(
+    <main>
+      <Navbar />
+    </main>
+  )
+}

front-end/src/styles/globals.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

front-end/tailwind.config.js

@@ -7,11 +7,28 @@ module.exports = {
   ],
   theme: {
     extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      colors: {
+        neutral: {
+          50: "#F8F8F8",
+          100: "#F1F1F1",
+          300: "#D6D5D6",
+          500: "#A4A4A4",
+          700: "#7F7E7F",
+          900: "#444344",
+          1000: "#262526"
+        },
+        "green-1": {
+          100: "#EAF3E6",
+          300: "#C1DCB3",
+          400: "#ADD199",
+          500: "#98C580",
+          600: "#7CA268",
+          900: "#293721"
+        }
       },
+      fontFamily: {
+        quicksand: ["Quicksand", "sans-serif"], 
+      }
     },
   },
   plugins: [],