first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicAccordion from '@/components/UIElements/Accordion/BasicAccordion';
|
||||
import ControlledAccordion from '@/components/UIElements/Accordion/ControlledAccordion';
|
||||
import Customization from '@/components/UIElements/Accordion/Customization';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Accordion() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Accordion</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Accordion</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicAccordion */}
|
||||
<BasicAccordion />
|
||||
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ControlledAccordion */}
|
||||
<ControlledAccordion />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicAlerts from '@/components/UIElements/Alerts/BasicAlerts';
|
||||
import DescriptionAlerts from '@/components/UIElements/Alerts/DescriptionAlerts';
|
||||
import Actions from '@/components/UIElements/Alerts/Actions';
|
||||
import Transition from '@/components/UIElements/Alerts/Transition';
|
||||
import Icons from '@/components/UIElements/Alerts/Icons';
|
||||
import Variants from '@/components/UIElements/Alerts/Variants';
|
||||
import Filled from '@/components/UIElements/Alerts/Filled';
|
||||
import Color from '@/components/UIElements/Alerts/Color';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Alerts() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Alerts</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Alerts</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicAlerts */}
|
||||
<BasicAlerts />
|
||||
|
||||
{/* DescriptionAlerts */}
|
||||
<DescriptionAlerts />
|
||||
|
||||
{/* Variants */}
|
||||
<Variants />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Actions */}
|
||||
<Actions />
|
||||
|
||||
{/* Transition */}
|
||||
<Transition />
|
||||
|
||||
{/* Icons */}
|
||||
<Icons />
|
||||
|
||||
{/* Filled */}
|
||||
<Filled />
|
||||
|
||||
{/* Color */}
|
||||
<Color />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import ComboBox from '@/components/UIElements/Autocomplete/ComboBox';
|
||||
import CountrySelect from '@/components/UIElements/Autocomplete/CountrySelect';
|
||||
import CustomizedHook from '@/components/UIElements/Autocomplete/CustomizedHook';
|
||||
import LimitTags from '@/components/UIElements/Autocomplete/LimitTags';
|
||||
import CustomizeTextareaComponent from '@/components/UIElements/Autocomplete/CustomizeTextareaComponent';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Autocomplete() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Autocomplete</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Autocomplete</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ComboBox */}
|
||||
<ComboBox />
|
||||
|
||||
{/* CustomizedHook */}
|
||||
<CustomizedHook />
|
||||
|
||||
{/* CustomizeTextareaComponent */}
|
||||
<CustomizeTextareaComponent />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* CountrySelect */}
|
||||
<CountrySelect />
|
||||
|
||||
{/* LimitTags */}
|
||||
<LimitTags />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import SingleUserExample from '@/components/UIElements/Avatar/SingleUserExample';
|
||||
import GroupUserExample from '@/components/UIElements/Avatar/GroupUserExample';
|
||||
import ImageAvatars from '@/components/UIElements/Avatar/ImageAvatars';
|
||||
import LetterAvatars from '@/components/UIElements/Avatar/LetterAvatars';
|
||||
import SizesAvatars from '@/components/UIElements/Avatar/SizesAvatars';
|
||||
import IconAvatars from '@/components/UIElements/Avatar/IconAvatars';
|
||||
import Grouped from '@/components/UIElements/Avatar/Grouped';
|
||||
import TotalAvatars from '@/components/UIElements/Avatar/TotalAvatars';
|
||||
import WithBadge from '@/components/UIElements/Avatar/WithBadge';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Avatar() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Avatar</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Avatar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SingleUserExample */}
|
||||
<SingleUserExample />
|
||||
|
||||
{/* ImageAvatars */}
|
||||
<ImageAvatars />
|
||||
|
||||
{/* SizesAvatars */}
|
||||
<SizesAvatars />
|
||||
|
||||
{/* Grouped */}
|
||||
<Grouped />
|
||||
|
||||
{/* WithBadge */}
|
||||
<WithBadge />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* GroupUserExample */}
|
||||
<GroupUserExample />
|
||||
|
||||
{/* LetterAvatars */}
|
||||
<LetterAvatars />
|
||||
|
||||
{/* IconAvatars */}
|
||||
<IconAvatars />
|
||||
|
||||
{/* TotalAvatars */}
|
||||
<TotalAvatars />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicBadge from '@/components/UIElements/Badge/BasicBadge';
|
||||
import Dynamic from '@/components/UIElements/Badge/Dynamic';
|
||||
import MaximumValue from '@/components/UIElements/Badge/MaximumValue';
|
||||
import BadgeOverlap from '@/components/UIElements/Badge/BadgeOverlap';
|
||||
import Accessibility from '@/components/UIElements/Badge/Accessibility';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Badge() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Badge</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Badge</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={2}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicBadge */}
|
||||
<BasicBadge />
|
||||
|
||||
{/* MaximumValue */}
|
||||
<MaximumValue />
|
||||
|
||||
{/* BadgeOverlap */}
|
||||
<BadgeOverlap />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Dynamic */}
|
||||
<Dynamic />
|
||||
|
||||
{/* Accessibility */}
|
||||
<Accessibility />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import DefaultButtons from '@/components/UIElements/Buttons/DefaultButtons';
|
||||
import OutlineButtons from '@/components/UIElements/Buttons/OutlineButtons';
|
||||
import SoftButtons from '@/components/UIElements/Buttons/SoftButtons';
|
||||
import ButtonsWithIcon from '@/components/UIElements/Buttons/ButtonsWithIcon';
|
||||
import RoundedButtons from '@/components/UIElements/Buttons/RoundedButtons';
|
||||
import OutlineRoundedButtons from '@/components/UIElements/Buttons/OutlineRoundedButtons';
|
||||
import SizesButtons from '@/components/UIElements/Buttons/SizesButtons';
|
||||
import Loading from '@/components/UIElements/Buttons/Loading';
|
||||
import BlockButtons from '@/components/UIElements/Buttons/BlockButtons';
|
||||
import BasicFAB from '@/components/UIElements/Buttons/BasicFAB';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Buttons() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Buttons</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Buttons</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* DefaultButtons */}
|
||||
<DefaultButtons />
|
||||
|
||||
{/* SoftButtons */}
|
||||
<SoftButtons />
|
||||
|
||||
{/* RoundedButtons */}
|
||||
<RoundedButtons />
|
||||
|
||||
{/* SizesButtons */}
|
||||
<SizesButtons />
|
||||
|
||||
{/* BlockButtons */}
|
||||
<BlockButtons />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* OutlineButtons */}
|
||||
<OutlineButtons />
|
||||
|
||||
{/* ButtonsWithIcon */}
|
||||
<ButtonsWithIcon />
|
||||
|
||||
{/* OutlineRoundedButtons */}
|
||||
<OutlineRoundedButtons />
|
||||
|
||||
{/* BasicFAB */}
|
||||
<BasicFAB />
|
||||
|
||||
{/* Loading */}
|
||||
<Loading />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,975 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { Box } from "@mui/material";
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/components/UIElements/Cards/Cards.module.css'
|
||||
import BasicCard from '@/components/UIElements/Cards/BasicCard';
|
||||
import ComplexInteraction from '@/components/UIElements/Cards/ComplexInteraction';
|
||||
import Media from '@/components/UIElements/Cards/Media';
|
||||
import UIControls from '@/components/UIElements/Cards/UIControls';
|
||||
|
||||
export default function Cards() {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* BasicCard */}
|
||||
<BasicCard />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<img
|
||||
src="/images/card-img1.png"
|
||||
alt="card"
|
||||
style={{
|
||||
borderRadius: '10px',
|
||||
marginBottom: '12px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* ComplexInteraction */}
|
||||
<ComplexInteraction />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<div
|
||||
className={styles.cardWithBgImg}
|
||||
style={{
|
||||
backgroundImage: `url('/images/card-img2.png')`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mb: "15px",
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="success"
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="10px" mt="250px" color="white">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography color="white">
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
|
||||
{/* Media */}
|
||||
<Media />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<img
|
||||
src="/images/card-img3.png"
|
||||
alt="card"
|
||||
style={{
|
||||
borderRadius: '10px',
|
||||
marginBottom: '12px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<div
|
||||
className={styles.cardWithBgImg}
|
||||
style={{
|
||||
backgroundImage: `url('/images/card-img4.png')`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mb: "15px",
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="success"
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="10px" mt="70px" color="white">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography color="white">
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* UIControls */}
|
||||
<UIControls />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<div
|
||||
className={styles.cardWithBgImg}
|
||||
style={{
|
||||
backgroundImage: `url('/images/card-img5.png')`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mb: "15px",
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="success"
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="10px" mt="250px" color="white">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography color="white">
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Checkbox/Basic';
|
||||
import Label from '@/components/UIElements/Checkbox/Label';
|
||||
import Size from '@/components/UIElements/Checkbox/Size';
|
||||
import Color from '@/components/UIElements/Checkbox/Color';
|
||||
import Icon from '@/components/UIElements/Checkbox/Icon';
|
||||
import Controlled from '@/components/UIElements/Checkbox/Controlled';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Checkbox() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Checkbox</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Checkbox</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Size */}
|
||||
<Size />
|
||||
|
||||
{/* Icon */}
|
||||
<Icon />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Label */}
|
||||
<Label />
|
||||
|
||||
{/* Color */}
|
||||
<Color />
|
||||
|
||||
{/* Controlled */}
|
||||
<Controlled />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Chip/Basic';
|
||||
import ChipActions from '@/components/UIElements/Chip/ChipActions';
|
||||
import Deletable from '@/components/UIElements/Chip/Deletable';
|
||||
import ClickableAndDeletable from '@/components/UIElements/Chip/ClickableAndDeletable';
|
||||
import ClickableLink from '@/components/UIElements/Chip/ClickableLink';
|
||||
import CustomDeleteIcon from '@/components/UIElements/Chip/CustomDeleteIcon';
|
||||
import ChipAdornments from '@/components/UIElements/Chip/ChipAdornments';
|
||||
import IconChip from '@/components/UIElements/Chip/IconChip';
|
||||
import ColorChip from '@/components/UIElements/Chip/ColorChip';
|
||||
import SizesChip from '@/components/UIElements/Chip/SizesChip';
|
||||
import ChipArray from '@/components/UIElements/Chip/ChipArray';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Chip() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Chip</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Chip</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Deletable */}
|
||||
<Deletable />
|
||||
|
||||
{/* ClickableLink */}
|
||||
<ClickableLink />
|
||||
|
||||
{/* ChipAdornments */}
|
||||
<ChipAdornments />
|
||||
|
||||
{/* ColorChip */}
|
||||
<ColorChip />
|
||||
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ChipActions */}
|
||||
<ChipActions />
|
||||
|
||||
{/* ClickableAndDeletable */}
|
||||
<ClickableAndDeletable />
|
||||
|
||||
{/* CustomDeleteIcon */}
|
||||
<CustomDeleteIcon />
|
||||
|
||||
{/* IconChip */}
|
||||
<IconChip />
|
||||
|
||||
{/* SizesChip */}
|
||||
<SizesChip />
|
||||
|
||||
{/* ChipArray */}
|
||||
<ChipArray />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import StandardImageList from '@/components/UIElements/ImageList/StandardImageList';
|
||||
import QuiltedImageList from '@/components/UIElements/ImageList/QuiltedImageList';
|
||||
import WovenImageList from '@/components/UIElements/ImageList/WovenImageList';
|
||||
import MasonryImageList from '@/components/UIElements/ImageList/MasonryImageList';
|
||||
import ImageListWithTitleBars from '@/components/UIElements/ImageList/ImageListWithTitleBars';
|
||||
import TitleBarBelowImageStandard from '@/components/UIElements/ImageList/TitleBarBelowImageStandard';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function ImageList() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Image List</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Image List</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* StandardImageList */}
|
||||
<StandardImageList />
|
||||
|
||||
{/* WovenImageList */}
|
||||
<WovenImageList />
|
||||
|
||||
{/* ImageListWithTitleBars */}
|
||||
<ImageListWithTitleBars />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* QuiltedImageList */}
|
||||
<QuiltedImageList />
|
||||
|
||||
{/* MasonryImageList */}
|
||||
<MasonryImageList />
|
||||
|
||||
{/* TitleBarBelowImageStandard */}
|
||||
<TitleBarBelowImageStandard />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicList from '@/components/UIElements/List/BasicList';
|
||||
import NestedList from '@/components/UIElements/List/NestedList';
|
||||
import FolderList from '@/components/UIElements/List/FolderList';
|
||||
import ListControls from '@/components/UIElements/List/ListControls';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function List() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>List</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>List</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicList */}
|
||||
<BasicList />
|
||||
|
||||
{/* FolderList */}
|
||||
<FolderList />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* NestedList */}
|
||||
<NestedList />
|
||||
|
||||
{/* ListControls */}
|
||||
<ListControls />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicModal from '@/components/UIElements/Modal/BasicModal';
|
||||
import NestedModal from '@/components/UIElements/Modal/NestedModal';
|
||||
import Transitions from '@/components/UIElements/Modal/Transitions';
|
||||
import SimpleDialog from '@/components/UIElements/Modal/SimpleDialog';
|
||||
import TransitionsDialog from '@/components/UIElements/Modal/TransitionsDialog';
|
||||
import CustomizationDialog from '@/components/UIElements/Modal/CustomizationDialog';
|
||||
import FullScreenDialogs from '@/components/UIElements/Modal/FullScreenDialogs';
|
||||
import ScrollingLongContent from '@/components/UIElements/Modal/ScrollingLongContent';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Modal() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Modal</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Modal</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicModal */}
|
||||
<BasicModal />
|
||||
|
||||
{/* Transitions */}
|
||||
<Transitions />
|
||||
|
||||
{/* TransitionsDialog */}
|
||||
<TransitionsDialog />
|
||||
|
||||
{/* FullScreenDialogs */}
|
||||
<FullScreenDialogs />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* NestedModal */}
|
||||
<NestedModal />
|
||||
|
||||
{/* SimpleDialog */}
|
||||
<SimpleDialog />
|
||||
|
||||
{/* CustomizationDialog */}
|
||||
<CustomizationDialog />
|
||||
|
||||
{/* ScrollingLongContent */}
|
||||
<ScrollingLongContent />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicPagination from '@/components/UIElements/Pagination/BasicPagination';
|
||||
import OutlinedPagination from '@/components/UIElements/Pagination/OutlinedPagination';
|
||||
import RoundedPagination from '@/components/UIElements/Pagination/RoundedPagination';
|
||||
import PaginationSize from '@/components/UIElements/Pagination/PaginationSize';
|
||||
import CustomIcons from '@/components/UIElements/Pagination/CustomIcons';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Pagination() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Pagination</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Pagination</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicPagination */}
|
||||
<BasicPagination />
|
||||
|
||||
{/* RoundedPagination */}
|
||||
<RoundedPagination />
|
||||
|
||||
{/* CustomIcons */}
|
||||
<CustomIcons />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* OutlinedPagination */}
|
||||
<OutlinedPagination />
|
||||
|
||||
{/* PaginationSize */}
|
||||
<PaginationSize />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Circular from '@/components/UIElements/Progress/Circular';
|
||||
import CircularDeterminate from '@/components/UIElements/Progress/CircularDeterminate';
|
||||
import InteractiveIntegration from '@/components/UIElements/Progress/InteractiveIntegration';
|
||||
import CircularWithLabel from '@/components/UIElements/Progress/CircularWithLabel';
|
||||
import LinearIndeterminate from '@/components/UIElements/Progress/LinearIndeterminate';
|
||||
import Customization from '@/components/UIElements/Progress/Customization';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Progress() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Progress</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Progress</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Circular */}
|
||||
<Circular />
|
||||
|
||||
{/* InteractiveIntegration */}
|
||||
<InteractiveIntegration />
|
||||
|
||||
{/* LinearIndeterminate */}
|
||||
<LinearIndeterminate />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* CircularDeterminate */}
|
||||
<CircularDeterminate />
|
||||
|
||||
{/* CircularWithLabel */}
|
||||
<CircularWithLabel />
|
||||
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Group from '@/components/UIElements/Radio/Group';
|
||||
import Direction from '@/components/UIElements/Radio/Direction';
|
||||
import Controlled from '@/components/UIElements/Radio/Controlled';
|
||||
import Size from '@/components/UIElements/Radio/Size';
|
||||
import Color from '@/components/UIElements/Radio/Color';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Radio() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Radio</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Radio</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Group */}
|
||||
<Group />
|
||||
|
||||
{/* Controlled */}
|
||||
<Controlled />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Direction */}
|
||||
<Direction />
|
||||
|
||||
{/* Size */}
|
||||
<Size />
|
||||
|
||||
{/* Color */}
|
||||
<Color />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Rating/Basic';
|
||||
import RatingPrecision from '@/components/UIElements/Rating/RatingPrecision';
|
||||
import HoverFeedback from '@/components/UIElements/Rating/HoverFeedback';
|
||||
import Sizes from '@/components/UIElements/Rating/Sizes';
|
||||
import Customization from '@/components/UIElements/Rating/Customization';
|
||||
import RadioGroup from '@/components/UIElements/Rating/RadioGroup';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Rating() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Rating</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Rating</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* RatingPrecision */}
|
||||
<RatingPrecision />
|
||||
|
||||
{/* HoverFeedback */}
|
||||
<HoverFeedback />
|
||||
|
||||
{/* Sizes */}
|
||||
<Sizes />
|
||||
|
||||
{/* RadioGroup */}
|
||||
<RadioGroup />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Select/Basic';
|
||||
import AutoWidth from '@/components/UIElements/Select/AutoWidth';
|
||||
import Customization from '@/components/UIElements/Select/Customization';
|
||||
import MultipleSelectDefault from '@/components/UIElements/Select/MultipleSelectDefault';
|
||||
import MultipleSelectCheckmarks from '@/components/UIElements/Select/MultipleSelectCheckmarks';
|
||||
import MultipleSelectChip from '@/components/UIElements/Select/MultipleSelectChip';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Select() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Select</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Select</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
|
||||
{/* MultipleSelectDefault */}
|
||||
<MultipleSelectDefault />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* AutoWidth */}
|
||||
<AutoWidth />
|
||||
|
||||
{/* MultipleSelectCheckmarks */}
|
||||
<MultipleSelectCheckmarks />
|
||||
|
||||
{/* MultipleSelectChip */}
|
||||
<MultipleSelectChip />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Variants from '@/components/UIElements/Skeleton/Variants';
|
||||
import Animations from '@/components/UIElements/Skeleton/Animations';
|
||||
import PulsateExample from '@/components/UIElements/Skeleton/PulsateExample';
|
||||
import WaveExample from '@/components/UIElements/Skeleton/WaveExample';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Skeleton() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Skeleton</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Skeleton</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Variants */}
|
||||
<Variants />
|
||||
|
||||
{/* Animations */}
|
||||
<Animations />
|
||||
|
||||
{/* WaveExample */}
|
||||
<WaveExample />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* PulsateExample */}
|
||||
<PulsateExample />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Continuous from '@/components/UIElements/Slider/Continuous';
|
||||
import Sizes from '@/components/UIElements/Slider/Sizes';
|
||||
import Discrete from '@/components/UIElements/Slider/Discrete';
|
||||
import SmallSteps from '@/components/UIElements/Slider/SmallSteps';
|
||||
import CustomMarks from '@/components/UIElements/Slider/CustomMarks';
|
||||
import RestrictedValues from '@/components/UIElements/Slider/RestrictedValues';
|
||||
import LabelAlwaysVisible from '@/components/UIElements/Slider/LabelAlwaysVisible';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Slider() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Slider</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Slider</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={6} lg={6} xl={6}>
|
||||
{/* Continuous */}
|
||||
<Continuous />
|
||||
|
||||
{/* Discrete */}
|
||||
<Discrete />
|
||||
|
||||
{/* CustomMarks */}
|
||||
<CustomMarks />
|
||||
|
||||
{/* LabelAlwaysVisible */}
|
||||
<LabelAlwaysVisible />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={6}>
|
||||
{/* Sizes */}
|
||||
<Sizes />
|
||||
|
||||
{/* SmallSteps */}
|
||||
<SmallSteps />
|
||||
|
||||
{/* RestrictedValues */}
|
||||
<RestrictedValues />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import SimpleSnackbars from '@/components/UIElements/Snackbar/SimpleSnackbars';
|
||||
import Customization from '@/components/UIElements/Snackbar/Customization';
|
||||
import PositionedSnackbars from '@/components/UIElements/Snackbar/PositionedSnackbars';
|
||||
import ComplementaryProjects from '@/components/UIElements/Snackbar/ComplementaryProjects';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Snackbar() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Snackbar</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Snackbar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SimpleSnackbars */}
|
||||
<SimpleSnackbars />
|
||||
|
||||
{/* PositionedSnackbars */}
|
||||
<PositionedSnackbars />
|
||||
|
||||
{/* ComplementaryProjects */}
|
||||
<ComplementaryProjects />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import HorizontalStepper from '@/components/UIElements/Stepper/HorizontalStepper';
|
||||
import NonLinear from '@/components/UIElements/Stepper/NonLinear';
|
||||
import AlternativeLabel from '@/components/UIElements/Stepper/AlternativeLabel';
|
||||
import ErrorStep from '@/components/UIElements/Stepper/ErrorStep';
|
||||
import CustomizedHorizontalStepper from '@/components/UIElements/Stepper/CustomizedHorizontalStepper';
|
||||
import VerticalStepper from '@/components/UIElements/Stepper/VerticalStepper';
|
||||
import MobileStepperText from '@/components/UIElements/Stepper/MobileStepperText';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Stepper() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Stepper</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Stepper</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* HorizontalStepper */}
|
||||
<HorizontalStepper />
|
||||
|
||||
{/* AlternativeLabel */}
|
||||
<AlternativeLabel />
|
||||
|
||||
{/* CustomizedHorizontalStepper */}
|
||||
<CustomizedHorizontalStepper />
|
||||
|
||||
{/* MobileStepper */}
|
||||
<MobileStepperText />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* NonLinear */}
|
||||
<NonLinear />
|
||||
|
||||
{/* ErrorStep */}
|
||||
<ErrorStep />
|
||||
|
||||
{/* VerticalStepper */}
|
||||
<VerticalStepper />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Default from '@/components/UIElements/SwiperSlider/Default';
|
||||
import NavigationSlider from '@/components/UIElements/SwiperSlider/NavigationSlider';
|
||||
import PaginationSlider from '@/components/UIElements/SwiperSlider/PaginationSlider';
|
||||
import PaginationDynamic from '@/components/UIElements/SwiperSlider/PaginationDynamic';
|
||||
import PaginationProgress from '@/components/UIElements/SwiperSlider/PaginationProgress';
|
||||
import AutoplaySlider from '@/components/UIElements/SwiperSlider/AutoplaySlider';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function SwiperSlider() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Swiper Slider</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Swiper Slider</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* Default */}
|
||||
<Default />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* PaginationDynamic */}
|
||||
<PaginationDynamic />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* NavigationSlider */}
|
||||
<NavigationSlider />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* PaginationProgress */}
|
||||
<PaginationProgress />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* PaginationSlider */}
|
||||
<PaginationSlider />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* AutoplaySlider */}
|
||||
<AutoplaySlider />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Switch/Basic';
|
||||
import Label from '@/components/UIElements/Switch/Label';
|
||||
import Size from '@/components/UIElements/Switch/Size';
|
||||
import Color from '@/components/UIElements/Switch/Color';
|
||||
import Controlled from '@/components/UIElements/Switch/Controlled';
|
||||
import SwitchesWithFormGroup from '@/components/UIElements/Switch/SwitchesWithFormGroup';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Switch() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Switch</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Switch</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={6} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Size */}
|
||||
<Size />
|
||||
|
||||
{/* SwitchesWithFormGroup */}
|
||||
<SwitchesWithFormGroup />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6} xl={6}>
|
||||
{/* Label */}
|
||||
<Label />
|
||||
|
||||
{/* Color */}
|
||||
<Color />
|
||||
|
||||
{/* Controlled */}
|
||||
<Controlled />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicTable from '@/components/UIElements/Table/BasicTable';
|
||||
import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders";
|
||||
import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList";
|
||||
import BrowserUsedAndTrafficReports from "@/components/Dashboard/Analytics/BrowserUsedAndTrafficReports";
|
||||
import MyTasks from '@/components/Dashboard/ProjectManagement/MyTasks';
|
||||
import AllProjects from '@/components/Dashboard/ProjectManagement/AllProjects';
|
||||
import DataTable from '@/components/UIElements/Table/DataTable';
|
||||
import DenseTable from '@/components/UIElements/Table/DenseTable';
|
||||
import SortingSelectingTable from '@/components/UIElements/Table/SortingSelectingTable';
|
||||
import CustomizationTable from '@/components/UIElements/Table/CustomizationTable';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Table() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Table</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Table</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* BasicTable */}
|
||||
<BasicTable />
|
||||
|
||||
{/* RecentOrders */}
|
||||
<RecentOrders />
|
||||
|
||||
{/* TeamMembersList */}
|
||||
<TeamMembersList />
|
||||
|
||||
{/* BrowserUsedAndTrafficReports */}
|
||||
<BrowserUsedAndTrafficReports />
|
||||
|
||||
{/* MyTasks */}
|
||||
<MyTasks />
|
||||
|
||||
{/* AllProjects */}
|
||||
<AllProjects />
|
||||
|
||||
{/* DataTable */}
|
||||
<DataTable />
|
||||
|
||||
{/* DenseTable */}
|
||||
<DenseTable />
|
||||
|
||||
{/* SortingSelectingTable */}
|
||||
<SortingSelectingTable />
|
||||
|
||||
{/* CustomizationTable */}
|
||||
<CustomizationTable />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicTabs from '@/components/UIElements/Tabs/BasicTabs';
|
||||
import ExperimentalAPI from '@/components/UIElements/Tabs/ExperimentalAPI';
|
||||
import VerticalTabs from '@/components/UIElements/Tabs/VerticalTabs';
|
||||
import IconTabs from '@/components/UIElements/Tabs/IconTabs';
|
||||
import IconPosition from '@/components/UIElements/Tabs/IconPosition';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Tabs() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Tabs</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Tabs</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicTabs */}
|
||||
<BasicTabs />
|
||||
|
||||
{/* FixedTabs */}
|
||||
<VerticalTabs />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ExperimentalAPI */}
|
||||
<ExperimentalAPI />
|
||||
|
||||
{/* IconTabs */}
|
||||
<IconTabs />
|
||||
|
||||
{/* IconPosition */}
|
||||
<IconPosition />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import BasicTooltip from '@/components/UIElements/Tooltip/BasicTooltip';
|
||||
import PositionedTooltips from '@/components/UIElements/Tooltip/PositionedTooltips';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Tooltip() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Tooltip</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Tooltip</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* BasicTooltip */}
|
||||
<BasicTooltip />
|
||||
|
||||
{/* PositionedTooltips */}
|
||||
<PositionedTooltips />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import CollapseTransitions from '@/components/UIElements/Transitions/CollapseTransitions';
|
||||
import FadeTransitions from '@/components/UIElements/Transitions/FadeTransitions';
|
||||
import GrowTransitions from '@/components/UIElements/Transitions/GrowTransitions';
|
||||
import SlideTransitions from '@/components/UIElements/Transitions/SlideTransitions';
|
||||
import SlideRelativeToAContainer from '@/components/UIElements/Transitions/SlideRelativeToAContainer';
|
||||
import ZoomTransitions from '@/components/UIElements/Transitions/ZoomTransitions';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Transitions() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Transitions</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Transitions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* CollapseTransitions */}
|
||||
<CollapseTransitions />
|
||||
|
||||
{/* SlideTransitions */}
|
||||
<SlideTransitions />
|
||||
|
||||
{/* SlideRelativeToAContainer */}
|
||||
<SlideRelativeToAContainer />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* FadeTransitions */}
|
||||
<FadeTransitions />
|
||||
|
||||
{/* GrowTransitions */}
|
||||
<GrowTransitions />
|
||||
|
||||
{/* ZoomTransitions */}
|
||||
<ZoomTransitions />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user