From 43fcd97535295b5d47b0a997aff03638e6221cba Mon Sep 17 00:00:00 2001
From: "Yeyang (Justin) Sun" <i@jsun.lol>
Date: Wed, 24 Jan 2024 23:08:45 +1030
Subject: [PATCH] refactor: Rename all images to dash-case (#39)

* refactor: rename all images to dash-case

* refactor: add `logos` folder in `images`
---
 ...yDuckOutline.svg => grey-duck-outline.svg} |   0
 .../{cyberPanel.jpg => home/cyber-panel.jpg}  | Bin
 .../images/{duckCTF.jpg => home/duck-ctf.jpg} | Bin
 public/images/{ => home}/pizza.jpg            | Bin
 public/{logo => images/logos}/logo-text.svg   |   0
 public/images/{ => logos}/logo.png            | Bin
 public/{logo => images/logos}/logo.svg        |   0
 .../{rectangleGrid.svg => rectangle-grid.svg} |   0
 .../{squareGrid.svg => square-grid.svg}       |   0
 ...DuckOutline.svg => white-duck-outline.svg} |   0
 .../images/{whiteDuck.svg => white-duck.svg}  |   0
 .../{yellowDuck.svg => yellow-duck.svg}       |   0
 .../{yellowStar.svg => yellow-star.svg}       |   0
 ...yellowTriangle.svg => yellow-triangle.svg} |   0
 src/app/(account)/join-us/ProgressBar.tsx     |   2 +-
 src/app/(home)/ImageCarousel.tsx              |  23 +++++++-----------
 src/app/(home)/page.tsx                       |  22 ++++++++---------
 src/app/contact/Form.tsx                      |   4 +--
 src/app/contact/page.tsx                      |   2 +-
 src/components/Header.tsx                     |   2 +-
 20 files changed, 25 insertions(+), 30 deletions(-)
 rename public/images/{greyDuckOutline.svg => grey-duck-outline.svg} (100%)
 rename public/images/{cyberPanel.jpg => home/cyber-panel.jpg} (100%)
 rename public/images/{duckCTF.jpg => home/duck-ctf.jpg} (100%)
 rename public/images/{ => home}/pizza.jpg (100%)
 rename public/{logo => images/logos}/logo-text.svg (100%)
 rename public/images/{ => logos}/logo.png (100%)
 rename public/{logo => images/logos}/logo.svg (100%)
 rename public/images/{rectangleGrid.svg => rectangle-grid.svg} (100%)
 rename public/images/{squareGrid.svg => square-grid.svg} (100%)
 rename public/images/{whiteDuckOutline.svg => white-duck-outline.svg} (100%)
 rename public/images/{whiteDuck.svg => white-duck.svg} (100%)
 rename public/images/{yellowDuck.svg => yellow-duck.svg} (100%)
 rename public/images/{yellowStar.svg => yellow-star.svg} (100%)
 rename public/images/{yellowTriangle.svg => yellow-triangle.svg} (100%)

diff --git a/public/images/greyDuckOutline.svg b/public/images/grey-duck-outline.svg
similarity index 100%
rename from public/images/greyDuckOutline.svg
rename to public/images/grey-duck-outline.svg
diff --git a/public/images/cyberPanel.jpg b/public/images/home/cyber-panel.jpg
similarity index 100%
rename from public/images/cyberPanel.jpg
rename to public/images/home/cyber-panel.jpg
diff --git a/public/images/duckCTF.jpg b/public/images/home/duck-ctf.jpg
similarity index 100%
rename from public/images/duckCTF.jpg
rename to public/images/home/duck-ctf.jpg
diff --git a/public/images/pizza.jpg b/public/images/home/pizza.jpg
similarity index 100%
rename from public/images/pizza.jpg
rename to public/images/home/pizza.jpg
diff --git a/public/logo/logo-text.svg b/public/images/logos/logo-text.svg
similarity index 100%
rename from public/logo/logo-text.svg
rename to public/images/logos/logo-text.svg
diff --git a/public/images/logo.png b/public/images/logos/logo.png
similarity index 100%
rename from public/images/logo.png
rename to public/images/logos/logo.png
diff --git a/public/logo/logo.svg b/public/images/logos/logo.svg
similarity index 100%
rename from public/logo/logo.svg
rename to public/images/logos/logo.svg
diff --git a/public/images/rectangleGrid.svg b/public/images/rectangle-grid.svg
similarity index 100%
rename from public/images/rectangleGrid.svg
rename to public/images/rectangle-grid.svg
diff --git a/public/images/squareGrid.svg b/public/images/square-grid.svg
similarity index 100%
rename from public/images/squareGrid.svg
rename to public/images/square-grid.svg
diff --git a/public/images/whiteDuckOutline.svg b/public/images/white-duck-outline.svg
similarity index 100%
rename from public/images/whiteDuckOutline.svg
rename to public/images/white-duck-outline.svg
diff --git a/public/images/whiteDuck.svg b/public/images/white-duck.svg
similarity index 100%
rename from public/images/whiteDuck.svg
rename to public/images/white-duck.svg
diff --git a/public/images/yellowDuck.svg b/public/images/yellow-duck.svg
similarity index 100%
rename from public/images/yellowDuck.svg
rename to public/images/yellow-duck.svg
diff --git a/public/images/yellowStar.svg b/public/images/yellow-star.svg
similarity index 100%
rename from public/images/yellowStar.svg
rename to public/images/yellow-star.svg
diff --git a/public/images/yellowTriangle.svg b/public/images/yellow-triangle.svg
similarity index 100%
rename from public/images/yellowTriangle.svg
rename to public/images/yellow-triangle.svg
diff --git a/src/app/(account)/join-us/ProgressBar.tsx b/src/app/(account)/join-us/ProgressBar.tsx
index e9e8280b..a14ae882 100644
--- a/src/app/(account)/join-us/ProgressBar.tsx
+++ b/src/app/(account)/join-us/ProgressBar.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 
 function Duck({ filled, index }: { filled?: boolean; index: number }) {
-    const duckImageName = filled ? 'yellowDuck.svg' : 'greyDuckOutline.svg';
+    const duckImageName = filled ? 'yellow-duck.svg' : 'grey-duck-outline.svg';
     const duckImageAlt = filled ? 'Yellow Duck' : 'Grey Duck Outline';
 
     return (
diff --git a/src/app/(home)/ImageCarousel.tsx b/src/app/(home)/ImageCarousel.tsx
index ea8d194b..9d15e61e 100644
--- a/src/app/(home)/ImageCarousel.tsx
+++ b/src/app/(home)/ImageCarousel.tsx
@@ -2,27 +2,22 @@
 
 import FancyRectangle from '@/components/FancyRectangle';
 import Image from 'next/image';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-interface CarouselImage {
-    src: string;
-    alt: string;
-}
-
-const images: CarouselImage[] = [
+const IMAGES = [
     {
-        src: '/images/duckCTF.jpg',
+        src: '/images/home/duck-ctf.jpg',
         alt: 'DuckCTF',
     },
     {
-        src: '/images/pizza.jpg',
+        src: '/images/home/pizza.jpg',
         alt: 'Pizza',
     },
     {
-        src: '/images/cyberPanel.jpg',
+        src: '/images/home/cyber-panel.jpg',
         alt: 'Cyber Panel',
     },
-];
+] as const;
 
 export default function ImageCarousel() {
     const [currentImageIndex, setCurrentImageIndex] = useState(0);
@@ -32,7 +27,7 @@ export default function ImageCarousel() {
         setIsTransitioning(true);
         setTimeout(() => {
             setCurrentImageIndex((prevIndex) =>
-                prevIndex === images.length - 1 ? 0 : prevIndex + 1
+                prevIndex === IMAGES.length - 1 ? 0 : prevIndex + 1
             );
             setIsTransitioning(false);
         }, 500);
@@ -53,8 +48,8 @@ export default function ImageCarousel() {
                         }`}
                     >
                         <Image
-                            src={images[currentImageIndex].src}
-                            alt={images[currentImageIndex].alt}
+                            src={IMAGES[currentImageIndex].src}
+                            alt={IMAGES[currentImageIndex].alt}
                             width={2132}
                             height={1600}
                             className="h-full w-full object-cover"
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 90c5ce11..23e6734a 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -14,7 +14,7 @@ export default function HomePage() {
                         <div>
                             {/* Grid */}
                             <Image
-                                src="/images/squareGrid.svg"
+                                src="/images/square-grid.svg"
                                 alt="Square Grid"
                                 width={500}
                                 height={500}
@@ -69,7 +69,7 @@ export default function HomePage() {
                     <div className="relative z-10 mt-4 flex flex-row items-center text-2xl font-black lg:text-3xl">
                         <h3 className="">First-Year Perks</h3>
                         <Image
-                            src="/images/yellowStar.svg"
+                            src="/images/yellow-star.svg"
                             alt="Yellow Star"
                             className="ml-4 h-10"
                             width={50}
@@ -91,7 +91,7 @@ export default function HomePage() {
                 <section>
                     {/* <Grid /> */}
                     <Image
-                        src="/images/squareGrid.svg"
+                        src="/images/square-grid.svg"
                         alt="Square Grid"
                         width={500}
                         height={500}
@@ -175,7 +175,7 @@ export default function HomePage() {
                 <section>
                     <div className="relative z-10 mt-12 flex flex-row items-center text-2xl font-black md:text-4xl lg:mt-20 lg:text-5xl">
                         <Image
-                            src="/images/yellowTriangle.svg"
+                            src="/images/yellow-triangle.svg"
                             alt="Yellow Triangle"
                             className="mb-12 mr-4"
                             width={30}
@@ -214,7 +214,7 @@ export default function HomePage() {
                     <div className="mb-[3em] md:mb-[8.75em] lg:md:mb-[11.3em]">
                         {/* <Grid /> */}
                         <Image
-                            src="/images/rectanglegrid.svg"
+                            src="/images/rectangle-grid.svg"
                             alt="Rectangle Grid"
                             width={500}
                             height={500}
@@ -225,7 +225,7 @@ export default function HomePage() {
                     <div className="relative z-10 ml-[2.5em] flex w-fit flex-col md:ml-[4.4em]">
                         <div className="relative mb-2 flex flex-row justify-end">
                             <Image
-                                src="/images/whiteDuckOutline.svg"
+                                src="/images/white-duck-outline.svg"
                                 alt="White Duck Outline"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
@@ -233,7 +233,7 @@ export default function HomePage() {
                             />
 
                             <Image
-                                src="/images/whiteDuckOutline.svg"
+                                src="/images/white-duck-outline.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
@@ -241,7 +241,7 @@ export default function HomePage() {
                             />
 
                             <Image
-                                src="/images/whiteDuck.svg"
+                                src="/images/white-duck.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
@@ -249,21 +249,21 @@ export default function HomePage() {
                             />
 
                             <Image
-                                src="/images/whiteDuck.svg"
+                                src="/images/white-duck.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
                                 width={50}
                             />
                             <Image
-                                src="/images/whiteDuck.svg"
+                                src="/images/white-duck.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
                                 width={50}
                             />
                             <Image
-                                src="/images/whiteDuck.svg"
+                                src="/images/white-duck.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
diff --git a/src/app/contact/Form.tsx b/src/app/contact/Form.tsx
index dbc84b72..acbd5585 100644
--- a/src/app/contact/Form.tsx
+++ b/src/app/contact/Form.tsx
@@ -14,14 +14,14 @@ export default function Form({ className }: { className?: string }) {
     return (
         <div className={`${className} relative`}>
             <Image
-                src="/images/whiteDuck.svg"
+                src="/images/white-duck.svg"
                 alt="Duck"
                 width={60}
                 height={60}
                 className="absolute right-[25px] top-[-48px] hidden md:block"
             />
             <Image
-                src="/images/whiteDuck.svg"
+                src="/images/white-duck.svg"
                 alt="Duck"
                 width={60}
                 height={60}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 0b46b016..01c4bdbc 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -5,7 +5,7 @@ import Sponsorship from './Sponsorship';
 
 export default function ContactPage() {
     return (
-        <div className="h-full bg-[url('/images/rectangleGrid.svg')] bg-repeat-y md:bg-[length:90%_90%] md:bg-center md:bg-no-repeat">
+        <div className="h-full bg-[url('/images/rectangle-grid.svg')] bg-repeat-y md:bg-[length:90%_90%] md:bg-center md:bg-no-repeat">
             <div className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-10">
                 <div className="grid-flow-dense justify-self-center md:col-span-2">
                     <Title colour="yellow">Contact</Title>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8676e692..c14720d2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -53,7 +53,7 @@ export default function Header() {
                         <div className="flex flex-row items-center">
                             <Link href="/" className="flex flex-row items-center">
                                 <Image
-                                    src="/logo/logo.svg"
+                                    src="/images/logos/logo.svg"
                                     alt="Computer Science Club Logo"
                                     className="h-full w-[3rem] md:w-[1.62rem] lg:w-[2.2rem]"
                                     width={100}