-
-
- {images.map((image, index) => (
- handleThumbnailClick(index)}
- >
-
- ))}
-
+
+
+
+ ◀
+
+
+ ▶
+
+
+
+ {images.map((image, index) => (
+ handleThumbnailClick(index)}
+ >
+
+ ))}
);
diff --git a/components/eventGallery.tsx b/components/eventGallery.tsx
new file mode 100644
index 00000000..5279b11d
--- /dev/null
+++ b/components/eventGallery.tsx
@@ -0,0 +1,151 @@
+import events from "../data/eventData";
+import { galleryImages2023_2024 } from "@/data/galleryImages";
+import Image from "next/image";
+import Link from "next/link";
+
+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 galleryImages = galleryImages2023_2024.reverse();
+ const upcomingEvents = events.filter(
+ (event) => new Date(event.date) >= futureDate
+ );
+
+ return (
+
+
+
+ {galleryImages.slice(0, 2).map((image) => (
+
+
+
+
+
+
+ {image.title.toUpperCase()}
+
+
+
+ ))}
+
+
+ {upcomingEvents.length === 0 ? (
+
+ {galleryImages.slice(2, 4).map((image) => (
+
+
+
+
+
+
+ {image.title.toUpperCase()}
+
+
+
+ ))}
+
+ ) : (
+
+
+ Upcoming Events
+
+
+ {upcomingEvents.slice(0, 2).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/events.tsx b/components/events.tsx
index c217045b..9c983b9d 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/galleryYearSection.tsx b/components/galleryYearSection.tsx
index 0cd18cab..1cffc823 100644
--- a/components/galleryYearSection.tsx
+++ b/components/galleryYearSection.tsx
@@ -14,11 +14,17 @@ 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}
+ )}
{filteredImages.map((image) => (
diff --git a/components/instagram.tsx b/components/instagram.tsx
new file mode 100644
index 00000000..2191ff07
--- /dev/null
+++ b/components/instagram.tsx
@@ -0,0 +1,17 @@
+import { InstagramEmbed } from "react-social-media-embed";
+
+const Instagram = () => {
+ return (
+
+ );
+};
+
+export default Instagram;
diff --git a/components/main.tsx b/components/main.tsx
index c94e36c5..51b35688 100644
--- a/components/main.tsx
+++ b/components/main.tsx
@@ -1,76 +1,112 @@
-import Image from "next/image";
+"use client";
+
import ScrollTransition from "./scroll-transition";
import { FaInstagram, FaLink } from "react-icons/fa";
+import { Link } from "@mui/material";
+import Youtube from "@/components/youtube";
+import Instagram from "@/components/instagram";
+import EventGallery from "@/components/eventGallery";
+import Carousel from "@/components/carousel";
+import { useEffect, useState } from "react";
+function Loader() {
+ useEffect(() => {
+ async function getLoader() {
+ const { spiral } = await import("ldrs");
+ spiral.register();
+ }
+ getLoader();
+ }, []);
+ return
-
-
-
-
-
- TAIWANESE AMERICAN STUDENT ASSOCIATION
-
+
+
+
+
+
+
+ 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!
-
-
-
+
+
+ {isClient &&
+
+
+ {isLoading &&
}
+
+
+
+
+ {/*
+ {isClient &&
*/}
+
+ A Year in Review: What You Missed
+
+
);
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 (
+ ,
+ 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/components/youtube.tsx b/components/youtube.tsx
new file mode 100644
index 00000000..adca2ca6
--- /dev/null
+++ b/components/youtube.tsx
@@ -0,0 +1,33 @@
+"use client";
+import React from "react";
+import YouTube from "react-youtube";
+
+class Youtube extends React.Component {
+ render() {
+ const options = {
+ playerVars: {
+ autoplay: 1 as 0 | 1,
+ controls: 1 as 0 | 1,
+ origin: "https://www.youtube-nocookie.com",
+ },
+ host: "https://www.youtube-nocookie.com",
+ };
+
+ return (
+
+
+ );
+ }
+
+ _onReady(event: any) {
+ event.target.pauseVideo();
+ }
+}
+
+export default Youtube;
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/next-env.d.ts b/next-env.d.ts
index 4f11a03d..40c3d680 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
///