ar(feat) [DPCP-40]: Parse Services.

dreampipcom · Aug 25, 2024 · 3a2ea5f · 3a2ea5f
1 parent a6cdd20
commit 3a2ea5f
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 68 deletions.
diff --git a/src/atoms/10_Grid/Grid.tsx b/src/atoms/10_Grid/Grid.tsx
@@ -149,11 +149,14 @@ export const HGrid = function ({
 
   const gridRowStyles = `${clsx(gridRowSx)} ${gridColumnStyles} ${bleedStyles}`;
 
-  const mappedChildren = Children.map(children, (child: any) => (
-    <Box component="article" className={`${child?.props?.className || ''}`}>
-      {child}
-    </Box>
-  ));
+  const mappedChildren = Children.map(children, (child: any) => {
+    if (!child) return undefined;
+    return (
+      <Box component="article" className={`${child?.props?.className || ''}`}>
+        {child}
+      </Box>
+    );
+  });
 
   return (
     <Box

diff --git a/src/molecules/00_Card/Card.tsx b/src/molecules/00_Card/Card.tsx
@@ -45,6 +45,7 @@ export interface ICard {
   value?: string;
   link?: string;
   rating?: string;
+  badgeText?: string;
   badgeLink?: string;
   selected?: boolean;
   images?: string[];
@@ -56,7 +57,7 @@ export const HCard = function ({
   id = 'atom__Card',
   className = '',
   onLike = () => {},
-  rating = '4.5/5',
+  rating = '',
   link = 'https://dreampip.com',
   title = 'This is a very long title for a card to see how it displays on it.',
   description = 'This is a very long description for a card to see how it displays on it.',
@@ -66,8 +67,9 @@ export const HCard = function ({
   selected = false,
   value = '1800£',
   background = ECardBackground.NONE,
+  badgeText = 'aasda',
   badgeLink = '',
-  images = ['https://placehold.co/600x400'],
+  images = [],
   theme = 'light',
 }: ICard) {
   const gridSx = [
@@ -94,68 +96,125 @@ export const HCard = function ({
         background === ECardBackground.NONE ? undefined : EGradientVariant.WHITE
       }
     >
-      <Grid className="relative" theme={theme} full>
-        <Link href={link} faux>
-          <Image
-            src={images[0]}
-            variant={EImageVariant.SIXTEEN_PER_NINE}
-            className="col-span-full col-start-0 md:col-span-4 md:col-start-0 rounded-md overflow-hidden"
-          />
-        </Link>
-        <Review theme={theme} className="absolute left-a1 sm:top-a1 top-a2">
-          {rating}
-        </Review>
-        <Button
-          onClick={() => onLike(id)}
-          theme={theme}
-          buttonTheme={
-            selected ? EButtonTheme.PASSION_SELECTED : EButtonTheme.PASSION
-          }
-          icon={selected ? ESystemIcon.heart : ESystemIcon['heart-broken']}
-          className="absolute right-a1 sm:top-a1 top-a2"
-        />
-        <Link href={badgeLink || link} faux>
-          <BadgeChip className="absolute left-a1 bottom-a1" />
-        </Link>
-      </Grid>
+      {images.length > 0 ? (
+        <Grid className="relative" theme={theme} full>
+          <Link href={link} faux>
+            <Image
+              src={images[0]}
+              variant={EImageVariant.SIXTEEN_PER_NINE}
+              className="col-span-full col-start-0 md:col-span-4 md:col-start-0 rounded-md overflow-hidden"
+            />
+          </Link>
+          {rating ? (
+            <Review theme={theme} className="absolute left-a1 sm:top-a1 top-a2">
+              {rating}
+            </Review>
+          ) : undefined}
+          {onLike ? (
+            <Button
+              onClick={() => onLike(id)}
+              theme={theme}
+              buttonTheme={
+                selected ? EButtonTheme.PASSION_SELECTED : EButtonTheme.PASSION
+              }
+              icon={selected ? ESystemIcon.heart : ESystemIcon['heart-broken']}
+              className="absolute right-a1 sm:top-a1 top-a2"
+            />
+          ) : undefined}
+          {badgeText ? (
+            <Link href={badgeLink || link} faux>
+              <BadgeChip className="absolute left-a1 bottom-a1">
+                {badgeText}
+              </BadgeChip>
+            </Link>
+          ) : undefined}
+        </Grid>
+      ) : undefined}
       <Grid theme={theme} full className="gap-0">
         <Link href={link} title={title} faux className="flex flex-col">
-          <Typography
-            variant={TypographyVariant.H4}
-            truncate
-            className="w-full pt-a2 col-span-full col-start-0 md:col-span-full md:col-start-0"
-          >
-            {title}
-          </Typography>
-          <Typography
-            inherit
-            variant={TypographyVariant.SMALL}
-            className="w-full pt-a1 pb-0 text-neutral-light dark:text-body-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
-          >
-            {description}
-          </Typography>
-          <Typography
-            inherit
-            variant={TypographyVariant.SMALL}
-            data-lat={latlng.lat}
-            data-lng={latlng.lng}
-            className="w-full pt-a1 pb-0 text-neutral-light dark:text-body-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
-          >
-            {where}
-          </Typography>
-          <Typography
-            inherit
-            variant={TypographyVariant.SMALL}
-            className="w-full pt-0 text-neutral-light dark:text-body-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
-          >
-            {when}
-          </Typography>
-          <PriceTag
-            variant={EPriceTagVariant.NORMAL}
-            className="w-full pt-a2 pb-a0 col-span-4 col-start-0 md:col-span-4 md:col-start-0"
-          >
-            {value}
-          </PriceTag>
+          {images.length === 0 ? (
+            <Grid
+              variant={EGridVariant.TWELVE_COLUMNS}
+              bleed={EBleedVariant.ZERO}
+              className="grid gap-a2"
+            >
+              {onLike ? (
+                <Button
+                  onClick={() => onLike(id)}
+                  theme={theme}
+                  buttonTheme={
+                    selected
+                      ? EButtonTheme.PASSION_SELECTED
+                      : EButtonTheme.PASSION
+                  }
+                  icon={
+                    selected ? ESystemIcon.heart : ESystemIcon['heart-broken']
+                  }
+                  className="col-start-0 col-span-2"
+                />
+              ) : undefined}
+              {rating ? (
+                <Review theme={theme} className="col-span-4 col-start-0">
+                  {rating}
+                </Review>
+              ) : undefined}
+              {badgeText ? (
+                <Link
+                  href={badgeLink || link}
+                  faux
+                  className="col-span-4 col-start-0"
+                >
+                  <BadgeChip className="">{badgeText}</BadgeChip>
+                </Link>
+              ) : undefined}
+            </Grid>
+          ) : undefined}
+          {title ? (
+            <Typography
+              variant={TypographyVariant.H4}
+              truncate
+              className="pt-a2 w-full col-span-full col-start-0 md:col-span-full md:col-start-0"
+            >
+              {title}
+            </Typography>
+          ) : undefined}
+          {description ? (
+            <Typography
+              inherit
+              variant={TypographyVariant.SMALL}
+              className="w-full pt-a1 pb-0 text-neutral-light dark:text-body-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
+            >
+              {description}
+            </Typography>
+          ) : undefined}
+          {where ? (
+            <Typography
+              inherit
+              variant={TypographyVariant.SMALL}
+              data-lat={latlng.lat}
+              data-lng={latlng.lng}
+              className="w-full pt-a1 pb-0 text-neutral-light dark:text-body-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
+            >
+              {where}
+            </Typography>
+          ) : undefined}
+          {when ? (
+            <Typography
+              inherit
+              variant={TypographyVariant.SMALL}
+              className="w-full pt-0 text-neutral-light dark:text-body-dark col-span-full col-start-0 md:col-span-full md:col-start-0"
+            >
+              {when}
+            </Typography>
+          ) : undefined}
+          {value ? (
+            <PriceTag
+              variant={EPriceTagVariant.NORMAL}
+              className="w-full pt-a2 pb-a0 col-span-4 col-start-0 md:col-span-4 md:col-start-0"
+            >
+              {value}
+            </PriceTag>
+          ) : undefined}
         </Link>
       </Grid>
     </Grid>

diff --git a/src/molecules/01_CardGrid/CardGrid.tsx b/src/molecules/01_CardGrid/CardGrid.tsx
@@ -32,7 +32,7 @@ export const DEFAULT_CARDS = [
     price: '299€',
     link: 'https://dreampip.com',
     badgeLink: 'https://dreampip.com',
-    rating: '4.5/5',
+    rating: '',
     selected: true,
   },
   {