Fixed a couple of stuff

ulf-frostypaw · May 7, 2022 · 135d20a · 135d20a
1 parent ae3441d
commit 135d20a
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 37 deletions.
diff --git a/public/images/Login.svg b/public/images/Login.svg
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -1,13 +1,14 @@
-import { LoadingGalleryItem } from "./GalleryItem"
+import GalleryItem, { LoadingGalleryItem } from "./GalleryItem"
 import styles from "../styles/Carousel.module.scss"
+import { Fursona } from "../utils/types"
 
 interface ICarouselProps {
   title: string
   type: "normal" | "popular" | "new"
-  items?: any[] // TODO: define type
+  items?: Fursona[];
 }
 
-const Carousel = ({ title, type }: ICarouselProps) => {
+const Carousel = ({ title, type, items = [] }: ICarouselProps) => {
   return (
     <div id={styles.carousel}>
       <h2
@@ -22,22 +23,28 @@ const Carousel = ({ title, type }: ICarouselProps) => {
         {title}
       </h2>
       <div id={styles["carousel-container"]}>
-        <div id={styles['control-wrapper']}>
+        <div id={styles["control-wrapper"]}>
           <button id={styles.control}>
             <i className="fa-solid fa-angle-left" />
           </button>
         </div>
         <div id={styles["card-wrapper"]}>
           <div id={styles["cards"]}>
-            <LoadingGalleryItem />
-            <LoadingGalleryItem />
-            <LoadingGalleryItem />
-            <LoadingGalleryItem />
-            <LoadingGalleryItem />
-            <LoadingGalleryItem />
+            {items.length >= 5
+              ? items.map((item, index) => (
+                  <GalleryItem key={index} {...item} />
+                ))
+              : items.map((item, index) => (
+                  <GalleryItem key={index} {...item} />
+                ))}
+            {Array(5 - items.length)
+              .fill(0)
+              .map((_, index) => (
+                <LoadingGalleryItem key={index} />
+              ))}
           </div>
         </div>
-        <div id={styles['control-wrapper']}>
+        <div id={styles["control-wrapper"]}>
           <button id={styles.control}>
             <i className="fa-solid fa-angle-right" />
           </button>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -7,10 +7,12 @@ import { useEffect, useState } from "react"
 import UnderConstruction from "../components/UnderConstruction"
 import Carousel from "../components/Carousel"
 import styles2 from "../styles/Carousel.module.scss"
+import { Fursona } from "../utils/types"
 
 export default function Home() {
-  const [data, setData] = useState(null)
+  const [data, setData] = useState<Fursona[]>([])
   const [loading, setLoading] = useState(true)
+
   useEffect(() => {
     // ! Disabled temporarily for debugging front-end stuff
     // const fetchFursona = (async () => {
@@ -19,6 +21,16 @@ export default function Home() {
     //   setLoading(false)
     //   return setData(fursonas)
     // })();
+    setData([
+      {
+        avatar: "/images/ozzy.png",
+        name: "Ozzy",
+        gradientCSS: "linear-gradient(to bottom, #f8b195 0%, #f67280 100%)",
+        link: "/user/2342349824",
+        primaryColor: "#f8b195",
+        species: "Otter"
+      }
+    ])
   }, [])
   return (
     <Container>
@@ -58,24 +70,7 @@ export default function Home() {
         </div>
         <div className={styles["fursona-main-showcase"]}>
           <section>
-            <h2 id={styles.labelPopular}>Popular Fursonas</h2>
-            <div className={"fursona-gallery-grid"}>
-              <GalleryItem
-                avatar={"/images/ozzy.png"}
-                name={"Ozzy"}
-                species={"Otter"}
-                gradientCSS={
-                  "linear-gradient(228.09deg, #AB41FF 0%, #FF248D 100%)"
-                }
-                primaryColor={"black"}
-                link={"/user"}
-              />
-
-              <LoadingGalleryItem />
-              <LoadingGalleryItem />
-              <LoadingGalleryItem />
-              <LoadingGalleryItem />
-            </div>
+           <Carousel title="Popular Fursonas" type="popular" items={data} />
           </section>
           <section id={styles["card-previews"]}>
             <Carousel title={"New Fursonas"} type="new" />

diff --git a/src/styles/Carousel.module.scss b/src/styles/Carousel.module.scss
@@ -89,4 +89,10 @@
   overflow-x: hidden;
   // overflow-y: hidden;
   width: max-content;
+  padding: 15px 0;
 }
+
+#card-wrapper {
+  overflow-x: scroll;
+  margin: 0 10px; 
+}
diff --git a/src/styles/GalleryItem.module.scss b/src/styles/GalleryItem.module.scss
@@ -4,10 +4,9 @@
   @include flexbox(column, center, center);
   border-radius: var(--gallery-r-item);
   transition: transform 300ms ease;
-  flex-basis: 20%;
-  height: 250px;
-  width: 285px;
-
+  height: 295px;
+  width: 295px;
+  margin: 0 7px;
   img {
     width: 110px;
     height: 110px;
@@ -27,7 +26,7 @@
   }
 
   &:hover {
-    transform: translateY(-3px);
+    transform: translateY(-10px);
   }
 }
 
@@ -39,8 +38,8 @@
   align-items: center;
   justify-content: center;
   border-radius: var(--gallery-r-item);
-  height: 280px;
-  width: 280px;
+  height: 295px;
+  width: 295px;
   margin: 0 7px;
   @include skeletonPulse();
 

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -0,0 +1,8 @@
+export interface Fursona {
+  avatar: string
+  name: string
+  species: string
+  primaryColor: string
+  link: string
+  gradientCSS: string
+}