From fc5f5836b291bb57d82e7273dab1e3041cc15488 Mon Sep 17 00:00:00 2001 From: Ru Chern Chong Date: Sat, 30 Nov 2024 22:14:47 +0800 Subject: [PATCH] Refactor and clean up components --- app/components/Footer.tsx | 172 ------------------ app/components/Header.tsx | 10 -- app/components/NavMenu.tsx | 242 +++++++++++++------------- app/maintenance/components/Footer.tsx | 96 ++++++++++ app/maintenance/components/Header.tsx | 14 ++ app/maintenance/layout.tsx | 10 ++ app/maintenance/page.tsx | 43 ++++- components/BrandLogo.tsx | 6 +- components/Maintenance.tsx | 46 ----- package.json | 1 + pnpm-lock.yaml | 12 ++ 11 files changed, 297 insertions(+), 355 deletions(-) delete mode 100644 app/components/Footer.tsx delete mode 100644 app/components/Header.tsx create mode 100644 app/maintenance/components/Footer.tsx create mode 100644 app/maintenance/components/Header.tsx delete mode 100644 components/Maintenance.tsx diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx deleted file mode 100644 index f72a110..0000000 --- a/app/components/Footer.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import type { ElementType } from "react"; -import Link from "next/link"; -import { Facebook, Github, Instagram, Linkedin, Twitter } from "lucide-react"; -import { BrandLogo } from "@/components/BrandLogo"; -import { ComingSoon } from "@/components/ComingSoon"; -import { Separator } from "@/components/ui/separator"; -import { COE_LINKS, FUEL_TYPE_LINKS, VEHICLE_TYPE_LINKS } from "@/config"; -import type { LinkItem } from "@/types"; - -interface FooterLink { - title: string; - links: LinkItem[]; -} - -interface SocialMediaLink { - name: string; - url: string; - icon: ElementType; -} - -const socialMediaLinks: SocialMediaLink[] = [ - { - name: "Facebook", - url: "https://facebook.com/sgcarstrends", - icon: Facebook, - }, - { - name: "Twitter", - url: "https://twitter.com/sgcarstrends", - icon: Twitter, - }, - { - name: "Instagram", - url: "https://instagram.com/sgcarstrends", - icon: Instagram, - }, - { - name: "LinkedIn", - url: "https://linkedin.com/company/sgcarstrends", - icon: Linkedin, - }, - { - name: "GitHub", - url: "https://github.com/sgcarstrends", - icon: Github, - }, - // { - // name: "Threads", - // url: "https://threads.net/sgcarstrends", - // icon: Threads, - // }, -]; - -const FooterSection = ({ title, links }: FooterLink) => ( -
-

{title}

- -
-); - -export const Footer = () => { - const currentYear = new Date().getFullYear(); - - const sortByName = (a: SocialMediaLink, b: SocialMediaLink) => - a.name.localeCompare(b.name); - - return ( - - ); -}; - -const footerLinks: FooterLink[] = [ - // { - // title: "Monthly", - // links: [ - // { label: "Cars", href: "/cars" }, - // { label: "COE", href: "/coe" }, - // ], - // }, - { - title: "Fuel Types", - links: FUEL_TYPE_LINKS, - }, - { title: "Vehicle Types", links: VEHICLE_TYPE_LINKS }, - { - title: "COE", - links: COE_LINKS, - }, - // TODO: Coming Soon! - // { - // title: "Resources", - // links: [ - // { href: "/about", label: "About" }, - // { href: "/contact", label: "Contact" }, - // ], - // }, -]; diff --git a/app/components/Header.tsx b/app/components/Header.tsx deleted file mode 100644 index e40a0f3..0000000 --- a/app/components/Header.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { DesktopNavMenu, MobileNavMenu } from "@/app/components/NavMenu"; - -export const Header = () => { - return ( -
- - -
- ); -}; diff --git a/app/components/NavMenu.tsx b/app/components/NavMenu.tsx index ebceda2..66f4cc9 100644 --- a/app/components/NavMenu.tsx +++ b/app/components/NavMenu.tsx @@ -104,137 +104,135 @@ export const NavMenu = () => ( ); export const DesktopNavMenu = () => ( -
- - -
-
- -
- -
-
-
- -
+ ); export const MobileNavMenu = () => { const [isOpen, setIsOpen] = useState(false); return ( -
+
- - - - - - setIsOpen(false)} - > - - - -
- -
- - -
- - - - Cars - COE - - - - setIsOpen(false)}> - - Monthly - - - - - Fuel Type - -
- {FUEL_TYPE_LINKS.map( - ({ label, description, href, icon: Icon }) => ( - setIsOpen(false)} - > -
- {Icon && } -
{label}
-
- - {description} - - - ), - )} -
- - - - Vehicle Type - -
- {VEHICLE_TYPE_LINKS.map(({ label, href }) => ( - setIsOpen(false)} - > - {label} - - ))} -
- - - - - - - - COE - - setIsOpen(false)}> - Dashboard - - - - - - - -
- - - + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* setIsOpen(false)}*/} + {/* >*/} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/* */} + {/*
*/} + {/* */} + {/* */} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* Cars*/} + {/* COE*/} + {/* */} + {/* */} + {/* */} + {/* setIsOpen(false)}>*/} + {/* */} + {/* Monthly */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* Fuel Type*/} + {/* */} + {/*
*/} + {/* {FUEL_TYPE_LINKS.map(*/} + {/* ({ label, description, href, icon: Icon }) => (*/} + {/* setIsOpen(false)}*/} + {/* >*/} + {/*
*/} + {/* {Icon && }*/} + {/*
{label}
*/} + {/*
*/} + {/* */} + {/* {description}*/} + {/* */} + {/* */} + {/* ),*/} + {/* )}*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* Vehicle Type*/} + {/* */} + {/*
*/} + {/* {VEHICLE_TYPE_LINKS.map(({ label, href }) => (*/} + {/* setIsOpen(false)}*/} + {/* >*/} + {/* {label}*/} + {/* */} + {/* ))}*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* COE*/} + {/* */} + {/* setIsOpen(false)}>*/} + {/* Dashboard*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/* */} + {/* */} + {/**/}
); }; diff --git a/app/maintenance/components/Footer.tsx b/app/maintenance/components/Footer.tsx new file mode 100644 index 0000000..15997b2 --- /dev/null +++ b/app/maintenance/components/Footer.tsx @@ -0,0 +1,96 @@ +import { + type IconType, + SiBluesky, + SiFacebook, + SiGithub, + SiInstagram, + SiLinkedin, + SiThreads, + SiX, +} from "@icons-pack/react-simple-icons"; +import { Separator } from "@/components/ui/separator"; + +interface SocialMediaLink { + name: string; + url: string; + icon: IconType; +} + +const socialMediaLinks: SocialMediaLink[] = [ + { + name: "Facebook", + url: "https://facebook.com/sgcarstrends", + icon: SiFacebook, + }, + { + name: "Twitter", + url: "https://twitter.com/sgcarstrends", + icon: SiX, + }, + { + name: "Instagram", + url: "https://instagram.com/sgcarstrends", + icon: SiInstagram, + }, + { + name: "LinkedIn", + url: "https://linkedin.com/company/sgcarstrends", + icon: SiLinkedin, + }, + { + name: "GitHub", + url: "https://github.com/sgcarstrends", + icon: SiGithub, + }, + { + name: "Threads", + url: "https://threads.net/sgcarstrends", + icon: SiThreads, + }, + { + name: "Bluesky", + url: "https://bsky.app/profile/sgcarstrends.com", + icon: SiBluesky, + }, +].toSorted((a, b) => a.name.localeCompare(b.name)); + +export const Footer = () => { + const currentYear = new Date().getFullYear(); + + return ( +
+
+
Follow Us
+
+ {socialMediaLinks.map(({ name, url, icon: Icon }) => ( + + + + ))} +
+
+ +
+
+ Data provided by{" "} + + Land Transport Datamall + +
+
© {currentYear}. All Rights Reserved.
+
+
+ ); +}; diff --git a/app/maintenance/components/Header.tsx b/app/maintenance/components/Header.tsx new file mode 100644 index 0000000..8bf2fe2 --- /dev/null +++ b/app/maintenance/components/Header.tsx @@ -0,0 +1,14 @@ +import Link from "next/link"; +import { BrandLogo } from "@/components/BrandLogo"; + +export const Header = () => { + return ( +
+ +
+ ); +}; diff --git a/app/maintenance/layout.tsx b/app/maintenance/layout.tsx index c7d11f3..d16292e 100644 --- a/app/maintenance/layout.tsx +++ b/app/maintenance/layout.tsx @@ -1,10 +1,20 @@ import type { ReactNode } from "react"; import { Inter } from "next/font/google"; import classNames from "classnames"; +import type { Metadata } from "next"; import "../globals.css"; const inter = Inter({ subsets: ["latin"] }); +export const metadata: Metadata = { + title: "Site Maintenance", + description: "Site is currently under maintenance", + robots: { + index: false, + follow: false, + }, +}; + const layout = ({ children }: { children: ReactNode }) => { return ( diff --git a/app/maintenance/page.tsx b/app/maintenance/page.tsx index 1ca0145..7ec23fc 100644 --- a/app/maintenance/page.tsx +++ b/app/maintenance/page.tsx @@ -2,7 +2,9 @@ import { useEffect } from "react"; import { useRouter, useSearchParams } from "next/navigation"; -import { Maintenance } from "@/components/Maintenance"; +import { AlertTriangle, Clock } from "lucide-react"; +import { Footer } from "@/app/maintenance/components/Footer"; +import { Header } from "@/app/maintenance/components/Header"; const MaintenancePage = () => { const router = useRouter(); @@ -34,7 +36,44 @@ const MaintenancePage = () => { return () => clearInterval(interval); }, [router, searchParams]); - return ; + return ( +
+
+
+
+
+ +
+

+ System Maintenance +

+
+

+ We are currently performing scheduled maintenance to improve your + experience. Our services will be back online shortly. +

+
+ + Estimated downtime: 2 hours +
+
+
+

+ For urgent inquiries, please contact our support team at: +
+ + support@sgcarstrends.com + +

+
+
+
+
+
+ ); }; export default MaintenancePage; diff --git a/components/BrandLogo.tsx b/components/BrandLogo.tsx index 656405d..572e036 100644 --- a/components/BrandLogo.tsx +++ b/components/BrandLogo.tsx @@ -1,9 +1,9 @@ import { TrendingUp } from "lucide-react"; export const BrandLogo = () => ( -
- - +
+ + SGCars Trends diff --git a/components/Maintenance.tsx b/components/Maintenance.tsx deleted file mode 100644 index f374730..0000000 --- a/components/Maintenance.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { AlertTriangle, Clock } from "lucide-react"; -import { Header } from "@/app/components/Header"; -import { SITE_TITLE } from "@/config"; - -export const Maintenance = () => ( -
-
-
-
-
- -
-

- System Maintenance -

-
-

- We are currently performing scheduled maintenance to improve your - experience. Our services will be back online shortly. -

-
- - Estimated downtime: 2 hours -
-
-
-

- For urgent inquiries, please contact our support team at: -
- - support@sgcarstrends.com - -

-
-
-
- -
-); diff --git a/package.json b/package.json index 50cf455..4f6cf76 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@heroicons/react": "^2.1.1", + "@icons-pack/react-simple-icons": "^10.2.0", "@mdi/js": "^7.3.67", "@mdi/react": "^1.6.1", "@neondatabase/serverless": "^0.9.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f5764d2..423f9fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@heroicons/react': specifier: ^2.1.1 version: 2.1.1(react@19.0.0-rc.1) + '@icons-pack/react-simple-icons': + specifier: ^10.2.0 + version: 10.2.0(react@19.0.0-rc.1) '@mdi/js': specifier: ^7.3.67 version: 7.4.47 @@ -1198,6 +1201,11 @@ packages: '@vue/compiler-sfc': optional: true + '@icons-pack/react-simple-icons@10.2.0': + resolution: {integrity: sha512-QDUxup8D3GdIIzwGpxQs6bjeFV5mJes25qqf4aqP/PaBYQNCar7AiyD8C14636TosCG0A/QqAUwm/Hviep4d4g==} + peerDependencies: + react: ^16.13 || ^17 || ^18 || ^19 + '@img/sharp-darwin-arm64@0.33.5': resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} @@ -6215,6 +6223,10 @@ snapshots: - supports-color optional: true + '@icons-pack/react-simple-icons@10.2.0(react@19.0.0-rc.1)': + dependencies: + react: 19.0.0-rc.1 + '@img/sharp-darwin-arm64@0.33.5': optionalDependencies: '@img/sharp-libvips-darwin-arm64': 1.0.4