chore: setup iamge gallery

buzzracharyeah-rejan · Jul 6, 2023 · 124e607 · 124e607
1 parent 19ae5f7
commit 124e607
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 0 deletions.
diff --git a/src/data/index.ts b/src/data/index.ts
@@ -80,3 +80,54 @@ export const dataSource = [
     id: '4c0af1e',
   },
 ];
+
+export const itemData = [
+  {
+    img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
+    title: 'Bed',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
+    title: 'Kitchen',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
+    title: 'Sink',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
+    title: 'Books',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
+    title: 'Chairs',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
+    title: 'Candle',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
+    title: 'Laptop',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
+    title: 'Doors',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
+    title: 'Coffee',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
+    title: 'Storage',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
+    title: 'Coffee table',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
+    title: 'Blinds',
+  },
+];
diff --git a/src/scenes/Dashboard/fragments/ImageList.tsx b/src/scenes/Dashboard/fragments/ImageList.tsx
@@ -0,0 +1,62 @@
+import { Box, Container, ImageList, ImageListItem, Typography } from '@mui/material';
+import { itemData } from '../../../data';
+
+const ImageListings = () => {
+  return (
+    <Box display='flex' flexDirection='column' gap='1.5rem' m='3.5rem 1rem'>
+      <Typography
+        textAlign='center'
+        variant='h4'
+        sx={{ fontSize: '1.2rem', lineHeight: '150%', fontWeight: 600 }}
+      >
+        Share your setup with
+      </Typography>
+      <Typography
+        variant='h6'
+        component='h2'
+        textAlign='center'
+        sx={{ fontSize: '40px', fontStyle: 'normal', fontWeight: '700', lineHeight: '120%' }}
+      >
+        #FuniroFurniture
+      </Typography>
+      <Box
+        maxWidth='xl'
+        height='780px'
+        overflow='scroll'
+        display='flex'
+        justifyContent='center'
+        sx={{
+          '::-webkit-scrollbar': {
+            display: 'none',
+          },
+        }}
+      >
+        <ImageList
+          variant='masonry'
+          cols={3}
+          gap={8}
+          sx={{
+            '::-webkit-scrollbar': {
+              display: 'none',
+            },
+          }}
+        >
+          <Box width='451px' height='312px'>
+            {itemData.map((item) => (
+              <ImageListItem key={item.img}>
+                <img
+                  src={`${item.img}?w=161&fit=crop&auto=format`}
+                  srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+                  alt={item.title}
+                  loading='lazy'
+                />
+              </ImageListItem>
+            ))}
+          </Box>
+        </ImageList>{' '}
+      </Box>
+    </Box>
+  );
+};
+
+export default ImageListings;
diff --git a/src/scenes/Dashboard/index.tsx b/src/scenes/Dashboard/index.tsx
@@ -1,12 +1,14 @@
 import Banner from './fragments/Banner';
 import FeaturedProducts from './fragments/FeaturedProducts';
 import './dashboard.styles.css';
+import ImageListings from './fragments/ImageList';
 
 const Dashboard = () => {
   return (
     <>
       <Banner />
       <FeaturedProducts />
+      <ImageListings />
     </>
   );
 };