first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,137 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
import ImageListItemBar from '@mui/material/ImageListItemBar';
|
||||
import ListSubheader from '@mui/material/ListSubheader';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
|
||||
export default function ImageListWithTitleBars() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Image List With Title Bars
|
||||
</Typography>
|
||||
|
||||
<ImageList sx={{ width: 500, height: 450 }}>
|
||||
<ImageListItem key="Subheader" cols={2}>
|
||||
<ListSubheader component="div">December</ListSubheader>
|
||||
</ImageListItem>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=248&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
<ImageListItemBar
|
||||
title={item.title}
|
||||
subtitle={item.author}
|
||||
actionIcon={
|
||||
<IconButton
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
|
||||
aria-label={`info about ${item.title}`}
|
||||
>
|
||||
<InfoIcon />
|
||||
</IconButton>
|
||||
}
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
author: '@bkristastucchio',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
|
||||
title: 'Burger',
|
||||
author: '@rollelflex_graphy726',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
author: '@helloimnik',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
|
||||
title: 'Coffee',
|
||||
author: '@nolanissac',
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
author: '@hjrc33',
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
|
||||
title: 'Honey',
|
||||
author: '@arwinneil',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
author: '@tjdragotta',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
|
||||
title: 'Fern',
|
||||
author: '@katie_wasserman',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
author: '@silverdalex',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
|
||||
title: 'Tomato basil',
|
||||
author: '@shelleypauls',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
author: '@peterlaster',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
author: '@southside_customs',
|
||||
cols: 2,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,98 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
|
||||
export default function MasonryImageList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Masonry Image List
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: 500, height: 450, overflowY: 'scroll' }}>
|
||||
<ImageList variant="masonry" cols={3} gap={8}>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=248&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
|
||||
title: 'Bed',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
|
||||
title: 'Books',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
|
||||
title: 'Sink',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
|
||||
title: 'Kitchen',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
|
||||
title: 'Blinds',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
|
||||
title: 'Chairs',
|
||||
},
|
||||
{
|
||||
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-1597262975002-c5c3b14bbd62',
|
||||
title: 'Candle',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
|
||||
title: 'Coffee table',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,118 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
|
||||
function srcset(image, size, rows = 1, cols = 1) {
|
||||
return {
|
||||
src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
|
||||
srcSet: `${image}?w=${size * cols}&h=${
|
||||
size * rows
|
||||
}&fit=crop&auto=format&dpr=2 2x`,
|
||||
};
|
||||
}
|
||||
|
||||
export default function QuiltedImageList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Quilted Image List
|
||||
</Typography>
|
||||
|
||||
<ImageList
|
||||
sx={{ width: 500, height: 450 }}
|
||||
variant="quilted"
|
||||
cols={4}
|
||||
rowHeight={121}
|
||||
>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
|
||||
<img
|
||||
{...srcset(item.img, 121, item.rows, item.cols)}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
|
||||
title: 'Burger',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
|
||||
title: 'Coffee',
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
|
||||
title: 'Honey',
|
||||
author: '@arwinneil',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
|
||||
title: 'Fern',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
|
||||
title: 'Tomato basil',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
cols: 2,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
|
||||
title: 'Burger',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
|
||||
title: 'Coffee',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
|
||||
title: 'Honey',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
|
||||
title: 'Fern',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
|
||||
title: 'Tomato basil',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
},
|
||||
];
|
||||
|
||||
export default function StandardImageList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Standard Image List
|
||||
</Typography>
|
||||
|
||||
<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
import ImageListItemBar from '@mui/material/ImageListItemBar';
|
||||
|
||||
export default function TitleBarBelowImageStandard() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Title Bar Below Image Standard
|
||||
</Typography>
|
||||
|
||||
<ImageList sx={{ width: 500, height: 450 }}>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=248&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
<ImageListItemBar
|
||||
title={item.title}
|
||||
subtitle={<span>by: {item.author}</span>}
|
||||
position="below"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
author: '@bkristastucchio',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
|
||||
title: 'Burger',
|
||||
author: '@rollelflex_graphy726',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
author: '@helloimnik',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
|
||||
title: 'Coffee',
|
||||
author: '@nolanissac',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
author: '@hjrc33',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
|
||||
title: 'Honey',
|
||||
author: '@arwinneil',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
author: '@tjdragotta',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
|
||||
title: 'Fern',
|
||||
author: '@katie_wasserman',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
author: '@silverdalex',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
|
||||
title: 'Tomato basil',
|
||||
author: '@shelleypauls',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
author: '@peterlaster',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
author: '@southside_customs',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
|
||||
export default function WovenImageList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Woven Image List
|
||||
</Typography>
|
||||
|
||||
<ImageList sx={{ width: 500, height: 450 }} variant="woven" cols={3} gap={8}>
|
||||
{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>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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',
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user