founder-srm · greeenboi · Feb 11, 2024 · Feb 6, 2024 · Feb 6, 2024 · Feb 6, 2024
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
@@ -1,10 +1,72 @@
-import Link from "next/link";
+'use client'
+
+import { useEffect, useState } from "react";
+import { supabase } from "../supabase.config";
+import { Card } from "@/components/ui/card";
+import Image from "next/image";
+import { Progress } from "@/components/ui/progress";
+import { toast } from "sonner";
+import Spinner from "@/components/spinner/spinner";
+
 
 export default function Page() {
+    const [images, setImages] = useState(['']);
+    const [loading, setLoading] = useState(false);
+    const [progress, setProgress] = useState(13)
+    useEffect(() => {
+        async function listFiles() {
+            setLoading(true);
+            let { data, error } = await supabase.storage.from('gallery').list('our past events')
+            setProgress(50);
+            if (error) {
+              console.error('Error listing files:', error)
+              setProgress(99);
+              toast.error('Error listing files');
+              return
+            }
+            if (data) {
+                // console.log(data);
+                let newImages = [];
+                for (let file of data) {
+                  if (file.name.endsWith('.png') || file.name.endsWith('.jpg') || file.name.endsWith('.JPG') || file.name.endsWith('.jpeg')) {
+                    const { data: publicURL } = supabase.storage.from('gallery').getPublicUrl(`our past events/${file.name}`);
+
+                    if (error) {
+                      console.error('Error getting public URL:', error);
+                      continue;
+                    }
+
+                    // console.log(publicURL);
+                    newImages.push(publicURL.publicUrl);
+                    }
+                }
+                setProgress(100);
+                setLoading(false);
+                setImages(newImages);
+            }
+        }
+        listFiles();
+
+    }, [])
+
     return (
-        <div>
-        <h1>Page</h1>
-        <Link href="/">Home</Link>
-        </div>
+        <main className="w-screen h-screen flex items-center justify-center flex-col overflow-hidden bg-[#090909]">
+            {/* Navbar */}
+            <section className="w-full h-full py-2">
+                <h1 className=" font-mono w-full text-center text-white font-semibold text-4xl mt-4">Gallery</h1>
+                {loading ? (
+                    <Progress value={progress} className="w-[80%]" />
+                ) : (
+                    <section className="w-full h-full text-white grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 3xl:grid-cols-5 justify-evenly items-center gap-4 py-12 overflow-y-auto scroll-smooth ">
+                        {images.slice(1).map((imageURL, index) => (
+                            <Card className="bg-[#262626] w-fit h-fit " key={index}>
+                                <Image src={ imageURL } alt="Gallery Image" width={300} height={300} className=" w-max h-max rounded-lg"  loading="lazy" />
+                            </Card>
+                        ))}
+                    </section>
+                )}
+            </section>
+            {/* footer */}
+        </main>
     );
 }
diff --git a/app/globals.css b/app/globals.css
@@ -73,4 +73,6 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap')
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,11 @@
-import type { Metadata } from "next";
+'use client'
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { Toaster } from "@/components/ui/sonner"
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+
 
 export default function RootLayout({
   children,
@@ -16,7 +14,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+      <Toaster className=" bg-[#090909]  text-white" />
+      </body>
     </html>
   );
 }
diff --git a/app/supabase.config.ts b/app/supabase.config.ts
@@ -0,0 +1,6 @@
+import { createClient } from "@supabase/supabase-js";
+
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_PROJECT_URL;
+const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+export const supabase = createClient(SUPABASE_URL || '', SUPABASE_ANON_KEY || '');
diff --git a/app/team/page.tsx b/app/team/page.tsx
@@ -1,10 +1,62 @@
-import Link from "next/link";
+'use client'
+import { useEffect, useState } from "react";
+import { supabase } from "../supabase.config";
+import { toast } from "sonner"
+import { Card } from "@/components/ui/card";
+import Image from "next/image";
+
+interface TeamData {
+    name: string;
+    rollno: string;
+    image: string;
+    position: string;
+    tagline: string;
+}
 
 export default function Page() {
+
+    const [teamData, setTeamData] = useState<TeamData[]>();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const { data , error } = await supabase 
+                .from('team')
+                .select(`name, rollno, image, position, tagline`)
+                .returns<TeamData[]>();
+
+            if (error) {
+                console.log('Error fetching data:', error);
+                toast.error('Error fetching data');
+                return;
+            }
+            else {
+                console.log('Data fetched successfully:', data);
+                setTeamData(data );
+                toast.success('Data fetched successfully');
+            }
+        };
+
+        fetchData();
+    }, []);
+
     return (
-        <div>
-        <h1>Page</h1>
-        <Link href="/">Home</Link>
-        </div>
+        <main className="w-screen min-h-screen h-full flex flex-col bg-[#0E0E0E] overflow-auto">
+            {/* Navbar */}
+            <section>
+                {/* Add a hero image section here */}
+            </section>
+            <h1 className=" font-lato text-white font-semibold text-4xl">Our Team</h1>
+            <section className=" grid xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 grid-cols-2">
+                {teamData && teamData.map((teamMember) => (
+                    <Card className="flex flex-col container m-2 my-4 gap-2 bg-[#262626]">
+                        <Image src={teamMember.image} alt={teamMember.name} width={100} height={100} className=" w-auto h-auto rounded-lg my-6" />
+                        <h1></h1>
+                        <p></p>
+                    </Card>
+
+                ))}
+            </section>
+            {/* footer */}
+        </main>
     );
 }
diff --git a/components/spinner/spinner.tsx b/components/spinner/spinner.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+const Spinner = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 50 50"
+        style={{ animation: 'spin 1s linear infinite' }}
+    >
+        <circle
+            cx="25"
+            cy="25"
+            r="20"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="4"
+            strokeDasharray="1, 60"
+            strokeLinecap="round"
+            style={{ strokeDashoffset: '0', animation: 'dash 1.5s ease-in-out infinite' }}
+        />
+        <style jsx>{`
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+            @keyframes dash {
+                0% {
+                    strokeDashoffset: 1;
+                }
+                50% {
+                    strokeDashoffset: 30;
+                    transform: rotate(135deg);
+                }
+                100% {
+                    strokeDashoffset: 60;
+                    transform: rotate(450deg);
+                }
+            }
+        `}</style>
+    </svg>
+);
+
+export default Spinner;
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        remotePatterns: [
+          {
+            protocol: 'https',
+            hostname: 'eedplvopkhwuhhquagfw.supabase.co',
+          },
+        ],
+      },
+};
 
 export default nextConfig;