fill data

Weminal-labs · Nov 11, 2024 · 803f166 · 803f166
1 parent 95991dd
commit 803f166
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 139 deletions.
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -12,10 +12,10 @@ const About = () => {
     >
       <div
         className={`
-        col-span-1 hidden h-full
+          col-span-1 hidden h-full
 
-        md:block
-      `}
+          md:block
+        `}
       >
         <div
           style={{ height: 'calc(100% - calc(0.25rem * 40))' }}
@@ -24,10 +24,10 @@ const About = () => {
       </div>
       <div
         className={`
-        col-span-3 flex h-full items-center justify-center border-x py-20
+          col-span-3 flex h-full items-center justify-center border-x py-20
 
-        md:col-span-1
-      `}
+          md:col-span-1
+        `}
       >
         <div
           className={`
@@ -47,10 +47,10 @@ const About = () => {
       </div>
       <div
         className={`
-        col-span-1 hidden h-full
+          col-span-1 hidden h-full
 
-        md:block
-      `}
+          md:block
+        `}
       >
         <div
           style={{ height: 'calc(100% - calc(0.25rem * 40))' }}

diff --git a/src/components/Awards.tsx b/src/components/Awards.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { Loader } from 'lucide-react'
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import { Autoplay } from 'swiper/modules'
 import { Swiper, type SwiperProps, SwiperSlide } from 'swiper/react'
@@ -104,18 +105,21 @@ const Awards = () => {
           <Swiper
             {...swiperConfig}
             className={`
-              col-span-3 mt-4 size-full
+              col-span-3 mt-4 size-full h-48
 
               md:mt-8
             `}
           >
             {awards.map((m) => (
               <SwiperSlide key={m.id}>
-                <div className="h-full">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                  Necessitatibus, aperiam. Itaque autem facilis cupiditate
-                  similique quas, mollitia est deleniti quod veritatis rerum
-                  illo quis neque, ipsam vero quibusdam officia nisi.
+                <div className="relative size-full overflow-hidden rounded-lg">
+                  <Image
+                    src={m.img}
+                    alt=""
+                    sizes="auto"
+                    fill
+                    className="object-cover object-center"
+                  />
                 </div>
               </SwiperSlide>
             ))}

diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
@@ -1,127 +1,30 @@
+'use client'
+import React, { useEffect } from 'react'
+
 import { HeroParallax } from '@/components/ui/hero-parallax'
 import { SECTION_IDS } from '@/constants'
+import { supabase } from '@/lib/supabase/client'
 
-export const projects = [
-  {
-    title: 'Moonbeam1',
-    link: 'https://gomoonbeam.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
-  },
-  {
-    title: 'Moonbeam2',
-    link: 'https://gomoonbeam.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
-  },
-  {
-    title: 'Moonbeadasdqm',
-    link: 'https://gomoonbeam.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
-  },
-  {
-    title: 'Moonwqeqw  asdbeam',
-    link: 'https://gomoonbeam.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
-  },
-  {
-    title: 'MoonaSD ASbeam',
-    link: 'https://gomoonbeam.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/moonbeam.png',
-  },
-  {
-    title: 'Curso142314r',
-    link: 'https://cursor.so',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/cursor.png',
-  },
-  {
-    title: 'Ro3241234123 gue',
-    link: 'https://userogue.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/rogue.png',
-  },
-
-  {
-    title: 'Editosadascasrially',
-    link: 'https://editorially.org',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/editorially.png',
-  },
-  {
-    title: 'Edizxcvzxctrix AI',
-    link: 'https://editrix.ai',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/editrix.png',
-  },
-  {
-    title: 'Pixezxcvzxcvl Perfect',
-    link: 'https://app.pixelperfect.quest',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/pixelperfect.png',
-  },
+interface Project {
+  title: string
+  link: string
+  thumbnail: string
+}
 
-  {
-    title: 'Algocfsadfasdhurn',
-    link: 'https://algochurn.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/algochurn.png',
-  },
-  {
-    title: 'Aceterfasdfasdnity UI',
-    link: 'https://ui.aceternity.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/aceternityui.png',
-  },
-  {
-    title: 'Tailwinfasdfasdd Master Kit',
-    link: 'https://tailwindmasterkit.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/tailwindmasterkit.png',
-  },
-  {
-    title: 'SmartASDASdBridge',
-    link: 'https://smartbridgetech.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/smartbridge.png',
-  },
-  {
-    title: 'Renderworsdfsdfk Studio',
-    link: 'https://renderwork.studio',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/renderwork.png',
-  },
+const Projects = () => {
+  const [projects, setProjects] = React.useState<Project[]>([])
+  const [isLoading, setIsLoading] = React.useState(false)
 
-  {
-    title: 'Creme dnjfdDigital',
-    link: 'https://cremedigital.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/cremedigital.png',
-  },
-  {
-    title: 'Golden BeldASDls Academy',
-    link: 'https://goldenbellsacademy.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/goldenbellsacademy.png',
-  },
-  {
-    title: 'Invoker asdfhdgfLabs',
-    link: 'https://invoker.lol',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/invoker.png',
-  },
-  {
-    title: 'E Free Inhaefgadszsvoice',
-    link: 'https://efreeinvoice.com',
-    thumbnail:
-      'https://aceternity.com/images/products/thumbnails/new/efreeinvoice.png',
-  },
-]
+  useEffect(() => {
+    const fetchProjects = async () => {
+      setIsLoading(true)
+      const { data } = await supabase.from('projects').select('*')
+      setIsLoading(false)
+      setProjects(data as Project[])
+    }
 
-const Projects = () => {
+    fetchProjects()
+  }, [])
   return (
     <div id={SECTION_IDS.PROJECTS}>
       <HeroParallax products={projects} />

diff --git a/src/components/ui/hero-parallax.tsx b/src/components/ui/hero-parallax.tsx
@@ -20,9 +20,9 @@ export const HeroParallax = ({
     thumbnail: string
   }[]
 }) => {
-  const firstRow = products.slice(0, 5)
-  const secondRow = products.slice(5, 10)
-  const thirdRow = products.slice(10, 15)
+  const firstRow = products.slice(0, 4)
+  const secondRow = products.slice(5, 11)
+  const thirdRow = products.slice(12, 20)
   const ref = React.useRef(null)
   const { scrollYProgress } = useScroll({
     target: ref,
@@ -165,8 +165,7 @@ export const ProductCard = ({
       key={product.title}
       className="group/product relative h-96 w-[30rem] shrink-0"
     >
-      <Link
-        href={product.link}
+      <div
         className={`
           block overflow-hidden rounded-lg
 
@@ -182,7 +181,7 @@ export const ProductCard = ({
           `}
           alt={product.title}
         />
-      </Link>
+      </div>
       <div
         className={`
           pointer-events-none absolute inset-0 size-full rounded-lg bg-black