Merge pull request #28 from fac30/chore/update-article-links

Chore/update article links
fac30 · Feb 6, 2025 · 93c938f · 93c938f
2 parents e741253 + c8b3be2
commit 93c938f
Show file tree

Hide file tree

Showing 20 changed files with 4,740 additions and 1,474 deletions.
diff --git a/OutfitMakerComponent.tsx b/OutfitMakerComponent.tsx
@@ -0,0 +1 @@
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.1.5",
     "@react-aria/interactions": "^3.22.5",
+    "@supabase/supabase-js": "^2.47.12",
     "emailjs-com": "^3.2.0",
     "lucide-react-native": "^0.468.0",
     "native-base": "^3.4.0",

diff --git a/src/components/CategoryMenu.tsx b/src/components/CategoryMenu.tsx
@@ -1,30 +1,35 @@
-import { Box, Text, Pressable, Image, ScrollView, VStack, HStack } from "native-base";
+import {
+  Box,
+  Text,
+  Pressable,
+  Image,
+  ScrollView,
+  VStack,
+  HStack,
+} from "native-base";
 import { useState } from "react";
+import { CategoryMenuProps } from "../utils/types";
 
-
-interface ClothingItem {
-  name: string;
-  image: string;
-  category: string;
-  subcategory: string;
-}
-
-interface CategoryMenuProps {
-  categories: typeof categories;
-  onSelectItem: (item: ClothingItem) => void;
-}
-
-export default function CategoryMenu({ categories, onSelectItem }: CategoryMenuProps) {
+export default function CategoryMenu({
+  categories,
+  onSelectItem,
+}: CategoryMenuProps) {
   const [selectedCategory, setSelectedCategory] = useState(categories[0].name);
-  const [selectedSubcategory, setSelectedSubcategory] = useState(categories[0].subcategories[0].name);
+  const [selectedSubcategory, setSelectedSubcategory] = useState(
+    categories[0].subcategories[0].name
+  );
 
-  const currentCategory = categories.find(cat => cat.name === selectedCategory);
-  const currentSubcategory = currentCategory?.subcategories.find(sub => sub.name === selectedSubcategory);
+  const currentCategory = categories.find(
+    (cat) => cat.name === selectedCategory
+  );
+  const currentSubcategory = currentCategory?.subcategories.find(
+    (sub) => sub.name === selectedSubcategory
+  );
 
   return (
-    <VStack 
-      space={2} 
-      bg="primary.200" 
+    <VStack
+      space={2}
+      bg="primary.200"
       borderColor="primary.100"
       borderWidth={1}
       borderRadius="md"
@@ -43,15 +48,23 @@ export default function CategoryMenu({ categories, onSelectItem }: CategoryMenuP
                 }}
               >
                 <Box
-                  bg={selectedCategory === category.name ? "primary.100" : "primary.200"}
+                  bg={
+                    selectedCategory === category.name
+                      ? "primary.100"
+                      : "primary.200"
+                  }
                   px={3}
                   py={1}
                   borderRadius="md"
                   borderWidth={1}
                   borderColor="primary.100"
                 >
                   <Text
-                    color={selectedCategory === category.name ? "primary.200" : "primary.100"}
+                    color={
+                      selectedCategory === category.name
+                        ? "primary.200"
+                        : "primary.100"
+                    }
                     fontWeight="medium"
                     fontSize="sm"
                   >
@@ -75,15 +88,23 @@ export default function CategoryMenu({ categories, onSelectItem }: CategoryMenuP
                   onPress={() => setSelectedSubcategory(subcategory.name)}
                 >
                   <Box
-                    bg={selectedSubcategory === subcategory.name ? "primary.100" : "primary.200"}
+                    bg={
+                      selectedSubcategory === subcategory.name
+                        ? "primary.100"
+                        : "primary.200"
+                    }
                     px={3}
                     py={1}
                     borderRadius="md"
                     borderWidth={1}
                     borderColor="primary.100"
                   >
                     <Text
-                      color={selectedSubcategory === subcategory.name ? "primary.200" : "primary.100"}
+                      color={
+                        selectedSubcategory === subcategory.name
+                          ? "primary.200"
+                          : "primary.100"
+                      }
                       fontWeight="medium"
                       fontSize="sm"
                     >
@@ -108,11 +129,13 @@ export default function CategoryMenu({ categories, onSelectItem }: CategoryMenuP
           {currentSubcategory?.items.map((item, index) => (
             <Pressable
               key={index}
-              onPress={() => onSelectItem({
-                ...item,
-                category: selectedCategory,
-                subcategory: selectedSubcategory
-              })}
+              onPress={() =>
+                onSelectItem({
+                  ...item,
+                  category: selectedCategory,
+                  subcategory: selectedSubcategory,
+                })
+              }
             >
               <Box
                 m={1}
@@ -121,7 +144,6 @@ export default function CategoryMenu({ categories, onSelectItem }: CategoryMenuP
                 borderColor="primary.100"
                 borderRadius="md"
                 bg="primary.200"
-                _hover={{ opacity: 0.8 }}
               >
                 <Image
                   source={{ uri: item.image }}

diff --git a/src/components/ClosetComponent.tsx b/src/components/ClosetComponent.tsx
@@ -1,19 +1,19 @@
-import { useState } from 'react';
+import { useState } from "react";
 import { Box, Text, VStack, HStack } from "native-base";
 import { useWindowDimensions, TouchableOpacity } from "react-native";
 import PopUpGallery from "./popUpGallery";
-import { filterItemsByCategory } from '../functions/getFunction'; // Import the function to fetch items
-
-interface Category {
-  id: number;
-  name: string;
-}
+import { filterItemsByCategory } from "../functions/getFunction"; // Import the function to fetch items
+import { Category } from "../utils/types"; // Add this import
 
 export default function ClosetComponent() {
   const { width } = useWindowDimensions();
   const [isModalVisible, setModalVisible] = useState(false);
-  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
-  const [galleryItems, setGalleryItems] = useState<{ photo_link: string; item_desc: string }[]>([]); // State to hold gallery items
+  const [selectedCategory, setSelectedCategory] = useState<Category | null>(
+    null
+  );
+  const [galleryItems, setGalleryItems] = useState<
+    { photo_link: string; item_desc: string }[]
+  >([]); // State to hold gallery items
 
   // Define categories with their IDs
   const categories: Category[] = [
@@ -25,7 +25,7 @@ export default function ClosetComponent() {
   ];
 
   const openGallery = async (categoryName: string) => {
-    const category = categories.find(c => c.name === categoryName);
+    const category = categories.find((c) => c.name === categoryName);
     if (category) {
       setSelectedCategory(category);
       setModalVisible(true);
@@ -50,60 +50,175 @@ export default function ClosetComponent() {
       maxWidth="1200px"
       marginX="auto"
     >
-      <Text fontSize={{ base: "2xl", md: "4xl" }} fontWeight="bold" color="#395D51" mb={4} style={{ textTransform: "uppercase", letterSpacing: 1 }}>
+      <Text
+        fontSize={{ base: "2xl", md: "4xl" }}
+        fontWeight="bold"
+        color="#395D51"
+        mb={4}
+        style={{ textTransform: "uppercase", letterSpacing: 1 }}
+      >
         my closet
       </Text>
 
-      <VStack borderWidth={8} space={0} width="100%" borderColor="#5E5E5E" bg="#FFFFFF">
+      <VStack
+        borderWidth={8}
+        space={0}
+        width="100%"
+        borderColor="#5E5E5E"
+        bg="#FFFFFF"
+      >
         {/* Top Row */}
         <HStack space={0} width="100%" height="20%">
-          <Box flex={1} bg="#FFFFFF" justifyContent="center" alignItems="center" borderRightWidth={6} borderBottomWidth={6} borderColor="#5E5E5E">
+          <Box
+            flex={1}
+            bg="#FFFFFF"
+            justifyContent="center"
+            alignItems="center"
+            borderRightWidth={6}
+            borderBottomWidth={6}
+            borderColor="#5E5E5E"
+          >
             <TouchableOpacity onPress={() => openGallery("Tops")}>
-              <Text color="#4A4A4A" fontSize="sm" textAlign="center">tops</Text>
+              <Text color="#4A4A4A" fontSize="sm" textAlign="center">
+                tops
+              </Text>
             </TouchableOpacity>
           </Box>
-          <Box flex={1} bg="#FFFFFF" justifyContent="center" alignItems="center" borderBottomWidth={6} borderColor="#5E5E5E">
+          <Box
+            flex={1}
+            bg="#FFFFFF"
+            justifyContent="center"
+            alignItems="center"
+            borderBottomWidth={6}
+            borderColor="#5E5E5E"
+          >
             <TouchableOpacity onPress={() => openGallery("Jumpers")}>
-              <Text color="#4A4A4A" fontSize="sm" textAlign="center">jumpers</Text>
+              <Text color="#4A4A4A" fontSize="sm" textAlign="center">
+                jumpers
+              </Text>
             </TouchableOpacity>
           </Box>
         </HStack>
 
         {/* Middle Row */}
         <HStack space={0} width="100%">
-          <VStack flex={1} height="250px" borderRightWidth={6} borderColor="#5E5E5E">
-            <Box flex={2} bg="#FFFFFF" justifyContent="center" alignItems="center" borderColor="#5E5E5E">
+          <VStack
+            flex={1}
+            height="250px"
+            borderRightWidth={6}
+            borderColor="#5E5E5E"
+          >
+            <Box
+              flex={2}
+              bg="#FFFFFF"
+              justifyContent="center"
+              alignItems="center"
+              borderColor="#5E5E5E"
+            >
               <TouchableOpacity onPress={() => openGallery("Dresses/Skirts")}>
-                <Text color="#4A4A4A" fontSize="sm" textAlign="center">dresses/ skirts</Text>
+                <Text color="#4A4A4A" fontSize="sm" textAlign="center">
+                  dresses/ skirts
+                </Text>
               </TouchableOpacity>
-              <Box position="absolute" bottom={160} height="4px" width="100%" bg="#B0B0B0"></Box>
+              <Box
+                position="absolute"
+                bottom={160}
+                height="4px"
+                width="100%"
+                bg="#B0B0B0"
+              ></Box>
             </Box>
 
-            <Box flex={0.6} bg="#5E5E5E" borderTopWidth={6} borderColor="#5E5E5E" position="relative">
+            <Box
+              flex={0.6}
+              bg="#5E5E5E"
+              borderTopWidth={6}
+              borderColor="#5E5E5E"
+              position="relative"
+            >
               {/* Drawer Handles */}
-              <Box position="absolute" top="15%" height="2px" width="80%" bg="#FFFFFF" alignSelf="center"></Box>
-              <Box position="absolute" top="35%" height="2px" width="80%" bg="#FFFFFF" alignSelf="center"></Box>
-              <Box position="absolute" top="55%" height="2px" width="80%" bg="#FFFFFF" alignSelf="center"></Box>
-              <Box position="absolute" top="75%" height="2px" width="80%" bg="#FFFFFF" alignSelf="center"></Box>
+              <Box
+                position="absolute"
+                top="15%"
+                height="2px"
+                width="80%"
+                bg="#FFFFFF"
+                alignSelf="center"
+              ></Box>
+              <Box
+                position="absolute"
+                top="35%"
+                height="2px"
+                width="80%"
+                bg="#FFFFFF"
+                alignSelf="center"
+              ></Box>
+              <Box
+                position="absolute"
+                top="55%"
+                height="2px"
+                width="80%"
+                bg="#FFFFFF"
+                alignSelf="center"
+              ></Box>
+              <Box
+                position="absolute"
+                top="75%"
+                height="2px"
+                width="80%"
+                bg="#FFFFFF"
+                alignSelf="center"
+              ></Box>
             </Box>
           </VStack>
 
-          <Box flex={1} height="250px" bg="#FFFFFF" justifyContent="center" alignItems="center" borderBottomWidth={2} borderColor="#5E5E5E">
+          <Box
+            flex={1}
+            height="250px"
+            bg="#FFFFFF"
+            justifyContent="center"
+            alignItems="center"
+            borderBottomWidth={2}
+            borderColor="#5E5E5E"
+          >
             <TouchableOpacity onPress={() => openGallery("Jackets/Coats")}>
-              <Text color="#4A4A4A" fontSize="sm" textAlign="center">jackets/ coats</Text>
+              <Text color="#4A4A4A" fontSize="sm" textAlign="center">
+                jackets/ coats
+              </Text>
             </TouchableOpacity>
-            <Box position="absolute" bottom={232} height="4px" width="100%" bg="#B0B0B0"></Box>
+            <Box
+              position="absolute"
+              bottom={232}
+              height="4px"
+              width="100%"
+              bg="#B0B0B0"
+            ></Box>
           </Box>
         </HStack>
 
         {/* Bottom Row */}
-        <Box height="90px" bg="#FFFFFF" justifyContent="center" alignItems="center" borderTopWidth={3} borderColor="#5E5E5E">
+        <Box
+          height="90px"
+          bg="#FFFFFF"
+          justifyContent="center"
+          alignItems="center"
+          borderTopWidth={3}
+          borderColor="#5E5E5E"
+        >
           <TouchableOpacity onPress={() => openGallery("Trousers")}>
-            <Text color="#4A4A4A" fontSize="sm" textAlign="center">trousers</Text>
+            <Text color="#4A4A4A" fontSize="sm" textAlign="center">
+              trousers
+            </Text>
           </TouchableOpacity>
         </Box>
 
-        <Box width="100%" height="130px" borderTopWidth={4} borderColor="#5E5E5E" position="relative"></Box>
+        <Box
+          width="100%"
+          height="130px"
+          borderTopWidth={4}
+          borderColor="#5E5E5E"
+          position="relative"
+        ></Box>
       </VStack>
 
       {/* PopUpGallery Component */}
@@ -117,4 +232,4 @@ export default function ClosetComponent() {
       )}
     </Box>
   );
-}
+}