From 7dcc92d609771333b331e98c0ec2bcf40551ae8f Mon Sep 17 00:00:00 2001 From: IMISSHER99 <145341240+IMISSHER99@users.noreply.github.com> Date: Sat, 8 Jun 2024 20:37:36 +0530 Subject: [PATCH 1/7] Develop (#16) * Created a dummy header component * Added CSS * Added Header and Navigation * Created github action * Fixed npm install command typo * Testing Caching * Still Testing * Added styles for search bar * Added Searchbar component * Added Empty dockerfile * Added button component * Added buttons to header and added login and signup buttons * Added on click to the function to change styles for other component * Added Docker File and tested locally * Added Dockerhub login * Added metadata action testing to see what it does * Change image name * Added Build and push action testing to see if it works * Changed Order lets see if push works now * Change name for docker image * Added Responsive styles * Added Mobile Icons * Added Responsive styles * Created dummy component * added Navigation Dropdown component * Added External Cache Registry to cache and speed up the build * Added Docker buildX setup * Changed Name of the image * Feature (#13) * Created dummy dropdown component * Changed Font to lato * Changed Font added Navigation Drodown * Added Missing Key * Feature (#15) * Created dummy dropdown component * Changed Font to lato * Changed Font added Navigation Drodown * Added Missing Key * Added Drizzle configs, creted .env file. pulled the data from the database instead of hardcoding. * Removed unused imports --------- Co-authored-by: Amith --- .env | 1 + app/_actions/navigation.ts | 18 + app/_common/icons/Icons.tsx | 16 +- app/_components/header/Header.tsx | 2 +- .../navigationDropdown/NavigationDropdown.tsx | 110 +- app/_drizzle/connection.ts | 8 + app/_drizzle/migrationSetup.ts | 18 + .../migrations/0000_eminent_unicorn.sql | 28 + .../migrations/0001_gorgeous_onslaught.sql | 2 + .../migrations/0002_premium_jazinda.sql | 16 + .../migrations/0003_tiresome_multiple_man.sql | 1 + .../migrations/0004_rainy_omega_red.sql | 1 + .../migrations/meta/0000_snapshot.json | 150 + .../migrations/meta/0001_snapshot.json | 150 + .../migrations/meta/0002_snapshot.json | 150 + .../migrations/meta/0003_snapshot.json | 142 + .../migrations/meta/0004_snapshot.json | 150 + app/_drizzle/migrations/meta/_journal.json | 41 + app/_drizzle/schema.ts | 38 + app/_types/navigation.types.ts | 13 + app/globals.scss | 3 +- drizzle.config.ts | 12 + package-lock.json | 7480 ++++++++++------- package.json | 17 +- terraform/main.tf | 0 25 files changed, 5459 insertions(+), 3108 deletions(-) create mode 100644 .env create mode 100644 app/_actions/navigation.ts create mode 100644 app/_drizzle/connection.ts create mode 100644 app/_drizzle/migrationSetup.ts create mode 100644 app/_drizzle/migrations/0000_eminent_unicorn.sql create mode 100644 app/_drizzle/migrations/0001_gorgeous_onslaught.sql create mode 100644 app/_drizzle/migrations/0002_premium_jazinda.sql create mode 100644 app/_drizzle/migrations/0003_tiresome_multiple_man.sql create mode 100644 app/_drizzle/migrations/0004_rainy_omega_red.sql create mode 100644 app/_drizzle/migrations/meta/0000_snapshot.json create mode 100644 app/_drizzle/migrations/meta/0001_snapshot.json create mode 100644 app/_drizzle/migrations/meta/0002_snapshot.json create mode 100644 app/_drizzle/migrations/meta/0003_snapshot.json create mode 100644 app/_drizzle/migrations/meta/0004_snapshot.json create mode 100644 app/_drizzle/migrations/meta/_journal.json create mode 100644 app/_drizzle/schema.ts create mode 100644 app/_types/navigation.types.ts create mode 100644 drizzle.config.ts create mode 100644 terraform/main.tf diff --git a/.env b/.env new file mode 100644 index 0000000..08b4ae4 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +DATABASE_URL="postgres://mrrobot:A!m@12ith@localhost:5432/awwwards" \ No newline at end of file diff --git a/app/_actions/navigation.ts b/app/_actions/navigation.ts new file mode 100644 index 0000000..7afffbf --- /dev/null +++ b/app/_actions/navigation.ts @@ -0,0 +1,18 @@ +'use server' +import { db } from "../_drizzle/connection"; + +export const getNavigationData = async () => { + + const navigationData = await db.query.links.findMany({ + columns: {name: true, svgIconName: true}, + with: { + sublinks: { + columns: { + name: true, + count: true + } + } + } + }) + return navigationData; +} \ No newline at end of file diff --git a/app/_common/icons/Icons.tsx b/app/_common/icons/Icons.tsx index ed159d1..9f8743d 100644 --- a/app/_common/icons/Icons.tsx +++ b/app/_common/icons/Icons.tsx @@ -1,3 +1,5 @@ +import { ReactNode } from "react" + export const TrendingIcon:React.FC<{}> = () => { return @@ -32,4 +34,16 @@ export const BlogIcon:React.FC<{}> = () => { return -} \ No newline at end of file +} + + +const iconMap: { [key: string]: ReactNode } = { + TrendingIcon: , + WebsitesIcon: , + TechnologiesIcon: , + CollectionsIcon: , + UIElementsIcon: , + BlogIcon: , +}; + +export default iconMap; \ No newline at end of file diff --git a/app/_components/header/Header.tsx b/app/_components/header/Header.tsx index c4a2b3b..5425bac 100644 --- a/app/_components/header/Header.tsx +++ b/app/_components/header/Header.tsx @@ -21,7 +21,7 @@ const Header:React.FC = ({}) => { } return ( -
+
{/* Hamburger menu */} diff --git a/app/_components/navigationDropdown/NavigationDropdown.tsx b/app/_components/navigationDropdown/NavigationDropdown.tsx index 074c7e8..573cff6 100644 --- a/app/_components/navigationDropdown/NavigationDropdown.tsx +++ b/app/_components/navigationDropdown/NavigationDropdown.tsx @@ -1,75 +1,10 @@ -import { BlogIcon, CollectionsIcon, TechnologiesIcon, TrendingIcon, UIElementsIcon, WebsitesIcon } from "@/app/_common/icons/Icons" +'use client' +import { getNavigationData } from "@/app/_actions/navigation" +import iconMap from "@/app/_common/icons/Icons" +import { NavigationData } from "@/app/_types/navigation.types" import Link from "next/link" -import { useState } from "react" +import { useEffect, useState } from "react" -export const navigationData = [ - { - name: "Trending", - Icon: TrendingIcon, - subLinks: [ - { - name: "Portfolio Websites", - count: 8657 - }, - { - name: "Free Fonts", - count: 288 - }, - { - name: "Animated Websites", - count: 10351 - }, - { - name: "Sites of the Day", - count: 6137 - }, - { - name: "Scrolling", - count: 5135 - }, - { - name: "Portfolio Websites", - count: 5071 - }, - { - name: "One Page Design", - count: 6223 - }, - { - name: "E-commerce layouts", - count: 5583 - }, - { - name: "Architecture Websites", - count: 2383 - }, - { - name: "Photography Websites", - count: 1027 - } - ] - }, - { - name: "Websites", - Icon: WebsitesIcon - }, - { - name: "Technologies", - Icon: TechnologiesIcon - }, - { - name: "Collections", - Icon: CollectionsIcon - }, - { - name: "UI Elements", - Icon: UIElementsIcon - }, - { - name: "Blog", - Icon: BlogIcon - } -] export type NavigationDropdownProps = { display: boolean @@ -77,26 +12,45 @@ export type NavigationDropdownProps = { const NavigationDropdown:React.FC = ({ display }) => { - const [header, setActiveHeader] = useState(navigationData[0].name); + + const [navigationData, setNavigationData] = useState([]); + const [header, setActiveHeader] = useState(""); + // setting the active header const changeActiveHeader = (name: string) => { setActiveHeader(name) } - const activeHeader = navigationData.find((item) => item.name === header) + + // Use effect which runs as soon as the component is mounted + useEffect(() => { + // Navigation action to get the data from the database + getNavigationData().then( response => { + // Setting the response to the state + setNavigationData(response); + if (response.length > 0) { + changeActiveHeader(response[0].name); // Set the first item as the active header + } + }) + }, []) + + // Fetching the active header + const activeHeader = navigationData?.find((item) => item.name === header) return (
-