Add logos to testimonials

zanivan · Jan 8, 2024 · 04e3c44 · 04e3c44
1 parent 1ffb02f
commit 04e3c44
Showing 1 changed file with 48 additions and 5 deletions.
diff --git a/docs/data/material/getting-started/templates/album/components/Testimonials.tsx b/docs/data/material/getting-started/templates/album/components/Testimonials.tsx
@@ -8,6 +8,7 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Masonry from '@mui/lab/Masonry';
 import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/styles';
 
 const userTestimonials = [
   {
@@ -54,9 +55,34 @@ const userTestimonials = [
   },
 ];
 
+const whiteLogos = [
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e891fa22f89efd7477a_TerraLight.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a09d1f6337b1dfed14ab_colorado-white.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
+];
+
+const darkLogos = [
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e911fa22f2203d7514c_TerraDark.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a0990f3717787fd49245_colorado-black.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5ca4e548b0deb1041c33_Ankara-black.svg',
+];
+
+const logoStyle = {
+  width: '64px',
+  opacity: 0.3,
+};
+
 export default function Testimonials() {
+  const theme = useTheme();
   const isSmallScreen = useMediaQuery('(max-width:600px)');
   const columns = isSmallScreen ? 1 : 3;
+  const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
 
   return (
     <Box>
@@ -87,16 +113,33 @@ export default function Testimonials() {
         <Masonry columns={columns} spacing={2}>
           {userTestimonials.map((testimonial, index) => (
             <Card key={index}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  mr: '16px',
+                }}
+              >
+                <CardHeader
+                  avatar={testimonial.avatar}
+                  title={testimonial.name}
+                  subheader={testimonial.occupation}
+                  sx={{
+                    pb: 0,
+                  }}
+                />
+                <img
+                  src={logos[index]}
+                  alt={`Logo ${index + 1}`}
+                  style={logoStyle}
+                />
+              </Box>
               <CardContent>
                 <Typography variant="body2" color="text.secondary">
                   {testimonial.testimonial}
                 </Typography>
               </CardContent>
-              <CardHeader
-                avatar={testimonial.avatar}
-                title={testimonial.name}
-                subheader={testimonial.occupation}
-              />
             </Card>
           ))}
         </Masonry>