rm mosaic logic from client side channel card, adjust small generic t…

…humbnail comp
1ifeworld · May 31, 2024 · f679ba2 · f679ba2
1 parent 9889945
commit f679ba2
Showing 1 changed file with 35 additions and 73 deletions.
diff --git a/apps/site/components/client/ChannelCard2.tsx b/apps/site/components/client/ChannelCard2.tsx
@@ -2,7 +2,7 @@ import {
   IMAGE_THUMBNAIL_TYPES_TO_RENDER,
   VIDEO_THUMBNAIL_TYPES_TO_RENDER,
 } from '@/constants'
-import { Flex, Grid, Stack, Typography, Public } from '@/design-system'
+import { Flex, Stack, Typography, Public } from '@/design-system'
 import type { Channel, ChannelRoles } from '@/gql'
 import Image from 'next/image'
 import { GenericThumbnailSmall } from '@/server'
@@ -31,82 +31,44 @@ export function ChannelCard2({
   return (
     <Flex className="w-full gap-x-3 items-center">
       <div>
-        {(metadata?.length as number) < 4 ? (
-          IMAGE_THUMBNAIL_TYPES_TO_RENDER.includes(
+        {IMAGE_THUMBNAIL_TYPES_TO_RENDER.includes(
+          metadata[0]?.itemMetadata?.contentType as string,
+        ) ? (
+          <Image
+            src={w3sUrlFromCid({
+              cid: metadata[0]?.itemMetadata?.image as string,
+            })}
+            alt={metadata[0]?.itemMetadata?.name as string}
+            width={imageBoxWidth}
+            height={imageBoxWidth}
+            className="object-cover aspect-square"
+          />
+        ) : VIDEO_THUMBNAIL_TYPES_TO_RENDER.includes(
             metadata[0]?.itemMetadata?.contentType as string,
           ) ? (
-            <Image
-              src={w3sUrlFromCid({
-                cid: metadata[0]?.itemMetadata?.image as string,
-              })}
-              alt={metadata[0]?.itemMetadata?.name as string}
-              width={imageBoxWidth}
-              height={imageBoxWidth}
-              className="object-cover aspect-square"
-            />
-          ) : VIDEO_THUMBNAIL_TYPES_TO_RENDER.includes(
-              metadata[0]?.itemMetadata?.contentType as string,
-            ) ? (
-            <Image
-              className="object-contain"
-              src={`https://image.mux.com/${metadata[0]?.itemMetadata?.muxPlaybackId}/thumbnail.png?width=${imageBoxWidth}&height=${imageBoxWidth}&fit_mode=smartcrop&time=35`}
-              alt={metadata[0]?.itemMetadata?.name as string}
-              quality={25}
-              width={imageBoxWidth}
-              height={imageBoxWidth}
-            />
-          ) : (
-            <div className="w-full">
-              {metadata?.length ? (
-                <GenericThumbnailSmall
-                  className="border-border border-[0.5px] h-16 w-16 md:w-16 md:h-16"
-                  text={metadata[0]?.itemMetadata?.contentType as string}
-                />
-              ) : (
-                <Flex className="bg-[#E9E9E9] justify-center items-center aspect-square w-16">
-                  <Typography className="text-secondary-foreground">
-                    No items
-                  </Typography>
-                </Flex>
-              )}
-            </div>
-          )
+          <Image
+            className="object-contain"
+            src={`https://image.mux.com/${metadata[0]?.itemMetadata?.muxPlaybackId}/thumbnail.png?width=${imageBoxWidth}&height=${imageBoxWidth}&fit_mode=smartcrop&time=35`}
+            alt={metadata[0]?.itemMetadata?.name as string}
+            quality={25}
+            width={imageBoxWidth}
+            height={imageBoxWidth}
+          />
         ) : (
-          <Grid className="grid-cols-2 grid-rows-2 aspect-square relative">
-            {/* biome-ignore lint: */}
-            {metadata?.map((item: any, index: number) =>
-              IMAGE_THUMBNAIL_TYPES_TO_RENDER.includes(
-                metadata[index]?.itemMetadata?.contentType as string,
-              ) ? (
-                <Image
-                  key={index}
-                  src={w3sUrlFromCid({
-                    cid: metadata[index]?.itemMetadata?.image as string,
-                  })}
-                  alt={metadata[index]?.itemMetadata?.name as string}
-                  width={imageBoxWidth / 2}
-                  height={imageBoxWidth / 2}
-                  className="object-cover aspect-square"
-                />
-              ) : VIDEO_THUMBNAIL_TYPES_TO_RENDER.includes(
-                  metadata[index]?.itemMetadata?.contentType as string,
-                ) ? (
-                <Image
-                  className="object-contain"
-                  src={`https://image.mux.com/${metadata[index]?.itemMetadata?.muxPlaybackId}/thumbnail.png?width=${imageBoxWidth}&height=${imageBoxWidth}&fit_mode=smartcrop&time=35`}
-                  alt={metadata[index]?.itemMetadata?.name as string}
-                  quality={25}
-                  width={imageBoxWidth / 2}
-                  height={imageBoxWidth / 2}
-                />
-              ) : (
-                <GenericThumbnailSmall
-                  className="border-border border-[0.25px] w-8 h-8 md:w-8 md:h-8"
-                  text={metadata[index]?.itemMetadata?.contentType as string}
-                />
-              ),
+          <div className="w-full">
+            {metadata?.length ? (
+              <GenericThumbnailSmall
+                className="h-16 w-16 md:w-16 md:h-16"
+                text={metadata[0]?.itemMetadata?.contentType as string}
+              />
+            ) : (
+              <Flex className="bg-[#E9E9E9] justify-center items-center aspect-square w-16">
+                <Typography className="text-secondary-foreground">
+                  No items
+                </Typography>
+              </Flex>
             )}
-          </Grid>
+          </div>
         )}
       </div>
       <Stack className="gap-y-[3px]">