fixed popular projects section, carousel out of place

GenerateNU · Dec 3, 2024 · a872684 · a872684
1 parent 88291d0
commit a872684
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 21 deletions.
diff --git a/frontend/src/screens/explore/components/ExploreCategoryCard.tsx b/frontend/src/screens/explore/components/ExploreCategoryCard.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { View, Text, Image, TouchableOpacity } from 'react-native';
 import { styled } from 'nativewind';
 import Card from '../../../components/Card';
+import NoPaddingCard from './NoPaddingCard';
 
 const StyledText = styled(Text);
 const StyledImage = styled(Image);
@@ -10,16 +11,18 @@ const StyledView = styled(View);
 
 const CategoryCard = ({ category, image }) => {
   return (
-    <View style={{ width: 150, height: 150 }}>
-      <Card>
-        <StyledTouchableOpacity activeOpacity={0.8} accessibilityRole='button' className=''>
-          <StyledImage source={image} className='w-full h-full opacity-80' />
-          <StyledText className='font-sourceSans3Bold absolute bottom-0 left-0 right-0 bg-white/50 p-2'>
-            {category}
-          </StyledText>
-        </StyledTouchableOpacity>
-      </Card>
-    </View>
+    <StyledView className='pt-[1vh] pb-[1vh]'>
+      <View style={{ width: 170, height: 170 }}>
+        <NoPaddingCard>
+          <StyledTouchableOpacity activeOpacity={0.8} accessibilityRole='button' className=''>
+            <StyledImage source={image} className='w-full h-full opacity-80 rounded-[16px]' />
+            <StyledText className='font-sourceSans3Bold absolute bottom-0 left-0 right-0 bg-white/50 p-2'>
+              {category}
+            </StyledText>
+          </StyledTouchableOpacity>
+        </NoPaddingCard>
+      </View>
+    </StyledView>
   );
 };
 

diff --git a/frontend/src/screens/explore/components/NoPaddingCard.tsx b/frontend/src/screens/explore/components/NoPaddingCard.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+import { styled } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const StyledView = styled(View);
+
+const cardVariants = cva('bg-white rounded-[16px]', {
+  variants: {},
+  defaultVariants: {},
+});
+
+interface CardProps extends ViewProps, VariantProps<typeof cardVariants> {
+  children: React.ReactNode;
+}
+
+export function NoPaddingCard({
+  children,
+  className,
+  ...props
+}: CardProps & { className?: string }) {
+  return (
+    <StyledView className={`${cardVariants()} ${className || ''}`} {...props}>
+      {children}
+    </StyledView>
+  );
+}
+
+export default NoPaddingCard;
diff --git a/frontend/src/screens/explore/explore.tsx b/frontend/src/screens/explore/explore.tsx
@@ -46,7 +46,7 @@ export default function ExploreScreen({ navigation }: ExploreScreenProps) {
       </StyledView>
 
       {/* Carousel Section */}
-      <StyledView className='pl-[2vh] pr-[2vh] pb-[3vh]'>
+      <StyledView className='pl-[2vh] pr-[2vh] pb-[3vh] pt-[3vh]'>
         <GenericCarousel
           components={[
             <PropertyCard
@@ -70,17 +70,18 @@ export default function ExploreScreen({ navigation }: ExploreScreenProps) {
       </StyledView>
 
       {/* Popular Projects */}
-      <StyledView className='pl-[2vh] pt-[2vh]'>
+      <StyledView className='pl-[2vh] pt-[2vh] pb-[10vh]'>
         <StyledText className='text-3xl font-nunitoSemiBold mb-2'>Popular Projects</StyledText>
-
-        <SideBySide
-          leftComponent={<CategoryCard category='Residential' image={residential} />}
-          rightComponent={<CategoryCard category='Commercial' image={commercial1} />}
-        />
-        <SideBySide
-          leftComponent={<CategoryCard category='Newly Added' image={newlyAdded} />}
-          rightComponent={<CategoryCard category='Popular' image={commercial2} />}
-        />
+        <StyledView className='pr-[2vh]'>
+          <SideBySide
+            leftComponent={<CategoryCard category='Residential' image={residential} />}
+            rightComponent={<CategoryCard category='Commercial' image={commercial1} />}
+          />
+          <SideBySide
+            leftComponent={<CategoryCard category='Newly Added' image={newlyAdded} />}
+            rightComponent={<CategoryCard category='Popular' image={commercial2} />}
+          />
+        </StyledView>
       </StyledView>
     </StyledView>
   );