From 7802873b5208276429a64139fc208f0759c0a7e0 Mon Sep 17 00:00:00 2001 From: Justin Lang Date: Wed, 6 Mar 2024 14:07:19 -0800 Subject: [PATCH 01/34] revamping gallery page --- app/gallery/page.tsx | 4 +-- components/galleryYearSection.tsx | 41 +++++++++++++++++++------------ 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx index f4e4d383..2149bf52 100644 --- a/app/gallery/page.tsx +++ b/app/gallery/page.tsx @@ -13,9 +13,7 @@ const GalleryPage = () => {
-

- Our Favorite Memories -

+

OUR FAVORITE MEMORIES

{ return ( <> -

{year}

-
+

{year}

+
{images.map((image) => ( -
- -
-
- {image.title.toUpperCase()} +
+ +
+ View
-
+ + {image.title} +
+

+ {image.title} +

+

{image.title}

+
))} From 6604527b2a27592863ec77810a6b3b015380584e Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Wed, 29 May 2024 17:59:44 -0700 Subject: [PATCH 02/34] rehauling gallery page --- app/gallery/page.tsx | 72 +++++++++++++++---------------- components/galleryYearSection.tsx | 20 ++++++--- tailwind.config.js | 1 + 3 files changed, 51 insertions(+), 42 deletions(-) diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx index 2ae0843c..ed7baef0 100644 --- a/app/gallery/page.tsx +++ b/app/gallery/page.tsx @@ -1,4 +1,4 @@ -"use client" +"use client"; import { galleryImages2023_2024, @@ -8,7 +8,7 @@ import { galleryImages2018_2019, galleryImages2017_2018, } from "@/data/galleryImages"; -import React, { useState } from 'react'; +import React, { useState } from "react"; import GalleryYearSection from "@/components/galleryYearSection"; const GalleryPage: React.FC = () => { @@ -16,11 +16,11 @@ const GalleryPage: React.FC = () => {
-

+ {/*

Our Favorite Memories -

+ */} -

+

2023-2024

{ -

- 2022-2023 +

+ 2022-2023

+ images={galleryImages2022_2023} + year="2022-2023" + quarter="NA" + /> -

- 2021-2022 +

+ 2021-2022

+ images={galleryImages2021_2022} + year="2021-2022" + quarter="NA" + /> -

- 2019-2020 +

+ 2019-2020

+ images={galleryImages2019_2020} + year="2019-2020" + quarter="NA" + /> -

- 2018-2019 +

+ 2018-2019

+ images={galleryImages2018_2019} + year="2018-2019" + quarter="NA" + /> -

- 2017-2018 +

+ 2017-2018

+ images={galleryImages2017_2018} + year="2017-2018" + quarter="NA" + />
diff --git a/components/galleryYearSection.tsx b/components/galleryYearSection.tsx index 39141635..c0b6af1a 100644 --- a/components/galleryYearSection.tsx +++ b/components/galleryYearSection.tsx @@ -15,11 +15,19 @@ interface GalleryYearSectionProps { quarter: string; } -const GalleryYearSection = ({ images, year , quarter}: GalleryYearSectionProps) => { - const filteredImages = images.filter(image => image.quarter === quarter); +const GalleryYearSection = ({ + images, + year, + quarter, +}: GalleryYearSectionProps) => { + const filteredImages = images.filter((image) => image.quarter === quarter); return ( <> - {quarter !== "NA" &&

{quarter}

} + {quarter !== "NA" && ( +

+ {quarter} Quarter +

+ )}
{filteredImages.map((image) => ( @@ -41,10 +49,10 @@ const GalleryYearSection = ({ images, year , quarter}: GalleryYearSectionProps) width={600} />
-

- {image.title} +

+ {image.title.toUpperCase()}

-

{image.title}

+ {/*

{image.title}

*/}
diff --git a/tailwind.config.js b/tailwind.config.js index 8a5d7a04..e53c3fc6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -33,6 +33,7 @@ module.exports = { amulya: ["Amulya", "sans-serif"], satoshi: ["Satoshi", "sans-serif"], raleway: ["Raleway", "sans-serif"], + jacques: ['"Jacques Francois"', 'serif'], }, }, }, From 3516f39287270925585b7f54395e6342f23a8165 Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Tue, 4 Jun 2024 14:49:18 -0700 Subject: [PATCH 03/34] adding changes for now --- app/globals.css | 15 +- components.json | 17 ++ components/events.tsx | 80 +++--- components/gallerySmall.tsx | 55 ++++ components/main.tsx | 80 ++++-- components/ui/scroll-area.tsx | 48 ++++ lib/utils.ts | 6 + package-lock.json | 492 +++++++++++++++++++++++++--------- package.json | 8 +- tailwind.config.js | 67 ++++- 10 files changed, 674 insertions(+), 194 deletions(-) create mode 100644 components.json create mode 100644 components/gallerySmall.tsx create mode 100644 components/ui/scroll-area.tsx create mode 100644 lib/utils.ts diff --git a/app/globals.css b/app/globals.css index e10b2c69..91f55f00 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,13 +1,4 @@ @tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - .btn { - @apply font-bold py-2 px-4 rounded; - } - - h1 { - @apply text-5xl - } -} \ No newline at end of file + @tailwind components; + @tailwind utilities; + \ No newline at end of file diff --git a/components.json b/components.json new file mode 100644 index 00000000..7e413e33 --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "slate", + "cssVariables": false, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} \ No newline at end of file diff --git a/components/events.tsx b/components/events.tsx index c217045b..7b5fbefd 100644 --- a/components/events.tsx +++ b/components/events.tsx @@ -50,50 +50,48 @@ const Events = () => { ); return ( -
-
- -

- Upcoming Events -

+
+
+

+ Upcoming Events +

- {upcomingEvents.length === 0 ? ( -
-
-

- No events yet, check back soon! -

-
+ {upcomingEvents.length === 0 ? ( +
+
+

+ No events yet, check back soon! +

- ) : ( -
- {upcomingEvents.map((event) => ( -
-
-

{event.title}

-

- Date: {formatDate(event.date)} -

-

- Time: - {event.customTime === "" ? ( - {event.time} PST - ) : ( - event.customTime - )} -

-

- Location: {event.location} -

-
+
+ ) : ( +
+ {upcomingEvents.map((event) => ( +
+
+

{event.title}

+

+ Date: {formatDate(event.date)} +

+

+ Time: + {event.customTime === "" ? ( + {event.time} PST + ) : ( + event.customTime + )} +

+

+ Location: {event.location} +

- ))} -
- )} - +
+ ))} +
+ )}
); diff --git a/components/gallerySmall.tsx b/components/gallerySmall.tsx new file mode 100644 index 00000000..2454ff45 --- /dev/null +++ b/components/gallerySmall.tsx @@ -0,0 +1,55 @@ +import { ScrollArea, ScrollBar } from "./ui/scroll-area"; +import Image from "next/image"; +import ScrollTransition from "./scroll-transition"; +import Link from "next/link"; +interface GalleryImage { + id: number; + title: string; + imageUrl: string; + link: string; + quarter: string; +} + +interface GalleryYearSectionProps { + images: GalleryImage[]; + year: string; + quarter: string; +} + +const GalleryYearSection = ({ + images, + year, + quarter, +}: GalleryYearSectionProps) => { + const filteredImages = images.filter((image) => image.quarter === quarter); + const lastFourImages = filteredImages.slice(-8); // Get the last 4 images + + return ( + +
+ {lastFourImages.map((image) => ( +
+ +
+ {`Photo +
+ +
+ {image.title.toUpperCase()} +
+
+ ))} +
+ +
+ ); +}; + +export default GalleryYearSection; diff --git a/components/main.tsx b/components/main.tsx index c94e36c5..bfe8df06 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -1,28 +1,76 @@ +"use client"; import Image from "next/image"; import ScrollTransition from "./scroll-transition"; +import { ScrollArea, ScrollBar } from "./ui/scroll-area"; import { FaInstagram, FaLink } from "react-icons/fa"; +import { Link } from "@mui/material"; +import { galleryImages2023_2024 } from "@/data/galleryImages"; +import GallerySmall from "./gallerySmall"; +import Events from "./events"; +import { useEffect, useRef, useState } from "react"; const Main = () => { + const leftContainerRef = useRef(null); // Specify the type explicitly + const [leftContainerHeight, setLeftContainerHeight] = useState(0); + + useEffect(() => { + const updateHeight = () => { + if (leftContainerRef.current) { + setLeftContainerHeight(leftContainerRef.current.offsetHeight); + } + }; + + updateHeight(); + window.addEventListener("resize", updateHeight); + console.log(leftContainerHeight); + + return () => { + window.removeEventListener("resize", updateHeight); + }; + }, []); + return ( -
-
- Staff Cover Photo -
-
-

- TAIWANESE AMERICAN STUDENT ASSOCIATION -

+
+ +
+ Staff Cover Photo +
+
+

+ Meet our staff! +

+
+
+
+ +
+
+ +
+
+
-
+
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx new file mode 100644 index 00000000..ff4aae8e --- /dev/null +++ b/components/ui/scroll-area.tsx @@ -0,0 +1,48 @@ +"use client" + +import * as React from "react" +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" + +import { cn } from "@/lib/utils" + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "vertical", ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar } diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 00000000..d084ccad --- /dev/null +++ b/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/package-lock.json b/package-lock.json index ab72d2ae..fed8d7b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,14 +12,18 @@ "@emotion/styled": "^11.11.5", "@ericz1803/react-google-calendar": "^4.3.1", "@mui/material": "^5.15.15", + "@radix-ui/react-scroll-area": "^1.0.5", "@types/react-dom": "18.2.7", "@vercel/analytics": "^1.1.2", "@vercel/node": "^3.0.1", "@vercel/speed-insights": "^1.0.2", "autoprefixer": "10.4.14", "axios": "^1.6.7", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", "eslint": "8.45.0", "eslint-config-next": "^14.2.3", + "lucide-react": "^0.383.0", "next": "^14.2.3", "postcss": "^8.4.33", "react": "^18.3.1", @@ -30,7 +34,9 @@ "react-modal": "^3.16.1", "rsuite": "^5.37.3", "sharp": "^0.33.2", - "tailwindcss": "3.3.3" + "tailwind-merge": "^2.3.0", + "tailwindcss": "3.3.3", + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "20.4.2", @@ -1035,6 +1041,126 @@ "node": ">= 10" } }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz", + "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz", + "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz", + "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz", + "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz", + "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz", + "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz", + "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz", + "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1104,6 +1230,203 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@radix-ui/number": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", + "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/@radix-ui/primitive": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", + "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-context": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", + "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-direction": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz", + "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz", + "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-scroll-area": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz", + "integrity": "sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/number": "1.0.1", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", + "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", + "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@rsuite/icon-font": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@rsuite/icon-font/-/icon-font-4.0.0.tgz", @@ -2009,6 +2332,25 @@ "node": ">= 6" } }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, + "node_modules/class-variance-authority/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/classnames": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", @@ -4263,6 +4605,14 @@ "node": ">=10" } }, + "node_modules/lucide-react": { + "version": "0.383.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.383.0.tgz", + "integrity": "sha512-13xlG0CQCJtzjSQYwwJ3WRqMHtRj3EXmLlorrARt7y+IHnxUCp3XyFNL1DfaGySWxHObDvnu1u1dV+0VMKHUSg==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/make-error": { "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", @@ -6038,6 +6388,18 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/tailwind-merge": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz", + "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==", + "dependencies": { + "@babel/runtime": "^7.24.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", @@ -6074,6 +6436,14 @@ "node": ">=14.0.0" } }, + "node_modules/tailwindcss-animate": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz", + "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==", + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -6652,126 +7022,6 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } - }, - "node_modules/@next/swc-darwin-x64": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz", - "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-gnu": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz", - "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-musl": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz", - "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-gnu": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz", - "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-musl": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz", - "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-arm64-msvc": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz", - "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-ia32-msvc": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz", - "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-x64-msvc": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz", - "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } } } } diff --git a/package.json b/package.json index 5a061b94..c1792493 100644 --- a/package.json +++ b/package.json @@ -13,14 +13,18 @@ "@emotion/styled": "^11.11.5", "@ericz1803/react-google-calendar": "^4.3.1", "@mui/material": "^5.15.15", + "@radix-ui/react-scroll-area": "^1.0.5", "@types/react-dom": "18.2.7", "@vercel/analytics": "^1.1.2", "@vercel/node": "^3.0.1", "@vercel/speed-insights": "^1.0.2", "autoprefixer": "10.4.14", "axios": "^1.6.7", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", "eslint": "8.45.0", "eslint-config-next": "^14.2.3", + "lucide-react": "^0.383.0", "next": "^14.2.3", "postcss": "^8.4.33", "react": "^18.3.1", @@ -31,7 +35,9 @@ "react-modal": "^3.16.1", "rsuite": "^5.37.3", "sharp": "^0.33.2", - "tailwindcss": "3.3.3" + "tailwind-merge": "^2.3.0", + "tailwindcss": "3.3.3", + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "20.4.2", diff --git a/tailwind.config.js b/tailwind.config.js index 41f68e0d..facacd7c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,10 +1,20 @@ module.exports = { + darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", + "./src/**/*.{ts,tsx}", ], + prefix: "", theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, fontSize: { sm: "0.8rem", md: "0.9rem", @@ -19,8 +29,7 @@ module.exports = { "7xl": "4.768rem", "8xl": "5.96rem", }, - - screen: { + screens: { sm: "480px", md: "768px", lg: "976px", @@ -29,6 +38,44 @@ module.exports = { extend: { colors: { pink: "rgb(254, 191, 207)", + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", }, fontFamily: { roboto: ["Roboto", "sans-serif"], @@ -38,7 +85,21 @@ module.exports = { satoshi: ["Satoshi", "sans-serif"], raleway: ["Raleway", "sans-serif"], }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, }, }, - plugins: [], + plugins: [require("tailwindcss-animate")], }; From b6c04e3c6eb5bb379413640471eb6db1641e48fb Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Tue, 4 Jun 2024 22:28:06 -0700 Subject: [PATCH 04/34] adding better looking --- app/layout.tsx | 1 - app/page.tsx | 2 +- components/events.tsx | 12 +++---- components/gallerySmall.tsx | 69 ++++++++++++++++++++----------------- components/main.tsx | 46 ++++++++----------------- components/ui/button.tsx | 56 ++++++++++++++++++++++++++++++ package-lock.json | 1 + package.json | 1 + 8 files changed, 117 insertions(+), 71 deletions(-) create mode 100644 components/ui/button.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 075d5d2e..1321462f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -27,7 +27,6 @@ export default function RootLayout({ return ( - {" "}
{children} diff --git a/app/page.tsx b/app/page.tsx index 302a7a5f..d6752a66 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -6,7 +6,7 @@ const Home = () => { return (
- + {/* */}
); }; diff --git a/components/events.tsx b/components/events.tsx index 7b5fbefd..7fbcb001 100644 --- a/components/events.tsx +++ b/components/events.tsx @@ -65,13 +65,13 @@ const Events = () => {
) : ( -
+
{upcomingEvents.map((event) => ( -
-
+
+

{event.title}

Date: {formatDate(event.date)} diff --git a/components/gallerySmall.tsx b/components/gallerySmall.tsx index 2454ff45..70bb3245 100644 --- a/components/gallerySmall.tsx +++ b/components/gallerySmall.tsx @@ -1,7 +1,7 @@ import { ScrollArea, ScrollBar } from "./ui/scroll-area"; import Image from "next/image"; -import ScrollTransition from "./scroll-transition"; import Link from "next/link"; + interface GalleryImage { id: number; title: string; @@ -10,46 +10,53 @@ interface GalleryImage { quarter: string; } -interface GalleryYearSectionProps { +interface GallerySmallProps { images: GalleryImage[]; year: string; quarter: string; } -const GalleryYearSection = ({ - images, - year, - quarter, -}: GalleryYearSectionProps) => { +const GallerySmall = ({ images, year, quarter }: GallerySmallProps) => { const filteredImages = images.filter((image) => image.quarter === quarter); - const lastFourImages = filteredImages.slice(-8); // Get the last 4 images + const lastFourImages = filteredImages.slice(-8); return ( - -

- {lastFourImages.map((image) => ( -
- -
- {`Photo +
+
+

+ Our Recent Events +

+ +
+ {lastFourImages.map((image) => ( +
+ +
+ {`Photo +
+ +
+

+ {image.title.toUpperCase()} +

+
- -
- {image.title.toUpperCase()} -
-
- ))} + ))} +
+ +
- - +
); }; -export default GalleryYearSection; +export default GallerySmall; diff --git a/components/main.tsx b/components/main.tsx index bfe8df06..8d2a59e9 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -8,7 +8,7 @@ import { galleryImages2023_2024 } from "@/data/galleryImages"; import GallerySmall from "./gallerySmall"; import Events from "./events"; import { useEffect, useRef, useState } from "react"; - +import { Button } from "./ui/button"; const Main = () => { const leftContainerRef = useRef(null); // Specify the type explicitly const [leftContainerHeight, setLeftContainerHeight] = useState(0); @@ -30,49 +30,31 @@ const Main = () => { }, []); return ( -
- -
- +
+
+ Staff Cover Photo -
-
-

- Meet our staff! -

-
-
-
- -
-
+
-
-
- +
+ +
-
+

diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 00000000..7a957e34 --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300", + { + variants: { + variant: { + default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90", + destructive: + "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90", + outline: + "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50", + secondary: + "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80", + ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50", + link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/package-lock.json b/package-lock.json index fed8d7b7..c2d81ba3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@ericz1803/react-google-calendar": "^4.3.1", "@mui/material": "^5.15.15", "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-slot": "^1.0.2", "@types/react-dom": "18.2.7", "@vercel/analytics": "^1.1.2", "@vercel/node": "^3.0.1", diff --git a/package.json b/package.json index c1792493..639b54f2 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@ericz1803/react-google-calendar": "^4.3.1", "@mui/material": "^5.15.15", "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-slot": "^1.0.2", "@types/react-dom": "18.2.7", "@vercel/analytics": "^1.1.2", "@vercel/node": "^3.0.1", From fe4754a9751718e6a6549869f200f88f8b532751 Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Tue, 4 Jun 2024 22:48:59 -0700 Subject: [PATCH 05/34] adding links to staff and gallery --- components/events.tsx | 2 +- components/gallerySmall.tsx | 13 ++++++---- components/galleryYearSection.tsx | 41 +++++++++++-------------------- components/main.tsx | 13 +++++++++- 4 files changed, 36 insertions(+), 33 deletions(-) diff --git a/components/events.tsx b/components/events.tsx index 7fbcb001..cb34b2b8 100644 --- a/components/events.tsx +++ b/components/events.tsx @@ -50,7 +50,7 @@ const Events = () => { ); return ( -
+

Upcoming Events diff --git a/components/gallerySmall.tsx b/components/gallerySmall.tsx index 70bb3245..3966df75 100644 --- a/components/gallerySmall.tsx +++ b/components/gallerySmall.tsx @@ -23,9 +23,11 @@ const GallerySmall = ({ images, year, quarter }: GallerySmallProps) => { return (
-

- Our Recent Events -

+ +

+ Our Recent Events +

+
{lastFourImages.map((image) => ( @@ -44,10 +46,11 @@ const GallerySmall = ({ images, year, quarter }: GallerySmallProps) => { />
-
-

+
+

{image.title.toUpperCase()}

+ {/*

{image.title}

*/}

))} diff --git a/components/galleryYearSection.tsx b/components/galleryYearSection.tsx index c0b6af1a..1cffc823 100644 --- a/components/galleryYearSection.tsx +++ b/components/galleryYearSection.tsx @@ -1,4 +1,3 @@ -import Link from "next/link"; import ScrollTransition from "./scroll-transition"; interface GalleryImage { @@ -24,36 +23,26 @@ const GalleryYearSection = ({ return ( <> {quarter !== "NA" && ( -

- {quarter} Quarter -

+

{quarter}

)}
{filteredImages.map((image) => ( - +
))} diff --git a/components/main.tsx b/components/main.tsx index 8d2a59e9..9ffe6a63 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -40,14 +40,25 @@ const Main = () => { height={600} className="object-cover w-full h-[400px] md:h-full" /> + + +

+ Meet your Staff! +

+
+
+
-
+
From 9d60cc3d7388e4cc2673464d30c637074d3d445c Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Tue, 4 Jun 2024 22:51:15 -0700 Subject: [PATCH 06/34] hopefully removing blue underline --- components/main.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/main.tsx b/components/main.tsx index 9ffe6a63..79084183 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -40,7 +40,7 @@ const Main = () => { height={600} className="object-cover w-full h-[400px] md:h-full" /> - + Date: Wed, 5 Jun 2024 13:24:01 -0700 Subject: [PATCH 07/34] Create youtube.tsx --- components/youtube.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 components/youtube.tsx diff --git a/components/youtube.tsx b/components/youtube.tsx new file mode 100644 index 00000000..7b7fad12 --- /dev/null +++ b/components/youtube.tsx @@ -0,0 +1,25 @@ +"use client" +import React from "react"; +import YouTube from "react-youtube"; + + +class Youtube extends React.Component { + render() { + const options = { + height: '390', + width: '640', + playerVars: { + autoplay: 1, + controls: 1, + }, + }; + + return ; + } + + _onReady(event: any) { + event.target.pauseVideo(); + } + } + + export default Youtube; \ No newline at end of file From 0308bea76e6bff2bf2e865e6de2cac9f8bf5f5e6 Mon Sep 17 00:00:00 2001 From: Justin Lang Date: Wed, 5 Jun 2024 13:54:03 -0700 Subject: [PATCH 08/34] adding youtube to home page --- components/main.tsx | 12 ++++++++--- package-lock.json | 50 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 60 insertions(+), 3 deletions(-) diff --git a/components/main.tsx b/components/main.tsx index 79084183..4d9b1b23 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -9,6 +9,7 @@ import GallerySmall from "./gallerySmall"; import Events from "./events"; import { useEffect, useRef, useState } from "react"; import { Button } from "./ui/button"; +import Youtube from "./youtube"; const Main = () => { const leftContainerRef = useRef(null); // Specify the type explicitly const [leftContainerHeight, setLeftContainerHeight] = useState(0); @@ -40,7 +41,7 @@ const Main = () => { height={600} className="object-cover w-full h-[400px] md:h-full" /> - + {
-
-
+
+
+
+ +
+
+

diff --git a/package-lock.json b/package-lock.json index c2d81ba3..16d2813e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "react-icons": "^4.10.1", "react-iframe": "^1.8.5", "react-modal": "^3.16.1", + "react-youtube": "^10.1.0", "rsuite": "^5.37.3", "sharp": "^0.33.2", "tailwind-merge": "^2.3.0", @@ -4560,6 +4561,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==" + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -5595,6 +5601,22 @@ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-youtube": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-10.1.0.tgz", + "integrity": "sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==", + "dependencies": { + "fast-deep-equal": "3.1.3", + "prop-types": "15.8.1", + "youtube-player": "5.5.2" + }, + "engines": { + "node": ">= 14.x" + }, + "peerDependencies": { + "react": ">=0.14.1" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -6079,6 +6101,11 @@ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" }, + "node_modules/sister": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz", + "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==" + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -7023,6 +7050,29 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/youtube-player": { + "version": "5.5.2", + "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.2.tgz", + "integrity": "sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==", + "dependencies": { + "debug": "^2.6.6", + "load-script": "^1.0.0", + "sister": "^3.0.0" + } + }, + "node_modules/youtube-player/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/youtube-player/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" } } } diff --git a/package.json b/package.json index 639b54f2..a348dd5d 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react-icons": "^4.10.1", "react-iframe": "^1.8.5", "react-modal": "^3.16.1", + "react-youtube": "^10.1.0", "rsuite": "^5.37.3", "sharp": "^0.33.2", "tailwind-merge": "^2.3.0", From 5cdb05b1ec957bcd54537f8e06e48efe083b4252 Mon Sep 17 00:00:00 2001 From: Justin Lang Date: Wed, 5 Jun 2024 14:09:55 -0700 Subject: [PATCH 09/34] changign video to the recap --- components/youtube.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/youtube.tsx b/components/youtube.tsx index 7b7fad12..ccf5eb95 100644 --- a/components/youtube.tsx +++ b/components/youtube.tsx @@ -6,7 +6,7 @@ import YouTube from "react-youtube"; class Youtube extends React.Component { render() { const options = { - height: '390', + height: '360', width: '640', playerVars: { autoplay: 1, @@ -14,7 +14,7 @@ class Youtube extends React.Component { }, }; - return ; + return ; } _onReady(event: any) { @@ -22,4 +22,4 @@ class Youtube extends React.Component { } } - export default Youtube; \ No newline at end of file + export default Youtube; From 4278a0f200da44fc3ad8f41af120b8cf76657e0d Mon Sep 17 00:00:00 2001 From: Justin Lang Date: Wed, 5 Jun 2024 14:11:47 -0700 Subject: [PATCH 10/34] changing left and right --- components/main.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/components/main.tsx b/components/main.tsx index 4d9b1b23..0d16f431 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -44,7 +44,7 @@ const Main = () => {

Meet your Staff! @@ -66,11 +66,7 @@ const Main = () => {

-
-
- -
-
+
@@ -118,6 +114,11 @@ const Main = () => {
+
+
+ +
+
); From 5947bfef0bbbfcbf8a1ff018f3e6ed78a641bd47 Mon Sep 17 00:00:00 2001 From: Justin Lang Date: Wed, 5 Jun 2024 14:17:01 -0700 Subject: [PATCH 11/34] making spacing and rounded --- components/main.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/main.tsx b/components/main.tsx index 0d16f431..919d495f 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -65,7 +65,7 @@ const Main = () => {
-
+
@@ -114,7 +114,7 @@ const Main = () => {
-
+
From 04224ab7efab6c24bfcc8c36928d0f5534bcdefe Mon Sep 17 00:00:00 2001 From: Justin Lang Date: Wed, 5 Jun 2024 14:22:38 -0700 Subject: [PATCH 12/34] removing shadow to empahsize the scroll bar --- components/events.tsx | 2 +- components/gallerySmall.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/events.tsx b/components/events.tsx index cb34b2b8..9c983b9d 100644 --- a/components/events.tsx +++ b/components/events.tsx @@ -69,7 +69,7 @@ const Events = () => { {upcomingEvents.map((event) => (

{event.title}

diff --git a/components/gallerySmall.tsx b/components/gallerySmall.tsx index 3966df75..7575b11b 100644 --- a/components/gallerySmall.tsx +++ b/components/gallerySmall.tsx @@ -33,7 +33,7 @@ const GallerySmall = ({ images, year, quarter }: GallerySmallProps) => { {lastFourImages.map((image) => (
@@ -55,7 +55,7 @@ const GallerySmall = ({ images, year, quarter }: GallerySmallProps) => {
))}
- +
From d0f4ff29d968c5612806cb55cbc46a412c628739 Mon Sep 17 00:00:00 2001 From: Justin Lang Date: Wed, 5 Jun 2024 15:19:53 -0700 Subject: [PATCH 13/34] formatting video to be better for lg screens and below --- components/main.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/main.tsx b/components/main.tsx index 919d495f..9d7bf750 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -65,7 +65,7 @@ const Main = () => {
-
+
@@ -114,8 +114,8 @@ const Main = () => {
-
-
+
+
From a6cbb415d01191392a7b826cf4728ffc35ac9e78 Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Thu, 6 Jun 2024 20:10:34 -0700 Subject: [PATCH 14/34] adding instagram post to the website --- components/instagram.tsx | 14 +++++++++ components/main.tsx | 40 ++++++------------------ components/youtube.tsx | 46 +++++++++++++++------------ package-lock.json | 67 ++++++++++++++++++++++++++++++++++++++-- package.json | 1 + 5 files changed, 115 insertions(+), 53 deletions(-) create mode 100644 components/instagram.tsx diff --git a/components/instagram.tsx b/components/instagram.tsx new file mode 100644 index 00000000..b8ee31aa --- /dev/null +++ b/components/instagram.tsx @@ -0,0 +1,14 @@ +import { InstagramEmbed } from "react-social-media-embed"; + +const Instagram = () => { + return ( +
+ +
+ ); +}; + +export default Instagram; diff --git a/components/main.tsx b/components/main.tsx index 9d7bf750..ee462a47 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -1,35 +1,13 @@ "use client"; -import Image from "next/image"; import ScrollTransition from "./scroll-transition"; -import { ScrollArea, ScrollBar } from "./ui/scroll-area"; import { FaInstagram, FaLink } from "react-icons/fa"; import { Link } from "@mui/material"; import { galleryImages2023_2024 } from "@/data/galleryImages"; import GallerySmall from "./gallerySmall"; import Events from "./events"; -import { useEffect, useRef, useState } from "react"; -import { Button } from "./ui/button"; import Youtube from "./youtube"; +import Instagram from "./instagram"; const Main = () => { - const leftContainerRef = useRef(null); // Specify the type explicitly - const [leftContainerHeight, setLeftContainerHeight] = useState(0); - - useEffect(() => { - const updateHeight = () => { - if (leftContainerRef.current) { - setLeftContainerHeight(leftContainerRef.current.offsetHeight); - } - }; - - updateHeight(); - window.addEventListener("resize", updateHeight); - console.log(leftContainerHeight); - - return () => { - window.removeEventListener("resize", updateHeight); - }; - }, []); - return (
@@ -65,9 +43,13 @@ const Main = () => {
-
- -
+
+
+
+ +
+
+

@@ -114,10 +96,8 @@ const Main = () => {

-
-
- -
+
+
diff --git a/components/youtube.tsx b/components/youtube.tsx index ccf5eb95..d2bf82c2 100644 --- a/components/youtube.tsx +++ b/components/youtube.tsx @@ -1,25 +1,31 @@ -"use client" +"use client"; import React from "react"; import YouTube from "react-youtube"; - class Youtube extends React.Component { - render() { - const options = { - height: '360', - width: '640', - playerVars: { - autoplay: 1, - controls: 1, - }, - }; - - return ; - } - - _onReady(event: any) { - event.target.pauseVideo(); - } - } + render() { + const options = { + height: "225", + width: "400", + playerVars: { + autoplay: 1, + controls: 1, + }, + }; + + return ( + + ); + } + + _onReady(event: any) { + event.target.pauseVideo(); + } +} - export default Youtube; +export default Youtube; diff --git a/package-lock.json b/package-lock.json index 16d2813e..089f9f68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "react-icons": "^4.10.1", "react-iframe": "^1.8.5", "react-modal": "^3.16.1", + "react-social-media-embed": "^2.5.13", "react-youtube": "^10.1.0", "rsuite": "^5.37.3", "sharp": "^0.33.2", @@ -1605,6 +1606,11 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" }, + "node_modules/@types/youtube-player": { + "version": "5.5.11", + "resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.11.tgz", + "integrity": "sha512-pM41CDBqJqBmTeJWnF7NOGz82IQoYOhqzMYXv5vKCXBqGiYSLldxMtpCk6KAEtADTy49S45AriYaCaZyeUX38Q==" + }, "node_modules/@typescript-eslint/parser": { "version": "5.62.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", @@ -2354,9 +2360,9 @@ } }, "node_modules/classnames": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" }, "node_modules/client-only": { "version": "0.0.1", @@ -5501,6 +5507,15 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, + "node_modules/react-html-props": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/react-html-props/-/react-html-props-2.0.9.tgz", + "integrity": "sha512-Q9wIP8hs4HFUb3CDh5tF1nKgZ4S9odU07tR/lZ+/9ePv+psxRy+mUn7ujjrCGwtrLA52AI41fXWr425yK1iyTA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0" + } + }, "node_modules/react-icons": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", @@ -5562,6 +5577,32 @@ "react-dom": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-social-media-embed": { + "version": "2.5.13", + "resolved": "https://registry.npmjs.org/react-social-media-embed/-/react-social-media-embed-2.5.13.tgz", + "integrity": "sha512-9udbyUZpG8lXhDzDHH6ceDZfhW7QGg2WoVjJD6F8PTOXJoULZTkvLV7vYpqeWthqP33iwagLEHo7goJVDuL7ug==", + "dependencies": { + "@types/youtube-player": "^5.5.5", + "classnames": "^2.5.1", + "react-html-props": "^2.0.3", + "react-sub-unsub": "^2.2.1", + "react-twitter-embed": "^4.0.4", + "react-youtube": "^10.1.0" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0" + } + }, + "node_modules/react-sub-unsub": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/react-sub-unsub/-/react-sub-unsub-2.2.7.tgz", + "integrity": "sha512-b2o0mIW8G4Yb3aaKxFB9iiCCHxCDGmogy+493oQpEJHjBy/hl6uf+6RhAinqKWRwi1fvO6mGIMVGsf2XYLL38g==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -5577,6 +5618,21 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-twitter-embed": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz", + "integrity": "sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==", + "dependencies": { + "scriptjs": "^2.5.9" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-use-set": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/react-use-set/-/react-use-set-1.0.0.tgz", @@ -5965,6 +6021,11 @@ "resolved": "https://registry.npmjs.org/schema-typed/-/schema-typed-2.1.3.tgz", "integrity": "sha512-Nk0LLOq0L64HaQsXQGAZ8Z176tDE4jewsxyWe+6QvidNiC33DMaWFg+LaLWJ85uPPBtqBBJlCq9W4c1KEA88WA==" }, + "node_modules/scriptjs": { + "version": "2.5.9", + "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz", + "integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==" + }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", diff --git a/package.json b/package.json index a348dd5d..3191d744 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react-icons": "^4.10.1", "react-iframe": "^1.8.5", "react-modal": "^3.16.1", + "react-social-media-embed": "^2.5.13", "react-youtube": "^10.1.0", "rsuite": "^5.37.3", "sharp": "^0.33.2", From 1380ea271b1d71f30842a11fa847b2b91080a634 Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Thu, 6 Jun 2024 20:13:47 -0700 Subject: [PATCH 15/34] fixing youtube options --- components/youtube.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/youtube.tsx b/components/youtube.tsx index d2bf82c2..f20201d6 100644 --- a/components/youtube.tsx +++ b/components/youtube.tsx @@ -5,8 +5,8 @@ import YouTube from "react-youtube"; class Youtube extends React.Component { render() { const options = { - height: "225", - width: "400", + height: "360", + width: "640", playerVars: { autoplay: 1, controls: 1, From d13fb5e378822b5917796d48044cfb056bcb7387 Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Thu, 6 Jun 2024 20:15:05 -0700 Subject: [PATCH 16/34] adding definitions --- components/youtube.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/components/youtube.tsx b/components/youtube.tsx index f20201d6..42c368c1 100644 --- a/components/youtube.tsx +++ b/components/youtube.tsx @@ -2,14 +2,22 @@ import React from "react"; import YouTube from "react-youtube"; -class Youtube extends React.Component { +// Define the Props interface +interface YoutubeProps { + width: number; +} + +class Youtube extends React.Component { render() { + const { width } = this.props; + const height = (width / 16) * 9; // Maintain 16:9 aspect ratio + const options = { - height: "360", - width: "640", + height: height.toString(), + width: width.toString(), playerVars: { - autoplay: 1, - controls: 1, + autoplay: 1 as 0 | 1, // Explicitly define as 0 | 1 + controls: 1 as 0 | 1, // Explicitly define as 0 | 1 }, }; From 5caa09d964a082371f0535b16935055348cd70e6 Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Thu, 6 Jun 2024 20:16:59 -0700 Subject: [PATCH 17/34] changing to non prop --- components/youtube.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/components/youtube.tsx b/components/youtube.tsx index 42c368c1..dc13164a 100644 --- a/components/youtube.tsx +++ b/components/youtube.tsx @@ -3,18 +3,13 @@ import React from "react"; import YouTube from "react-youtube"; // Define the Props interface -interface YoutubeProps { - width: number; -} -class Youtube extends React.Component { - render() { - const { width } = this.props; - const height = (width / 16) * 9; // Maintain 16:9 aspect ratio +class Youtube extends React.Component { + render() { const options = { - height: height.toString(), - width: width.toString(), + height: 255, + width: 400, playerVars: { autoplay: 1 as 0 | 1, // Explicitly define as 0 | 1 controls: 1 as 0 | 1, // Explicitly define as 0 | 1 From 5501ddc1294f3869ade6dffd0117c7352bda8533 Mon Sep 17 00:00:00 2001 From: Justin Lang <91992668+jlang61@users.noreply.github.com> Date: Thu, 18 Jul 2024 17:24:56 -0700 Subject: [PATCH 18/34] merging event and gallery to be one for conditional --- components/eventGallery.tsx | 109 ++++++++++++++++++++++++++++++++++++ components/gallerySmall.tsx | 14 ++--- components/main.tsx | 27 +++++---- 3 files changed, 130 insertions(+), 20 deletions(-) create mode 100644 components/eventGallery.tsx diff --git a/components/eventGallery.tsx b/components/eventGallery.tsx new file mode 100644 index 00000000..14b37c60 --- /dev/null +++ b/components/eventGallery.tsx @@ -0,0 +1,109 @@ +import events from "../data/eventData"; +import GallerySmall from "./gallerySmall"; +import { galleryImages2023_2024 } from "@/data/galleryImages"; + +const EventGallery = () => { + const formatTime = (time: string) => { + const [hours, minutes] = time.split(":"); + const hour = parseInt(hours, 10); + const amPm = hour >= 12 ? "PM" : "AM"; + const formattedHour = hour % 12 || 12; + return `${formattedHour}:${minutes} ${amPm}`; + }; + + const formatDate = (date: string) => { + const options: Intl.DateTimeFormatOptions = { + year: "numeric", + month: "long", + day: "numeric", + timeZone: "UTC", + }; + const numToDay = (num: number) => { + num = (num % 7) + 1; + switch (num) { + case 0: + return "Sunday"; + case 1: + return "Monday"; + case 2: + return "Tuesday"; + case 3: + return "Wednesday"; + case 4: + return "Thursday"; + case 5: + return "Friday"; + default: + return "Saturday"; + } + }; + const formattedDate = new Date(date).toLocaleDateString("en-US", options); + const dayOfWeek = numToDay(new Date(date).getDay()); + return dayOfWeek + ", " + formattedDate; + }; + + const currentDate = new Date(); + const futureDate = new Date(); + futureDate.setDate(currentDate.getDate() - 1); + + const upcomingEvents = events.filter( + (event) => new Date(event.date) >= futureDate + ); + + return ( +
+
+ +
+ {upcomingEvents.length === 0 ? ( + + ) : ( +
+

+ Upcoming Events +

+ {upcomingEvents.map((event) => ( +
+
+

{event.title}

+

+ Date: {formatDate(event.date)} +

+

+ Time: + {event.customTime === "" ? ( + {event.time} PST + ) : ( + event.customTime + )} +

+

+ Location: {event.location} +

+
+
+ ))} +
+ )} +
+
+
+ ); +}; + +export default EventGallery; diff --git a/components/gallerySmall.tsx b/components/gallerySmall.tsx index 7575b11b..3f4ae3ee 100644 --- a/components/gallerySmall.tsx +++ b/components/gallerySmall.tsx @@ -14,23 +14,21 @@ interface GallerySmallProps { images: GalleryImage[]; year: string; quarter: string; + start: number; + end: number; } -const GallerySmall = ({ images, year, quarter }: GallerySmallProps) => { +const GallerySmall = ({ images, year, quarter, start, end }: GallerySmallProps) => { const filteredImages = images.filter((image) => image.quarter === quarter); - const lastFourImages = filteredImages.slice(-8); + const lastImages = filteredImages.slice(start, end); return (
- -

- Our Recent Events -

- +
- {lastFourImages.map((image) => ( + {lastImages.map((image) => (
{ return (
-
+
{
-
- -
- +
+
+
+ +

+ Our Recent Events +

+ +
+
-
-
+
+ {/*
-
+
*/}
From a52835f9c6d786141da6589a9893a208e7db8117 Mon Sep 17 00:00:00 2001 From: Justin Lang Date: Mon, 16 Sep 2024 16:37:23 -0700 Subject: [PATCH 19/34] adding carousel, moving around items, adding year in review youtube --- app/faq/page.tsx | 2 +- app/programs/page.tsx | 2 +- components/carousel.tsx | 107 ++++++++++++++++++++-------- components/eventGallery.tsx | 74 +++++++++++++------- components/gallerySmall.tsx | 63 ----------------- components/instagram.tsx | 2 +- components/main.tsx | 135 ++++++++++++++++++------------------ components/youtube.tsx | 4 +- 8 files changed, 200 insertions(+), 189 deletions(-) delete mode 100644 components/gallerySmall.tsx diff --git a/app/faq/page.tsx b/app/faq/page.tsx index d2319f91..e871163b 100644 --- a/app/faq/page.tsx +++ b/app/faq/page.tsx @@ -12,7 +12,7 @@ const faqPage = () => {

{faqs.question}

-

{faqs.answer}

+
{faqs.answer}
))}
diff --git a/app/programs/page.tsx b/app/programs/page.tsx index e54a5848..12d1adf4 100644 --- a/app/programs/page.tsx +++ b/app/programs/page.tsx @@ -49,7 +49,7 @@ const Programs = () => {

{program.title}

-

{program.description}

+
{program.description}
))}
diff --git a/components/carousel.tsx b/components/carousel.tsx index 37eacefc..1199bd48 100644 --- a/components/carousel.tsx +++ b/components/carousel.tsx @@ -1,54 +1,101 @@ "use client"; -import React, { useState } from "react"; +import React, { useState, useEffect, useRef } from "react"; import Image from "next/image"; const Carousel = () => { const [activeIndex, setActiveIndex] = useState(0); + const intervalRef = useRef(null); const images = [ - "image1.jpeg", - "image2.jpeg", - "image3.jpeg", - "image4.jpeg", - "image5.jpeg", - "image6.jpeg", - "image7.jpeg", + "/homepage/all_staff.jpg", + "/gallery_photos/2023-2024/arts_crafts.jpg", + "/gallery_photos/2023-2024/hot_pot_night.jpeg", + "/gallery_photos/2023-2024/tfti.jpg", + // "image5.jpeg", + // "image6.jpeg", + // "image7.jpeg", ]; const handleThumbnailClick = (index: number) => { setActiveIndex(index); + resetAutoScroll(); // Reset timer on thumbnail click }; + const handlePrev = () => { + setActiveIndex((prevIndex) => + prevIndex === 0 ? images.length - 1 : prevIndex - 1 + ); + resetAutoScroll(); // Reset timer on previous button click + }; + + const handleNext = () => { + setActiveIndex((prevIndex) => + prevIndex === images.length - 1 ? 0 : prevIndex + 1 + ); + resetAutoScroll(); // Reset timer on next button click + }; + + const resetAutoScroll = () => { + if (intervalRef.current) { + clearInterval(intervalRef.current); + } + intervalRef.current = setInterval(() => { + handleNext(); + }, 5000); // Change image every 5 seconds + }; + + useEffect(() => { + resetAutoScroll(); // Initialize the auto-scroll timer + + return () => { + if (intervalRef.current) { + clearInterval(intervalRef.current); // Cleanup interval on component unmount + } + }; + }, []); + return ( -
-
+
+
{`Carousel -
- {images.map((image, index) => ( - - ))} -
+ + +
+
+ {images.map((image, index) => ( + + ))}
); diff --git a/components/eventGallery.tsx b/components/eventGallery.tsx index 14b37c60..0bd80974 100644 --- a/components/eventGallery.tsx +++ b/components/eventGallery.tsx @@ -1,7 +1,6 @@ import events from "../data/eventData"; -import GallerySmall from "./gallerySmall"; import { galleryImages2023_2024 } from "@/data/galleryImages"; - +import Image from "next/image"; const EventGallery = () => { const formatTime = (time: string) => { const [hours, minutes] = time.split(":"); @@ -45,30 +44,57 @@ const EventGallery = () => { const currentDate = new Date(); const futureDate = new Date(); futureDate.setDate(currentDate.getDate() - 1); - + const galleryImages = galleryImages2023_2024.reverse(); const upcomingEvents = events.filter( (event) => new Date(event.date) >= futureDate ); return ( -
+
- +
+ {galleryImages.slice(0, 2).map((image) => ( +
+ {image.title} + +
+

+ {image.title.toUpperCase()} +

+ {/*

{image.title}

*/} +
+
+ ))} +
{upcomingEvents.length === 0 ? ( - +
+ {galleryImages.slice(2, 4).map((image) => ( +
+ {image.title} +
+

+ {image.title.toUpperCase()} +

+ {/*

{image.title}

*/} +
+
+ ))} +
) : (

@@ -81,20 +107,20 @@ const EventGallery = () => { >

{event.title}

-

+

Date: {formatDate(event.date)} -

-

+

+
Time: {event.customTime === "" ? ( {event.time} PST ) : ( event.customTime )} -

-

+

+
Location: {event.location} -

+

))} diff --git a/components/gallerySmall.tsx b/components/gallerySmall.tsx deleted file mode 100644 index 3f4ae3ee..00000000 --- a/components/gallerySmall.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { ScrollArea, ScrollBar } from "./ui/scroll-area"; -import Image from "next/image"; -import Link from "next/link"; - -interface GalleryImage { - id: number; - title: string; - imageUrl: string; - link: string; - quarter: string; -} - -interface GallerySmallProps { - images: GalleryImage[]; - year: string; - quarter: string; - start: number; - end: number; -} - -const GallerySmall = ({ images, year, quarter, start, end }: GallerySmallProps) => { - const filteredImages = images.filter((image) => image.quarter === quarter); - const lastImages = filteredImages.slice(start, end); - - return ( -
-
- - -
- {lastImages.map((image) => ( -
- -
- {`Photo -
- -
-

- {image.title.toUpperCase()} -

- {/*

{image.title}

*/} -
-
- ))} -
- -
-
-
- ); -}; - -export default GallerySmall; diff --git a/components/instagram.tsx b/components/instagram.tsx index b8ee31aa..02f689b0 100644 --- a/components/instagram.tsx +++ b/components/instagram.tsx @@ -4,7 +4,7 @@ const Instagram = () => { return (
diff --git a/components/main.tsx b/components/main.tsx index 9f0730c4..a8c2e072 100644 --- a/components/main.tsx +++ b/components/main.tsx @@ -8,19 +8,21 @@ import Events from "./events"; import Youtube from "./youtube"; import Instagram from "./instagram"; import EventGallery from "./eventGallery"; +import Carousel from "./carousel"; const Main = () => { return (
-
-
- +
+ + {/* Featured Image - + /> */} + {/* { Meet your Staff!

- + */}
-
-
-
- -

- Our Recent Events -

- -
+
+

+ Welcome to UCSB's TASA! +

+
+ We are dedicated to enriching the college experience through + Taiwanese culture. Our organization fosters{" "} + community, friendship, and cultural awareness. We + bring together like-minded individuals to{" "} + explore Taiwanese traditions, language, and + history. Through events, workshops, and service initiatives, we + encourage dialogue and understanding. We + prioritize creating a supportive network through + study groups, mentorship, and social gatherings. Join us to immerse + yourself in Taiwanese culture, whether you have roots or a + curiosity. Let's celebrate and promote Taiwanese culture, + making lasting memories and connections! +
+
+ To learn more about us, you can check out our upcoming events, meet + our officers and TASA fams. Stay updated by following our Instagram + and Facebook, or by subscribing to our Mailing List! +
+
-
-
- {/*
-
- -
-
*/} -
-
- -

- Welcome to UCSB's TASA! +
+
+
+ +

+ Our Recent Events

-

- We are dedicated to enriching the college experience through - Taiwanese culture. Our organization fosters community, - friendship, and cultural awareness. We bring together - like-minded individuals to explore Taiwanese traditions, - language, and history. Through events, workshops, and service - initiatives, we encourage dialogue and understanding. We - prioritize creating a supportive network through study groups, - mentorship, and social gatherings. Join us to immerse yourself - in Taiwanese culture, whether you have roots or a curiosity. - Let's celebrate and promote Taiwanese culture, making - lasting memories and connections. Together, we create a vibrant - community where college life is enhanced by the richness of - Taiwanese heritage. -

-

- To learn more about us, you can check out our upcoming events, - meet our officers and TASA fams. Stay updated by following our - Instagram and Facebook, or by subscribing to our Mailing List! -

- - + +
+ +
-
+ +
+

+ A Year in Review: What You Missed +

+
+
+ +
+
); }; diff --git a/components/youtube.tsx b/components/youtube.tsx index dc13164a..d0a3afa4 100644 --- a/components/youtube.tsx +++ b/components/youtube.tsx @@ -8,8 +8,8 @@ import YouTube from "react-youtube"; class Youtube extends React.Component { render() { const options = { - height: 255, - width: 400, + height: 720, + width: 1080, playerVars: { autoplay: 1 as 0 | 1, // Explicitly define as 0 | 1 controls: 1 as 0 | 1, // Explicitly define as 0 | 1 From caeb8ed953790b7263392854a89ea2447bd5ccbc Mon Sep 17 00:00:00 2001 From: Justin Lang Date: Mon, 16 Sep 2024 16:50:15 -0700 Subject: [PATCH 20/34] adding links to the images --- components/carousel.tsx | 14 +++++----- components/eventGallery.tsx | 54 +++++++++++++++++++++---------------- components/main.tsx | 1 - 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/components/carousel.tsx b/components/carousel.tsx index 1199bd48..2543ccbf 100644 --- a/components/carousel.tsx +++ b/components/carousel.tsx @@ -58,13 +58,13 @@ const Carousel = () => { return (
- {`Carousel + {`Carousel