Skip to content

Commit

Permalink
Develop (#16)
Browse files Browse the repository at this point in the history
* 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 <amith@Amiths-Laptop.local>
  • Loading branch information
IMISSHER99 and Amith authored Jun 8, 2024
1 parent abb327f commit 7dcc92d
Show file tree
Hide file tree
Showing 25 changed files with 5,459 additions and 3,108 deletions.
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
DATABASE_URL="postgres://mrrobot:A!m@12ith@localhost:5432/awwwards"
18 changes: 18 additions & 0 deletions app/_actions/navigation.ts
Original file line number Diff line number Diff line change
@@ -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;
}
16 changes: 15 additions & 1 deletion app/_common/icons/Icons.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { ReactNode } from "react"

export const TrendingIcon:React.FC<{}> = () => {
return <svg width={11} height={15} viewBox="0 0 11 15">
<path d="M3.9929 0.625939C4.13088 0.54352 4.2886 0.5 4.44931 0.5C4.59954 0.5 4.74714 0.538023 4.87845 0.610295C8.87544 2.46727 11.1385 6.32323 10.9988 9.54683L10.9988 9.54716C10.9392 10.902 10.4542 12.1551 9.51453 13.0708C8.57487 13.9865 7.2248 14.5218 5.51533 14.5252C4.82872 14.5675 4.14047 14.4731 3.49048 14.2476C2.83534 14.0202 2.2323 13.6641 1.71685 13.2001C1.20139 12.7362 0.783938 12.1739 0.489046 11.5463C0.194154 10.9186 0.027783 10.2383 -0.000275804 9.54542L-0.000578149 9.53795L-0.000522329 9.53795C-0.0209942 8.73621 0.178555 7.94417 0.57646 7.24784C0.974365 6.55151 1.55542 5.97748 2.25655 5.58808C2.37945 5.51982 2.52542 5.50645 2.65867 5.55126C2.79193 5.59607 2.90017 5.69491 2.95686 5.82356C3.20152 6.37877 3.54425 6.88378 3.96732 7.31498C4.46391 6.66783 4.69233 5.83147 4.68558 4.91261C4.67754 3.81878 4.33395 2.64717 3.75882 1.64956C3.66486 1.49271 3.63053 1.30715 3.66234 1.1269C3.69467 0.943739 3.79303 0.77879 3.93881 0.663287C3.956 0.649664 3.97407 0.637188 3.9929 0.625939ZM4.94165 1.7577C5.40397 2.74496 5.67775 3.84365 5.68555 4.90526C5.69502 6.19406 5.31016 7.46724 4.34414 8.38726C4.15969 8.56293 3.87265 8.57185 3.67764 8.40797C3.12295 7.94184 2.65822 7.38047 2.30441 6.75183C1.95725 7.02235 1.66472 7.35895 1.4447 7.74398C1.13805 8.28062 0.98396 8.89087 0.999059 9.50871C1.02217 10.0671 1.15648 10.6152 1.39413 11.121C1.63231 11.628 1.96949 12.0822 2.38581 12.4569C2.80214 12.8315 3.28921 13.1192 3.81836 13.3028C4.34751 13.4865 4.90805 13.5624 5.46699 13.5262C5.47775 13.5255 5.48853 13.5252 5.49931 13.5252C7.00226 13.5252 8.09169 13.061 8.8166 12.3546C9.54444 11.6453 9.94941 10.6483 9.9998 9.50321C10.1142 6.86049 8.3102 3.53981 4.94165 1.7577ZM7.99932 9.02519C8.27546 9.02519 8.49932 9.24904 8.49932 9.52519C8.49932 10.1882 8.23592 10.8241 7.76708 11.293C7.29824 11.7618 6.66236 12.0252 5.99931 12.0252C5.72317 12.0252 5.49931 11.8013 5.49931 11.5252C5.49931 11.249 5.72317 11.0252 5.99931 11.0252C6.39714 11.0252 6.77867 10.8672 7.05997 10.5858C7.34128 10.3045 7.49931 9.92301 7.49931 9.52519C7.49931 9.24904 7.72317 9.02519 7.99932 9.02519Z"></path>
Expand Down Expand Up @@ -32,4 +34,16 @@ export const BlogIcon:React.FC<{}> = () => {
return <svg width={11} height={15} viewBox="0 0 11 15">
<path d="M13.5 11C13.7761 11 14 11.2239 14 11.5V12.5C14 12.8978 13.842 13.2794 13.5607 13.5607C13.2794 13.842 12.8978 14 12.5 14H11.5C11.2239 14 11 13.7761 11 13.5C11 13.2239 11.2239 13 11.5 13H12.5C12.6326 13 12.7598 12.9473 12.8536 12.8536C12.9473 12.7598 13 12.6326 13 12.5V11.5C13 11.2239 13.2239 11 13.5 11Z M13.5 4C13.7761 4 14 4.22386 14 4.5V8.5C14 8.77614 13.7761 9 13.5 9C13.2239 9 13 8.77614 13 8.5V4.5C13 4.22386 13.2239 4 13.5 4Z M5 13.5C5 13.2239 5.22386 13 5.5 13H8.5C8.77614 13 9 13.2239 9 13.5C9 13.7761 8.77614 14 8.5 14H5.5C5.22386 14 5 13.7761 5 13.5Z M1.5 1C1.36739 1 1.24021 1.05268 1.14645 1.14645C1.05268 1.24021 1 1.36739 1 1.5V12.5C1 12.7761 0.776142 13 0.5 13C0.223858 13 0 12.7761 0 12.5V1.5C0 1.10218 0.158035 0.720644 0.43934 0.43934C0.720644 0.158035 1.10218 0 1.5 0H12.5C12.7761 0 13 0.223858 13 0.5C13 0.776142 12.7761 1 12.5 1H1.5Z"></path>
</svg>
}
}


const iconMap: { [key: string]: ReactNode } = {
TrendingIcon: <TrendingIcon />,
WebsitesIcon: <WebsitesIcon />,
TechnologiesIcon: <TechnologiesIcon />,
CollectionsIcon: <CollectionsIcon />,
UIElementsIcon: <UIElementsIcon />,
BlogIcon: <BlogIcon />,
};

export default iconMap;
2 changes: 1 addition & 1 deletion app/_components/header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Header:React.FC<HeaderProps> = ({}) => {
}

return (
<header className="fixed w-full h-full mt-2">
<header className="fixed w-full h-full md:mt-2">
<div className={`inner rounded-lg h-fit flex flex-col items-center transition ${active ? 'active' : ''}`}>
<div className="flex h-[54px] w-full bg-transparent items-center ps-1.5 pe-1.5 ">
{/* Hamburger menu */}
Expand Down
110 changes: 33 additions & 77 deletions app/_components/navigationDropdown/NavigationDropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,102 +1,56 @@
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
}

const NavigationDropdown:React.FC<NavigationDropdownProps> = ({ display }) => {

const [header, setActiveHeader] = useState<string>(navigationData[0].name);

const [navigationData, setNavigationData] = useState<NavigationData[]>([]);
const [header, setActiveHeader] = useState<string>("");

// 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 (
<div className={`w-full h-full ${display ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
<div className="min-h-[450px] pt-0 pr-[424px] pb-[12px] pl-[57px]">
<nav className="flex justify-between w-full h-full">
<nav className="flex justify-between w-full h-full gap-3">
{/* Navigation Left */}
<ul>
{
navigationData.map(({ name, Icon }, index) => {
// Iteration over the data, displaying the name and icon
navigationData.map(({ name, svgIconName }, index) => {
return (
<li key={index} className={`${index===0 ? '' : 'mt-1'}`} onClick={() => changeActiveHeader(name)}>
<Link href={"/"}>
<Link href={"#"}>
<span className={`flex font-normal items-center gap-3 bg-transparent transparent hover:bg-white h-[40px] min-w-[180px] px-4 rounded-lg ${activeHeader?.name === name ? 'bg-white' : 'bg-transparent'}`}>
<Icon />
{iconMap[svgIconName]}
{ name }
</span>
</Link>
Expand All @@ -105,9 +59,11 @@ const NavigationDropdown:React.FC<NavigationDropdownProps> = ({ display }) => {
})
}
</ul>
{/* Navigation Right */}
<ul className="flex justify-center items-between flex-1 flex-col">
{
activeHeader?.subLinks?.map((item, index) => {
// Displaying the sublinks for the active header
activeHeader?.sublinks?.map((item, index) => {
return (
<li key={index}>
<span className="flex items-center justify-between gap-3 bg-transparent transparent hover:bg-white h-[40px] min-w-[180px] px-4 rounded-lg">
Expand Down
8 changes: 8 additions & 0 deletions app/_drizzle/connection.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import 'dotenv/config'
import { drizzle } from "drizzle-orm/postgres-js";
import * as schema from './schema'
import postgres from "postgres";

const client = postgres("postgres://mrrobot:A!m@12ith@localhost:5432/awwwards")

export const db = drizzle(client, { schema, logger: true})
18 changes: 18 additions & 0 deletions app/_drizzle/migrationSetup.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import "dotenv/config"
import { drizzle } from "drizzle-orm/postgres-js";
import { migrate } from "drizzle-orm/postgres-js/migrator";
import postgres from "postgres";

const migrationClient = postgres(process.env.DATABASE_URL as string, { max: 1 })

const dbConfig = async () => {

await migrate(drizzle(migrationClient), {
migrationsFolder: 'app/_drizzle/migrations'
})

await migrationClient.end()

}

dbConfig()
28 changes: 28 additions & 0 deletions app/_drizzle/migrations/0000_eminent_unicorn.sql
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
CREATE SCHEMA "awwwards_dev";
--> statement-breakpoint
CREATE TABLE IF NOT EXISTS "awwwards_dev"."links" (
"id" serial PRIMARY KEY NOT NULL,
"name" varchar NOT NULL,
"routeTo" varchar NOT NULL,
"description" text,
"created_at" timestamp (6) with time zone DEFAULT now(),
"updated_at" timestamp (6) with time zone DEFAULT now(),
"svg_icon_name" varchar NOT NULL,
CONSTRAINT "links_name_unique" UNIQUE("name")
);
--> statement-breakpoint
CREATE TABLE IF NOT EXISTS "awwwards_dev"."sublins" (
"id" serial PRIMARY KEY NOT NULL,
"name" varchar NOT NULL,
"count" integer NOT NULL,
"link_id" integer NOT NULL,
"created_at" timestamp (6) with time zone DEFAULT now(),
"updated_at" timestamp (6) with time zone DEFAULT now(),
CONSTRAINT "sublins_name_unique" UNIQUE("name")
);
--> statement-breakpoint
DO $$ BEGIN
ALTER TABLE "awwwards_dev"."sublins" ADD CONSTRAINT "sublins_link_id_links_id_fk" FOREIGN KEY ("link_id") REFERENCES "awwwards_dev"."links"("id") ON DELETE cascade ON UPDATE no action;
EXCEPTION
WHEN duplicate_object THEN null;
END $$;
2 changes: 2 additions & 0 deletions app/_drizzle/migrations/0001_gorgeous_onslaught.sql
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
ALTER TABLE "awwwards_dev"."links" ADD COLUMN "route_to" varchar NOT NULL;--> statement-breakpoint
ALTER TABLE "awwwards_dev"."links" DROP COLUMN IF EXISTS "routeTo";
16 changes: 16 additions & 0 deletions app/_drizzle/migrations/0002_premium_jazinda.sql
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
CREATE TABLE IF NOT EXISTS "awwwards_dev"."sublinks" (
"id" serial PRIMARY KEY NOT NULL,
"name" varchar NOT NULL,
"count" integer NOT NULL,
"link_id" integer NOT NULL,
"created_at" timestamp (6) with time zone DEFAULT now(),
"updated_at" timestamp (6) with time zone DEFAULT now(),
CONSTRAINT "sublinks_name_unique" UNIQUE("name")
);
--> statement-breakpoint
DROP TABLE "awwwards_dev"."sublins";--> statement-breakpoint
DO $$ BEGIN
ALTER TABLE "awwwards_dev"."sublinks" ADD CONSTRAINT "sublinks_link_id_links_id_fk" FOREIGN KEY ("link_id") REFERENCES "awwwards_dev"."links"("id") ON DELETE cascade ON UPDATE no action;
EXCEPTION
WHEN duplicate_object THEN null;
END $$;
1 change: 1 addition & 0 deletions app/_drizzle/migrations/0003_tiresome_multiple_man.sql
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
ALTER TABLE "awwwards_dev"."sublinks" DROP CONSTRAINT "sublinks_name_unique";
1 change: 1 addition & 0 deletions app/_drizzle/migrations/0004_rainy_omega_red.sql
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
ALTER TABLE "awwwards_dev"."sublinks" ADD CONSTRAINT "sublinks_name_unique" UNIQUE("name");
Loading

0 comments on commit 7dcc92d

Please sign in to comment.