style: implement new show card design

src/components/Podcasts/Podcasts.Lists.tsx

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled'
 import { LPE } from '../../types/lpe.types'
-import { ArrowDownIcon, Badge, Button, Typography } from '@acid-info/lsd-react'
+import { ArrowDownIcon, Button, Typography } from '@acid-info/lsd-react'
 import Link from 'next/link'
 import Image from 'next/image'
 import { Grid, GridItem } from '../Grid/Grid'
+import PodcastHost from './Podcast.Host'
 
 interface Props {
   shows: LPE.Podcast.Show[]
@@ -13,52 +14,49 @@ export default function PodcastsLists({ shows }: Props) {
   return (
     <PodcastListsContainer>
       {shows &&
-        shows.map((show) => (
-          <ShowCardContainer key={show.id} className="w-8">
-            <ShowCard>
-              <Top>
-                <ShowInfoContainer>
-                  <Image
-                    src={show.logo.url}
-                    width={38}
-                    height={38}
-                    alt={show.logo.alt}
-                  />
-                  <ShowInfo>
-                    <Typography variant="body2">{show.title}</Typography>
-                    <Typography variant="body3">
-                      {show.numberOfEpisodes} EP
-                    </Typography>
-                  </ShowInfo>
-                </ShowInfoContainer>
+        shows.map((show, idx) => {
+          const isEven = idx % 2 === 0
+          return (
+            <ShowCardContainer key={show.id} className="w-8">
+              <ShowCard isEven={isEven}>
+                <div>
+                  <Top>
+                    <ShowInfoContainer>
+                      <Image
+                        src={show.logo.url}
+                        width={38}
+                        height={38}
+                        alt={show.logo.alt}
+                      />
+                      <ShowInfo>
+                        <ColoredText isEven={isEven} variant="body2">
+                          {show.title}
+                        </ColoredText>
+                        <ColoredText isEven={isEven} variant="body3">
+                          {show.numberOfEpisodes} EP
+                        </ColoredText>
+                      </ShowInfo>
+                    </ShowInfoContainer>
+                  </Top>
+                  <ShowData isEven={isEven}>
+                    <Description
+                      dangerouslySetInnerHTML={{ __html: show.description }}
+                    />
+                    <PodcastHost show={show} />
+                  </ShowData>
+                </div>
                 <ShowButtonLink href={`/podcasts/${show.slug}`}>
-                  <ShowButton>
-                    <ShowButtonText variant="body3">
+                  <ShowButton isEven={isEven}>
+                    <ColoredText isEven={isEven} variant="body3">
                       Podcast page
-                    </ShowButtonText>
-                    <ArrowDownIcon />
+                    </ColoredText>
+                    <ArrowDownIcon color={isEven ? 'secondary' : 'primary'} />
                   </ShowButton>
                 </ShowButtonLink>
-              </Top>
-              <Bottom>
-                <Description
-                  dangerouslySetInnerHTML={{ __html: show.description }}
-                />
-                {/* @ts-ignore */}
-                {shows?.tags && (
-                  <BadgeContainer>
-                    {/* @ts-ignore */}
-                    {show.tags.map((tag) => (
-                      <Badge key={tag} size="small">
-                        {tag}
-                      </Badge>
-                    ))}
-                  </BadgeContainer>
-                )}
-              </Bottom>
-            </ShowCard>
-          </ShowCardContainer>
-        ))}
+              </ShowCard>
+            </ShowCardContainer>
+          )
+        })}
     </PodcastListsContainer>
   )
 }
@@ -74,16 +72,31 @@ const PodcastListsContainer = styled(Grid)`
 
 const ShowCardContainer = styled(GridItem)``
 
-const ShowCard = styled.div`
+const ShowCard = styled.div<{ isEven: boolean }>`
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   padding: 24px;
   border: 1px solid rgb(var(--lsd-text-primary));
+  box-sizing: border-box;
+  height: 516px;
+  background-color: ${(props) =>
+    props.isEven
+      ? 'rgb(var(--lsd-surface-secondary))'
+      : 'rgb(var(--lsd-surface-primary))'};
+
+  @media (max-width: 768px) {
+    height: 374px;
+  }
 `
 
 const ShowInfoContainer = styled.div`
   display: flex;
-  gap: 8px;
+  gap: 16px;
+
+  @media (max-width: 768px) {
+    gap: 8px;
+  }
 `
 
 const ShowInfo = styled.div`
@@ -95,40 +108,65 @@ const ShowInfo = styled.div`
 const Row = styled.div`
   display: flex;
   gap: 8px;
-  margin-bottom: 16px;
 `
 
 const Top = styled(Row)`
   justify-content: space-between;
 `
 
-const Bottom = styled.div`
-  margin-top: 88px;
+const ShowData = styled.div<{ isEven: boolean }>`
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  p,
+  span {
+    color: ${(props) =>
+      props.isEven
+        ? 'rgb(var(--lsd-text-secondary))'
+        : 'rgb(var(--lsd-text-primary))'};
+  }
 
   @media (max-width: 768px) {
-    margin-top: 64px;
+    margin-top: 57px;
   }
 `
 
+const ColoredText = styled(Typography)<{ isEven: boolean }>`
+  color: ${(props) =>
+    props.isEven
+      ? 'rgb(var(--lsd-text-secondary))'
+      : 'rgb(var(--lsd-text-primary))'};
+`
+
 const Description = styled(Typography)`
-  font-size: var(--lsd-h6-fontSize);
+  font-size: var(--lsd-h4-fontSize);
+  line-height: var(--lsd-h4-lineHeight);
 
   @media (max-width: 768px) {
-    font-size: var(--lsd-body1-fontSize);
+    font-size: var(--lsd-h6-fontSize);
+    line-height: var(--lsd-h6-lineHeight);
   }
 `
 
 const ShowButtonLink = styled(Link)`
   text-decoration: none;
+  width: fit-content;
 `
 
-const ShowButton = styled(Button)`
+const ShowButton = styled(Button)<{ isEven: boolean }>`
   display: flex;
   align-items: center;
-  padding: 6px 10px 6px 12px;
+  padding: 0 10px 0 12px;
   width: 122px;
   height: 28px;
   gap: 12px;
+  border: 1px solid
+    ${(props) =>
+      props.isEven
+        ? 'rgb(var(--lsd-border-secondary))'
+        : 'rgb(var(--lsd-border-primary))'};
 
   > span {
     width: 100%;
@@ -142,20 +180,6 @@ const ShowButton = styled(Button)`
   }
 
   @media (max-width: 768px) {
-    width: 28px;
-    height: 28px;
     padding: 7px;
   }
 `
-
-const ShowButtonText = styled(Typography)`
-  @media (max-width: 768px) {
-    display: none;
-  }
-`
-
-const BadgeContainer = styled.div`
-  margin-top: 24px;
-  display: flex;
-  gap: 8px;
-`