Did lots of cleaning and polishing
This commit is contained in:
parent
dfd0979547
commit
668b8729a8
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
import Image from 'next/image';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const ContactUs = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
@ -9,11 +9,11 @@ const ContactUs = () => {
|
||||
message: "",
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
const handleChange = (e: { target: { name: any; value: any } }) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
const handleSubmit = (e: { preventDefault: () => void }) => {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted with data:", formData);
|
||||
alert("Thank you for reaching out! We will get back to you soon.");
|
||||
@ -21,16 +21,22 @@ const ContactUs = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen relative text-white py-10 border border-black">
|
||||
<Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg" />
|
||||
<div className="h-full relative text-white border border-black overflow-hidden">
|
||||
<Image
|
||||
height={5000}
|
||||
width={5000}
|
||||
alt="Logo"
|
||||
className="border border-neutral-300 absolute z-10 -top-20"
|
||||
src="/tsunamiWaves.jpg"
|
||||
/>
|
||||
|
||||
{/* Overlay for readability */}
|
||||
<div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20">
|
||||
<div className="absolute overflow-hidden w-full h-full bg-gradient-to-b from-black/70 via-black/40 to-transparent flex flex-col items-center z-20">
|
||||
{/* Container */}
|
||||
<div className="max-w-4xl mx-auto p-5">
|
||||
<div className="max-w-4xl mx-auto p-5 mt-20">
|
||||
{/* Header */}
|
||||
<h1 className="text-4xl font-bold text-center text-white mb-6">Contact Us</h1>
|
||||
<p className="text-lg text-center text-neutral-300 mb-6">
|
||||
<p className="text-lg text-center text-neutral-200 mb-6">
|
||||
Have questions or concerns about earthquake preparedness? Contact us using the form below or through the provided
|
||||
contact details.
|
||||
</p>
|
||||
@ -81,10 +87,11 @@ const ContactUs = () => {
|
||||
id="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
rows="5"
|
||||
rows={5}
|
||||
placeholder="Your Message"
|
||||
className="w-full p-3 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
style={{ resize: "none" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -98,11 +105,13 @@ const ContactUs = () => {
|
||||
</div>
|
||||
|
||||
{/* Contact Details Section */}
|
||||
<div className="flex-1 bg-white bg-opacity-90 text-neutral-800 rounded-lg shadow-lg p-6">
|
||||
<div className="w-[45%] bg-white bg-opacity-90 text-neutral-800 rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-xl font-bold text-neutral-800 mb-4">Get in Touch</h2>
|
||||
<div className="mb-4">
|
||||
<h3 className="text-neutral-700 font-medium">Email</h3>
|
||||
<p className="text-neutral-600">getintouch@tremortracker.org.uk</p>
|
||||
<a href="mailto:getintouch@tremortracker.com" style={{ color: "initial" }}>
|
||||
getintouch@tremortracker.com
|
||||
</a>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<h3 className="text-neutral-700 font-medium">Phone</h3>
|
||||
@ -130,9 +139,6 @@ const ContactUs = () => {
|
||||
<span className="sr-only">LinkedIn</span>
|
||||
<Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png" />
|
||||
</a>
|
||||
<h3 className="text-l font-bold text-gray-500 mb-2 mt-4">
|
||||
@tremor.tracker
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
import Image from 'next/image';
|
||||
import { Dispatch, SetStateAction, useCallback, useState } from 'react';
|
||||
|
||||
import Artifact from '@appTypes/Artifact';
|
||||
@ -13,7 +14,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Golden Scarab",
|
||||
description: "An ancient Egyptian artifact symbolizing rebirth.",
|
||||
location: "Cairo, Egypt",
|
||||
image: "/images/artifact1.jpg",
|
||||
image: "/artifact1.jpg",
|
||||
price: 150,
|
||||
},
|
||||
{
|
||||
@ -21,7 +22,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Aztec Sunstone",
|
||||
description: "A replica of the Aztec calendar (inscriptions intact).",
|
||||
location: "Peru",
|
||||
image: "/images/artifact2.jpg",
|
||||
image: "/artifact2.jpg",
|
||||
price: 200,
|
||||
},
|
||||
{
|
||||
@ -29,7 +30,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Medieval Chalice",
|
||||
description: "Used by royalty in medieval ceremonies.",
|
||||
location: "Cambridge, England",
|
||||
image: "/images/artifact3.jpg",
|
||||
image: "/artifact3.jpg",
|
||||
price: 120,
|
||||
},
|
||||
{
|
||||
@ -37,7 +38,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Roman Coin",
|
||||
description: "An authentic Roman coin from the 2nd century CE.",
|
||||
location: "Rome, Italy",
|
||||
image: "/images/artifact4.jpg",
|
||||
image: "/artifact4.jpg",
|
||||
price: 80,
|
||||
},
|
||||
{
|
||||
@ -45,7 +46,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Samurai Mask",
|
||||
description: "Replica of Japanese Samurai battle masks.",
|
||||
location: "Tokyo, Japan",
|
||||
image: "/images/artifact5.jpg",
|
||||
image: "/artifact5.jpg",
|
||||
price: 300,
|
||||
},
|
||||
{
|
||||
@ -53,7 +54,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Ancient Greek Vase",
|
||||
description: "Depicts Greek mythology, found in the Acropolis.",
|
||||
location: "Athens, Greece",
|
||||
image: "/images/artifact6.jpg",
|
||||
image: "/artifact6.jpg",
|
||||
price: 250,
|
||||
},
|
||||
{
|
||||
@ -61,7 +62,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Incan Pendant",
|
||||
description: "Represents the Sun God Inti.",
|
||||
location: "India",
|
||||
image: "/images/artifact7.jpg",
|
||||
image: "/artifact7.jpg",
|
||||
price: 175,
|
||||
},
|
||||
{
|
||||
@ -69,7 +70,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Persian Carpet Fragment",
|
||||
description: "Ancient Persian artistry.",
|
||||
location: "Petra, Jordan",
|
||||
image: "/images/artifact8.jpg",
|
||||
image: "/artifact8.jpg",
|
||||
price: 400,
|
||||
},
|
||||
{
|
||||
@ -77,7 +78,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Stone Buddha",
|
||||
description: "Authentic stone Buddha carving.",
|
||||
location: "India",
|
||||
image: "/images/artifact9.jpg",
|
||||
image: "/artifact9.jpg",
|
||||
price: 220,
|
||||
},
|
||||
{
|
||||
@ -85,7 +86,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Victorian Brooch",
|
||||
description: "A beautiful Victorian-era brooch with a ruby centre.",
|
||||
location: "Oxford, England",
|
||||
image: "/images/artifact10.jpg",
|
||||
image: "/artifact10.jpg",
|
||||
price: 150,
|
||||
},
|
||||
{
|
||||
@ -93,7 +94,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Ancient Scroll",
|
||||
description: "A mysterious scroll from ancient times.",
|
||||
location: "Madrid, Spain",
|
||||
image: "/images/artifact11.jpg",
|
||||
image: "/artifact11.jpg",
|
||||
price: 500,
|
||||
},
|
||||
{
|
||||
@ -101,7 +102,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Ming Dynasty Porcelain",
|
||||
description: "Porcelain from China's Ming Dynasty.",
|
||||
location: "Beijing, China",
|
||||
image: "/images/artifact12.jpg",
|
||||
image: "/artifact12.jpg",
|
||||
price: 300,
|
||||
},
|
||||
{
|
||||
@ -109,7 +110,7 @@ const artifacts: Artifact[] = [
|
||||
name: "African Tribal Mask",
|
||||
description: "A unique tribal mask from Africa.",
|
||||
location: "Nigeria",
|
||||
image: "/images/artifact13.jpg",
|
||||
image: "/artifact13.jpg",
|
||||
price: 250,
|
||||
},
|
||||
{
|
||||
@ -117,7 +118,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Crystal Skull",
|
||||
description: "A mystical pre-Columbian artifact.",
|
||||
location: "Colombia",
|
||||
image: "/images/artifact14.jpg",
|
||||
image: "/artifact14.jpg",
|
||||
price: 1000,
|
||||
},
|
||||
{
|
||||
@ -125,7 +126,7 @@ const artifacts: Artifact[] = [
|
||||
name: "Medieval Armor Fragment",
|
||||
description: "A fragment of medieval armor.",
|
||||
location: "Normandy, France",
|
||||
image: "/images/artifact15.jpg",
|
||||
image: "/artifact15.jpg",
|
||||
price: 400,
|
||||
},
|
||||
];
|
||||
@ -171,31 +172,29 @@ export default function Shop() {
|
||||
className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<div className="bg-white rounded-md shadow-lg max-w-lg w-full p-6">
|
||||
<h3 className="text-xl font-bold mb-4">{artifact.name}</h3>
|
||||
<img src={artifact.image} alt={artifact.name} className="w-full h-64 object-cover rounded-md mb-4" />
|
||||
<p className="text-neutral-600 mb-2">{artifact.description}</p>
|
||||
<p className="text-neutral-500 font-bold mb-4">Location: {artifact.location}</p>
|
||||
<p className="text-red-600 font-bold">Price: ${artifact.price}</p>
|
||||
<div className="flex justify-end gap-4 mt-6">
|
||||
<button
|
||||
onClick={() => alert("Reserved Successfully!")}
|
||||
className="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-400"
|
||||
>
|
||||
Reserve
|
||||
</button>
|
||||
<div className="bg-white rounded-xl shadow-2xl max-w-lg w-full p-6">
|
||||
<h3 className="text-2xl font-bold mb-4">{artifact.name}</h3>
|
||||
<Image
|
||||
height={5000}
|
||||
width={5000}
|
||||
src={artifact.image}
|
||||
alt={artifact.name}
|
||||
className="w-full h-64 object-cover rounded-md"
|
||||
></Image>
|
||||
<p className="text-xl font-bold">
|
||||
{currencyTickers[selectedCurrency]}
|
||||
{convertPrice(artifact.price, selectedCurrency)}
|
||||
</p>
|
||||
<p className="text-neutral-600 mt-2">{artifact.description}</p>
|
||||
<p className="text-neutral-500 font-bold mt-1">Location: {artifact.location}</p>
|
||||
|
||||
<div className="flex justify-end gap-4 mt-4 mr-2">
|
||||
<button
|
||||
onClick={() => alert("Purchased Successfully!")}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-500"
|
||||
className="px-10 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
||||
>
|
||||
Buy
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedArtifact(null)}
|
||||
className="px-4 py-2 bg-neutral-300 rounded-md hover:bg-neutral-400"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -211,10 +210,9 @@ export default function Shop() {
|
||||
>
|
||||
<img src={artifact.image} alt={artifact.name} className="w-full h-56 object-cover" />
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-bold">{artifact.name}</h3>
|
||||
<p className="text-neutral-700 mb-2">{artifact.description}</p>
|
||||
<h3 className="text-lg font-semibold">{artifact.name}</h3>
|
||||
<p className="text-neutral-500 mb-2">{artifact.location}</p>
|
||||
<p className="text-blue-600 font-bold text-md mt-4">
|
||||
<p className="text-black font-bold text-md mt-2">
|
||||
{currencyTickers[selectedCurrency]}
|
||||
{convertPrice(artifact.price, selectedCurrency)}
|
||||
</p>
|
||||
@ -234,6 +232,7 @@ export default function Shop() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="bg-white shadow-lg h-screen fixed right-0 overflow-y-auto">
|
||||
<Sidebar
|
||||
@ -255,16 +254,17 @@ export default function Shop() {
|
||||
</div>
|
||||
|
||||
{/* Pagination Footer */}
|
||||
<footer className="bg-white border-t border-neutral-300 py-2 text-center flex justify-center items-center mr-[19rem]">
|
||||
<footer className="mt-10 bg-white border-t border-neutral-300 py-3 text-center flex justify-center items-center mr-[19rem]">
|
||||
<button
|
||||
onClick={handlePreviousPage}
|
||||
disabled={currentPage === 1}
|
||||
className={`mx-2 px-4 py-1 bg-blue-700 text-white rounded-md font-bold shadow-md ${
|
||||
className={`mx-2 px-4 py-1 bg-blue-500 text-white rounded-md font-bold shadow-md ${
|
||||
currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
|
||||
}`}
|
||||
>
|
||||
← Previous
|
||||
</button>
|
||||
<p className="mx-3 text-lg font-bold">{currentPage}</p>
|
||||
<button
|
||||
onClick={handleNextPage}
|
||||
disabled={indexOfLastArtifact >= artifacts.length}
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
/* Container styling */
|
||||
.container {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
/* Header styling */
|
||||
.header {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
font-size: 1.2rem;
|
||||
color: #555;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Team styling */
|
||||
.team {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center; /* Centers team member cards */
|
||||
}
|
||||
|
||||
/* Individual team member card styling */
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
width: 90%; /* Width relative to the viewport */
|
||||
max-width: 800px; /* Prevent it from getting too large */
|
||||
padding: 15px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Team member image styling */
|
||||
.image {
|
||||
width: 110px; /* Both width and height are equal */
|
||||
height: 110px;
|
||||
border-radius: 50%; /* Makes the image circular */
|
||||
object-fit: cover; /* Ensures the image fits perfectly without distortion */
|
||||
}
|
||||
|
||||
/* Card text styling */
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
color: #555;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
color: #777;
|
||||
}
|
||||
@ -1,50 +1,68 @@
|
||||
"use client"; // Required for components in Next.js (using client-side rendering)
|
||||
import styles from './page.module.css';
|
||||
import Image from 'next/image';
|
||||
|
||||
const teamMembers = [
|
||||
{ name: "Tim Howitz",
|
||||
title: "Chief Crack Inspector",
|
||||
description: "Tim is responsible for analysing structures on a day to day basis, in his home life he is a keen outdoors enthusiast, with 3 kids and a dog.",
|
||||
image: "/Timthescientist.PNG" },
|
||||
{ name: "Emily Neighbour",
|
||||
title: "Chief Software Engineer",
|
||||
description: "Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching and becoming a mute",
|
||||
image: "/Emilythescientist.PNG" },
|
||||
{ name: "Izzy Patterson",
|
||||
title: "Chief Geologist",
|
||||
description: "Izzy team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them",
|
||||
image: "/Izzythescientist.PNG" },
|
||||
{ name: "Lukeshan Thananchayan",
|
||||
title: "Chief Duster",
|
||||
description: "Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure - he likes to play monopoly, on repeat... maybe one day hell get a hotel",
|
||||
image: "/Lukeshanthescientist.PNG" },
|
||||
{
|
||||
name: "Tim Howitz",
|
||||
title: "Chief Crack Inspector",
|
||||
description:
|
||||
"Tim is responsible for analysing structures on a day to day basis, in his home life he is a keen outdoors enthusiast, with 3 kids and a dog.",
|
||||
image: "/Timthescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Emily Neighbour",
|
||||
title: "Chief Software Engineer",
|
||||
description:
|
||||
"Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching and becoming a mute",
|
||||
image: "/Emilythescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Izzy Patterson",
|
||||
title: "Chief Geologist",
|
||||
description:
|
||||
"Izzy team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them",
|
||||
image: "/Izzythescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Lukeshan Thananchayan",
|
||||
title: "Chief Duster",
|
||||
description:
|
||||
"Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure - he likes to play monopoly, on repeat... maybe one day hell get a hotel",
|
||||
image: "/Lukeshanthescientist.PNG",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{/* Header */}
|
||||
<h1 className={styles.header}>Meet The Team</h1>
|
||||
<p className={styles.subheader}>
|
||||
Our expert team is made up of scientists around the globe. Our heads of department are shown below.
|
||||
</p>
|
||||
return (
|
||||
<div className="h-full text-center bg-gradient-to-b from-neutral-100 to-neutral-50 pt-10">
|
||||
{/* Header */}
|
||||
<h1 className="text-4xl font-bold mb-5">Meet The Team</h1>
|
||||
<p className="text-lg text-neutral-600 mb-5">
|
||||
Our expert team is made up of scientists around the globe. Our heads of department are shown below.
|
||||
</p>
|
||||
|
||||
{/* Team Members Section */}
|
||||
<div className={styles.team}>
|
||||
{teamMembers.map((member, index) => (
|
||||
<div key={index} className={styles.card}>
|
||||
{/* Image */}
|
||||
<img src={member.image} alt={member.name} className={styles.image} />
|
||||
|
||||
{/* Text Content */}
|
||||
<div className={styles.text}>
|
||||
<h2 className={styles.name}>{member.name}</h2>
|
||||
<p className={styles.title}>{member.title}</p>
|
||||
<p className={styles.description}>{member.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{/* Team Members Section */}
|
||||
<div className="flex flex-col items-center gap-8">
|
||||
{teamMembers.map((member, index) => (
|
||||
<div key={index} className="flex bg-white align-middle rounded-2xl border border-neutral-300 w-1/2 shadow-sm">
|
||||
{/* Image */}
|
||||
<div className="flex items-center ml-4">
|
||||
<div className="relative w-24 h-24">
|
||||
<div className="absolute inset-0 rounded-full overflow-hidden">
|
||||
<Image height={5000} width={5000} src={member.image} alt={member.name} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Text Content */}
|
||||
<div className="flex flex-col items-start pl-6 py-4">
|
||||
<h2 className="text-2xl font-bold">{member.name}</h2>
|
||||
<p className="text-md text-neutral-600 font-bold">{member.title}</p>
|
||||
<p className="text-neutral-600 mt-2 text-left">{member.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,59 +1,13 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Dispatch, SetStateAction, useMemo, useState } from "react";
|
||||
import { FaRegUserCircle } from "react-icons/fa";
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Dispatch, SetStateAction, useMemo, useState } from 'react';
|
||||
import { FaRegUserCircle } from 'react-icons/fa';
|
||||
|
||||
import { Currency } from "@appTypes/StoreModel";
|
||||
import AuthModal from "@components/AuthModal";
|
||||
import { useStoreActions, useStoreState } from "@hooks/store";
|
||||
|
||||
function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
|
||||
const pathname = usePathname();
|
||||
const isActive = dropdownItems
|
||||
? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
|
||||
: pathname === href;
|
||||
|
||||
return (
|
||||
<button className="flex items-center justify-center px-2 py-4 relative group">
|
||||
{dropdownItems ? (
|
||||
<span
|
||||
className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
) : (
|
||||
<Link
|
||||
href={href}
|
||||
className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
)}
|
||||
{dropdownItems && (
|
||||
<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
|
||||
<ul>
|
||||
{dropdownItems.map((item) => {
|
||||
const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
|
||||
const isDropdownActive = pathname === itemHref;
|
||||
return (
|
||||
<li key={item}>
|
||||
<Link
|
||||
href={itemHref}
|
||||
className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
import { Currency } from '@appTypes/StoreModel';
|
||||
import AuthModal from '@components/AuthModal';
|
||||
import { useStoreActions, useStoreState } from '@hooks/store';
|
||||
|
||||
export default function Navbar({}: // currencySelector,
|
||||
{
|
||||
@ -74,6 +28,51 @@ export default function Navbar({}: // currencySelector,
|
||||
const currencies = useStoreState((state) => state.currency.currencies);
|
||||
const currencyTickers = useStoreState((state) => state.currency.tickers);
|
||||
|
||||
function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
|
||||
const isActive = dropdownItems
|
||||
? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
|
||||
: pathname === href;
|
||||
|
||||
return (
|
||||
<button className="flex items-center justify-center px-2 py-4 relative group">
|
||||
{dropdownItems ? (
|
||||
<span
|
||||
className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
) : (
|
||||
<Link
|
||||
href={href}
|
||||
className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
)}
|
||||
{dropdownItems && (
|
||||
<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
|
||||
<ul>
|
||||
{dropdownItems.map((item) => {
|
||||
const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
|
||||
const isDropdownActive = pathname === itemHref;
|
||||
return (
|
||||
<li key={item}>
|
||||
<Link
|
||||
href={itemHref}
|
||||
className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200">
|
||||
<div className="my-1 flex aspect-square ml-3 mr-3">
|
||||
@ -99,7 +98,9 @@ export default function Navbar({}: // currencySelector,
|
||||
let ticker = currencyTickers[item];
|
||||
return (
|
||||
<li key={item} onClick={() => setSelectedCurrency(item)}>
|
||||
<div className={`block px-2 py-2 hover:bg-neutral-100 text-md`}>{`${item} (${ticker})`}</div>
|
||||
<div className={`block px-2 py-2 hover:bg-neutral-100 text-md`}>
|
||||
{item} ({ticker})
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user