💄 (lp) Update wall of love

apps/landing-page/components/Homepage/Testimonials/Testimonial.tsx

@@ -1,46 +1,46 @@
-import { Box, Flex, HStack, Stack, Text } from '@chakra-ui/react'
+import { Avatar, Flex, HStack, Stack, Text } from '@chakra-ui/react'
 import * as React from 'react'
-import Image, { StaticImageData } from 'next/image'
-import { QuoteLeftIcon } from 'assets/icons/QuoteLeftIcon'
+import Image from 'next/image'
+import { TestimonialData } from './Testimonials'
+import {
+  CapterraIcon,
+  EmailIcon,
+  ProductHuntIcon,
+  RedditIcon,
+} from 'assets/icons'
 
-interface TestimonialProps {
-  image: StaticImageData
-  name: string
-  role: string
-  children: React.ReactNode
-}
-
-export const Testimonial = (props: TestimonialProps) => {
-  const { image, name, role, children } = props
-  return (
-    <Flex
-      flexDir="column"
-      justify="space-between"
-      as="blockquote"
-      p="6"
-      rounded="lg"
-      bgColor="gray.800"
-      color="white"
-      shadow="lg"
-      {...props}
-    >
-      <Stack>
-        <QuoteLeftIcon boxSize="25px" />
-        <Text mt="3" fontSize="xl" maxW="38rem" color="gray.400">
-          {children}
-        </Text>
-      </Stack>
-
-      <HStack mt="6" spacing="4">
-        <Image
-          src={image}
-          alt={name}
-          placeholder="blur"
-          width={80}
-          height={80}
-          className="rounded-full"
-        />
-        <Box>
+export const Testimonial = ({
+  avatarSrc,
+  content,
+  name,
+  role,
+  provider,
+}: TestimonialData) => (
+  <Stack
+    p="6"
+    rounded="lg"
+    bgColor="gray.800"
+    color="white"
+    shadow="lg"
+    spacing="4"
+    data-aos="fade"
+    data-aos-delay="500"
+  >
+    <Flex justifyContent="space-between">
+      <HStack spacing="4">
+        {avatarSrc ? (
+          <Image
+            src={avatarSrc}
+            alt={name}
+            placeholder="blur"
+            width={40}
+            height={40}
+            className="rounded-full"
+          />
+        ) : (
+          <Avatar name={name} />
+        )}
+        <Stack spacing={1}>
           <Text
             as="cite"
             fontStyle="normal"
@@ -52,8 +52,30 @@ export const Testimonial = (props: TestimonialProps) => {
           <Text fontSize="sm" color={'gray.100'}>
             {role}
           </Text>
-        </Box>
+        </Stack>
       </HStack>
+      <ProviderIcon provider={provider} />
     </Flex>
-  )
+
+    <Text mt="3" maxW="38rem" color="gray.400">
+      {content}
+    </Text>
+  </Stack>
+)
+
+const ProviderIcon = ({
+  provider,
+}: {
+  provider: TestimonialData['provider']
+}): JSX.Element => {
+  switch (provider) {
+    case 'email':
+      return <EmailIcon fontSize="20px" />
+    case 'productHunt':
+      return <ProductHuntIcon fontSize="20px" />
+    case 'capterra':
+      return <CapterraIcon fontSize="20px" />
+    case 'reddit':
+      return <RedditIcon fontSize="20px" />
+  }
 }