feat(coldsurf-io): 🎨 implemented bottom sheet features

coldsurfers · Dec 30, 2024 · bc76f7b · bc76f7b
1 parent c68902e
commit bc76f7b
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 5 deletions.
diff --git a/apps/coldsurf-io/public/product-image/billets.png b/apps/coldsurf-io/public/product-image/billets.png
diff --git a/apps/coldsurf-io/public/product-image/surf-tree.png b/apps/coldsurf-io/public/product-image/surf-tree.png
diff --git a/...rf-io/src/app/products/(ui)/product-card-bottom-sheet/product-card-bottom-sheet.styled.ts b/...rf-io/src/app/products/(ui)/product-card-bottom-sheet/product-card-bottom-sheet.styled.ts
@@ -1,4 +1,4 @@
-import { IconButton, media, semantics, Text } from '@coldsurfers/ocean-road'
+import { colors, IconButton, media, semantics, Text } from '@coldsurfers/ocean-road'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { motion } from 'framer-motion'
@@ -83,3 +83,39 @@ export const StyledDescription = styled(Text)`
     font-size: 14px;
   `)}
 `
+
+export const StyledProductImageContainer = styled.div`
+  width: 390px;
+  margin-left: auto;
+`
+
+export const StyledProductImage = styled.img`
+  aspect-ratio: 0.5625 / 1;
+  width: 100%;
+  height: auto;
+  border-radius: 20px;
+  object-fit: cover;
+  object-position: 50%;
+`
+
+export const StyledContentGrid = styled.div`
+  display: grid;
+  grid-template-areas:
+    'breadcrumbs . .'
+    'content . image'
+    'ctaButton . image'
+    'linkApps . image'
+    'tags . image';
+  grid-template-columns: 3fr 1fr;
+
+  max-width: 1200px;
+  margin: 0 auto;
+`
+
+export const StyledCtaText = styled(Text)`
+  font-size: 16px;
+  font-weight: 418;
+  letter-spacing: 0.01em;
+  line-height: 1.5;
+  color: ${colors.oc.white.value};
+`
diff --git a/...coldsurf-io/src/app/products/(ui)/product-card-bottom-sheet/product-card-bottom-sheet.tsx b/...coldsurf-io/src/app/products/(ui)/product-card-bottom-sheet/product-card-bottom-sheet.tsx
@@ -1,14 +1,18 @@
 'use client'
 
-import { Text } from '@coldsurfers/ocean-road'
+import { Button, Text } from '@coldsurfers/ocean-road'
 import { AnimatePresence } from 'framer-motion'
 import { X as XIcon } from 'lucide-react'
 import {
   CloseButton,
   Overlay,
   SheetContainer,
   SheetInner,
+  StyledContentGrid,
+  StyledCtaText,
   StyledDescription,
+  StyledProductImage,
+  StyledProductImageContainer,
   StyledTitle,
 } from './product-card-bottom-sheet.styled'
 import { ProductCardBottomSheetProps } from './product-card-bottom-sheet.types'
@@ -39,9 +43,35 @@ export function ProductCardBottomSheet({ isOpen, onClose, selectedProduct }: Pro
               <XIcon />
             </CloseButton>
             <SheetInner>
-              <Text>Products / {selectedProduct.title}</Text>
-              <StyledTitle as="h2">{selectedProduct.title}</StyledTitle>
-              <StyledDescription as="p">{selectedProduct.longDescription}</StyledDescription>
+              <StyledContentGrid>
+                <div style={{ gridArea: 'breadcrumbs', verticalAlign: 'baseline' }}>
+                  <Text as="p">Products / {selectedProduct.title}</Text>
+                </div>
+                <div
+                  style={{
+                    gridArea: 'content',
+                    minWidth: 0,
+                    marginBottom: 48,
+                    marginTop: 13,
+                    verticalAlign: 'baseline',
+                  }}
+                >
+                  <StyledTitle as="h2">{selectedProduct.title}</StyledTitle>
+                  <StyledDescription as="p">{selectedProduct.longDescription}</StyledDescription>
+                </div>
+                <div style={{ gridArea: 'ctaButton' }}>
+                  {selectedProduct.ctaTitle && (
+                    <Button onClick={() => window.open(selectedProduct.ctaLink, '_blank')}>
+                      <StyledCtaText>{selectedProduct.ctaTitle}</StyledCtaText>
+                    </Button>
+                  )}
+                </div>
+                <div style={{ gridArea: 'image' }}>
+                  <StyledProductImageContainer>
+                    <StyledProductImage src={selectedProduct.productImgSrc} />
+                  </StyledProductImageContainer>
+                </div>
+              </StyledContentGrid>
             </SheetInner>
           </SheetContainer>
         </>

diff --git a/apps/coldsurf-io/src/app/products/page.tsx b/apps/coldsurf-io/src/app/products/page.tsx
@@ -18,27 +18,35 @@ export default function ProductsPage() {
           longDescription={`I created Billets because I felt sad that lots of bands are disappearing.\nBands always healed my soul in my youth.\nBillets support local venues, so bands can be grown up from their locals.`}
           imgSrc="https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/46/e8/cd/46e8cdc3-01d8-0ebd-1ba4-305eda6e0c31/AppIcon-0-0-1x_U007emarketing-0-6-0-85-220.png/230x0w.webp"
           backgroundImgSrc="https://images.unsplash.com/photo-1513265472937-50d3e680377c?q=80&w=2669&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          productImgSrc="/product-image/billets.png"
+          ctaTitle="Get Billets"
+          ctaLink="https://billets.coldsurf.io"
         />
         <ProductCard
           title="SurfTree"
           description="All in one artist links. SurfTree"
           imgSrc="https://surf-tree.coldsurf.io/icons/favicon.ico"
           backgroundImgSrc="https://images.unsplash.com/photo-1520262494112-9fe481d36ec3?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           longDescription={`SurfTree is an artist's name card in online world.\nJust like we share our name cards in offline world, you can promote your profile with some links by sharing SurfTree.`}
+          productImgSrc="/product-image/surf-tree.png"
+          ctaTitle="Create your own SurfTree"
+          ctaLink="https://surf-tree.coldsurf.io"
         />
         <ProductCard
           title="DemoDay"
           description="Share your demo by simple links. DemoDay"
           imgSrc="https://surf-tree.coldsurf.io/icons/favicon.ico"
           backgroundImgSrc="https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           longDescription={`I think everyone has their demos. But not shared yet. It's just a sharing problem.\nDemoDay wants to solve sharing issue of artists.\nI think all artists want to share their demos.`}
+          productImgSrc="https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         />
         <ProductCard
           title="Play Together"
           description="Find your playmates with Play Together"
           imgSrc="https://surf-tree.coldsurf.io/icons/favicon.ico"
           backgroundImgSrc="https://images.unsplash.com/photo-1489641493513-ba4ee84ccea9?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           longDescription={`You are struggling with finding band mates? Or you want to find out artists groups?\nHere is Play Together.`}
+          productImgSrc="https://images.unsplash.com/photo-1489641493513-ba4ee84ccea9?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         />
       </ProductCardListLayout>
       <ProductCardBottomSheet />

diff --git a/apps/coldsurf-io/src/types/types.product.ts b/apps/coldsurf-io/src/types/types.product.ts
@@ -4,4 +4,7 @@ export type Product = {
   longDescription: string
   imgSrc: string
   backgroundImgSrc: string
+  productImgSrc: string
+  ctaTitle?: string
+  ctaLink?: string
 }