Testimonials List Component

src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx

@@ -15,7 +15,7 @@ interface Fields {
 }
 
 // Define the type of props for an Person
-interface Person {
+export interface Person {
   /** Display name of the person item */
   displayName: string;
 

src/Project/Sugcon2024/Sugcon/src/components/List Components/TestimonialList.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Box, Flex, Text, Image, Heading } from '@chakra-ui/react';
+import clsx from 'clsx';
+import { LayoutFlex } from 'components/Templates/LayoutFlex';
+
+// Define the type of props that Testimonial List will accept
+interface Fields {
+  /** Testimonial */
+  Testimonials: Array<Testimonial>;
+}
+
+// Define the type of props for a Person
+interface Testimonial {
+  displayName: string;
+
+  fields: {
+    Testimonial: {
+      value: string;
+    };
+    Name: {
+      value: string;
+    };
+    Role: {
+      value: string;
+    };
+    Image: {
+      value: {
+        src: string;
+      };
+    };
+  };
+
+  /** The item id of the testimonial item */
+  id: string;
+
+  /** Name of the person item */
+  name: string;
+
+  /** Url of the person item */
+  url: string;
+}
+
+export type TestimonialListProps = {
+  params: { [key: string]: string };
+  fields: Fields;
+};
+
+export const Default = (props: TestimonialListProps): JSX.Element => {
+  return (
+    <LayoutFlex
+      direction="column"
+      className={clsx('testimonial-list-container', props?.params?.Styles)}
+    >
+      <Heading as="h2" size="lg" mb={8}>
+        What people say
+      </Heading>
+      <Flex
+        direction={['column', 'column', 'row']}
+        wrap="wrap"
+        justifyContent="space-between"
+        gap={6}
+      >
+        {props.fields.Testimonials.map((testimonial) => (
+          <Box
+            key={testimonial.id}
+            p={6}
+            bg="#F2F2F2"
+            borderRadius="20px"
+            display="flex"
+            flexDirection="column"
+            alignItems="flex-start"
+            maxW="sm"
+          >
+            <Flex alignItems="center" mb={4}>
+              <Image
+                src={testimonial.fields.Image.value?.src}
+                alt={testimonial.fields.Name.value}
+                borderRadius="full"
+                boxSize="75px"
+                mr={4}
+              />
+              <Flex direction="column" alignContent="center">
+                <Text fontWeight="bold" fontSize="lg" mb={0}>
+                  {testimonial.fields.Name.value},
+                </Text>
+                <Text fontWeight="bold" fontSize="lg" mb={0}>
+                  {testimonial.fields.Role.value}
+                </Text>
+              </Flex>
+            </Flex>
+            <Text fontSize="lg" color="#4D4D4D" mt={2}>
+              “{testimonial.fields.Testimonial.value}”
+            </Text>
+          </Box>
+        ))}
+      </Flex>
+    </LayoutFlex>
+  );
+};

src/Project/Sugcon2024/items/Branches/Sugcon2024/List Components/Available Headless List Components Renderings/_name.yml

@@ -6,7 +6,9 @@ Path: /sitecore/templates/Branches/Project/Sugcon2024/List Components/Available
 SharedFields:
 - ID: "715ae6c0-71c8-4744-ab4f-65362d20ad65"
   Hint: Renderings
-  Value: "{53331DB4-9E80-4727-B7A6-2617BEA59142}"
+  Value: |
+    {53331DB4-9E80-4727-B7A6-2617BEA59142}
+    {B1BA2D1B-00EC-4A50-B317-45021D92F192}
 Languages:
 - Language: en
   Versions:
@@ -21,11 +23,11 @@ Languages:
         sitecore\admin
     - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
       Hint: __Revision
-      Value: "6d01552e-a731-4168-9675-8c0f7c0e5419"
+      Value: "7a92c2f3-a17e-4423-bd64-585915060941"
     - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
       Hint: __Updated by
       Value: |
-        sitecore\UOUBIWQRx7
+        sitecore\B8tFS9iKgv
     - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
       Hint: __Updated
-      Value: 20240213T195425Z
+      Value: 20240514T014533Z

src/Project/Sugcon2024/items/Renderings/Sugcon2024/List Components/Testimonial List.yml

@@ -0,0 +1,145 @@
+---
+ID: "b1ba2d1b-00ec-4a50-b317-45021d92f192"
+Parent: "5df94a9a-5713-4c62-930f-6670e83dba1d"
+Template: "04646a89-996f-4ee7-878a-ffdbf1f0ef0d"
+Path: /sitecore/layout/Renderings/Project/Sugcon2024/List Components/Testimonial List
+SharedFields:
+- ID: "037fe404-dd19-4bf7-8e30-4dadf68b27b0"
+  Hint: componentName
+  Value: TestimonialList
+- ID: "06d5295c-ed2f-4a54-9bf2-26228d113318"
+  Hint: __Icon
+  Value: Office/32x32/users_crowd.png
+- ID: "1a7c85e5-dc0b-490d-9187-bb1dbcb4c72f"
+  Hint: Datasource Template
+  Value: /sitecore/templates/Project/Sugcon2024/List Components/Testimonial List
+- ID: "7d8ae35f-9ed1-43b5-96a2-0a5f040d4e4e"
+  Hint: Open Properties after Add
+  Value: 0
+- ID: "9c6106ea-7a5a-48e2-8cad-f0f693b1e2d4"
+  Hint: __Read Only
+  Value: 0
+- ID: "a77e8568-1ab3-44f1-a664-b7c37ec7810d"
+  Hint: Parameters Template
+  Value: "{DE21B31C-2580-43F2-935E-B84CB9344410}"
+- ID: "b0b15510-b138-470e-8f33-8da2e228aafe"
+  Hint: Rendering Contents Resolver
+  Value: 
+- ID: "b5b27af1-25ef-405c-87ce-369b3a004016"
+  Hint: Datasource Location
+  Value: "query:$site/*[@@name='Data']/*[@@templatename='Testimonials Folder']|query:$sharedSites/*[@@name='Data']/*[@@templatename='Testimonials Folder']"
+- ID: "c39a90ce-0035-41bb-90f6-3c8a6ea87797"
+  Hint: AddFieldEditorButton
+  Value: 1
+- ID: "e829c217-5e94-4306-9c48-2634b094fdc2"
+  Hint: OtherProperties
+  Value: IsRenderingsWithDynamicPlaceholders=true
+Languages:
+- Language: "de-DE"
+  Fields:
+  - ID: "b5e02ad9-d56f-4c41-a065-a133db87bdeb"
+    Hint: __Display name
+    Value: Promo
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240125T152634Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\Admin
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\Admin
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "c5100b7f-97cb-4d5a-9601-9d07dafe7323"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\Admin
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240125T152634Z
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20211012T120931Z
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\JssImport
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "339eccbe-7a29-47f1-a9ba-ec106e509598"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\B8tFS9iKgv
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240514T021901Z
+- Language: "ja-JP"
+  Fields:
+  - ID: "b5e02ad9-d56f-4c41-a065-a133db87bdeb"
+    Hint: __Display name
+    Value: プロモ
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240125T152634Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\Admin
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\Admin
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "c5100b7f-97cb-4d5a-9601-9d07dafe7323"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\Admin
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240125T152634Z
+- Language: "zh-CN"
+  Fields:
+  - ID: "b5e02ad9-d56f-4c41-a065-a133db87bdeb"
+    Hint: __Display name
+    Value: 促销
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240125T152634Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\Admin
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\Admin
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "c5100b7f-97cb-4d5a-9601-9d07dafe7323"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\Admin
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240125T152634Z