feat: add dates to faq card

vtexdocs · Feb 9, 2024 · 8f46090 · 8f46090
1 parent e2a5298
commit 8f46090
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/faq-card/index.tsx b/src/components/faq-card/index.tsx
@@ -4,8 +4,18 @@ import type { FaqCardDataElement } from 'utils/typings/types'
 
 import styles from './styles'
 import Tag from 'components/tag'
+import DateText from 'components/date-text'
+
+const FaqCard = ({
+  title,
+  productTeam,
+  slug,
+  createdAt,
+  updatedAt,
+}: FaqCardDataElement) => {
+  const createdAtDate = new Date(createdAt)
+  const updatedAtDate = new Date(updatedAt)
 
-const FaqCard = ({ title, productTeam, slug }: FaqCardDataElement) => {
   return (
     <Link href={`faq/${slug}`}>
       <Box sx={styles.container}>
@@ -15,6 +25,7 @@ const FaqCard = ({ title, productTeam, slug }: FaqCardDataElement) => {
         <Text sx={styles.title} className="title">
           {title}
         </Text>
+        <DateText createdAt={createdAtDate} updatedAt={updatedAtDate} />
       </Box>
     </Link>
   )

diff --git a/src/components/faq-card/styles.ts b/src/components/faq-card/styles.ts
@@ -1,8 +1,8 @@
 import type { SxStyleProp } from '@vtex/brand-ui'
 
 const container: SxStyleProp = {
-  px: ['32px', '64px'],
-  py: ['16px', '24px'],
+  px: ['32px', '32px', '36px', '64px'],
+  py: '24px',
   display: 'flex',
   flexDirection: 'column',
   gap: '16px',