First Commit
This commit is contained in:
cesnimda
@@ -0,0 +1,25 @@
|
||||
// @mui
|
||||
import Grid from '@mui/material/Grid';
|
||||
|
||||
// @project
|
||||
import AnalyticsOverviewCard from '@/sections/dashboard/AnalyticsOverviewCard';
|
||||
import AnalyticsOverviewChart from '@/sections/dashboard/AnalyticsOverviewChart';
|
||||
import AnalyticsTopRef from '@/sections/dashboard/AnalyticsTopRef';
|
||||
|
||||
/*************************** ANALYTICS - OVERVIEW ***************************/
|
||||
|
||||
export default function AnalyticsOverview() {
|
||||
return (
|
||||
<Grid container spacing={{ xs: 2, md: 3 }}>
|
||||
<Grid size={12}>
|
||||
<AnalyticsOverviewCard />
|
||||
</Grid>
|
||||
<Grid size={12}>
|
||||
<AnalyticsOverviewChart />
|
||||
</Grid>
|
||||
<Grid size={12}>
|
||||
<AnalyticsTopRef />
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
// @mui
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
// @project
|
||||
import ComponentsWrapper from '@/components/ComponentsWrapper';
|
||||
import PresentationCard from '@/components/cards/PresentationCard';
|
||||
|
||||
/*************************** SAMPLE PAGE ***************************/
|
||||
|
||||
export default function SamplePage() {
|
||||
return (
|
||||
<ComponentsWrapper title="Sample Page">
|
||||
<PresentationCard title="Basic Card">
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
SaasAble offers both a full version and a seed version. The seed version contains minimal code, making it a great starting point
|
||||
for your project. You can then migrate specific features or changes from the full version as needed. We recommend beginning with
|
||||
the seed version for a more streamlined setup.
|
||||
</Typography>
|
||||
</PresentationCard>
|
||||
</ComponentsWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// @mui
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
// @project
|
||||
import RouterLink from '@/components/Link';
|
||||
import AuthLogin from '@/sections/auth/AuthLogin';
|
||||
import AuthSocial from '@/sections/auth/AuthSocial';
|
||||
import Copyright from '@/sections/auth/Copyright';
|
||||
|
||||
/*************************** AUTH - LOGIN ***************************/
|
||||
|
||||
export default function Login() {
|
||||
return (
|
||||
<Stack sx={{ height: 1, alignItems: 'center', justifyContent: 'space-between', gap: 3 }}>
|
||||
<Box sx={{ width: 1, maxWidth: 458 }}>
|
||||
<Stack sx={{ gap: { xs: 1, sm: 1.5 }, textAlign: 'center', mb: { xs: 3, sm: 8 } }}>
|
||||
<Typography variant="h1">Sign In</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Welcome back! Select the method of login.
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
{/* Social login buttons */}
|
||||
<AuthSocial />
|
||||
|
||||
<Divider sx={{ my: { xs: 4, sm: 5 } }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
or continue with email
|
||||
</Typography>
|
||||
</Divider>
|
||||
|
||||
{/* Login form */}
|
||||
<AuthLogin />
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: { xs: 2, sm: 3 } }}>
|
||||
Don’t have an account?{' '}
|
||||
<Link
|
||||
component={RouterLink}
|
||||
underline="hover"
|
||||
variant="subtitle2"
|
||||
to="/auth/register"
|
||||
sx={{ '&:hover': { color: 'primary.dark' } }}
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Copyright section*/}
|
||||
<Copyright />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
// @mui
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
// @project
|
||||
import RouterLink from '@/components/Link';
|
||||
import { SocialTypes } from '@/enum';
|
||||
import AuthRegister from '@/sections/auth/AuthRegister';
|
||||
import AuthSocial from '@/sections/auth/AuthSocial';
|
||||
import Copyright from '@/sections/auth/Copyright';
|
||||
|
||||
/*************************** AUTH - REGISTER ***************************/
|
||||
|
||||
export default function Register() {
|
||||
return (
|
||||
<Stack sx={{ height: 1, alignItems: 'center', justifyContent: 'space-between', gap: 3 }}>
|
||||
<Box sx={{ width: 1, maxWidth: 458 }}>
|
||||
<Stack sx={{ gap: { xs: 1, sm: 1.5 }, textAlign: 'center', mb: { xs: 3, sm: 8 } }}>
|
||||
<Typography variant="h1">Sign Up</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Sign Up for free. No credit card required.
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
{/* Social login buttons */}
|
||||
<AuthSocial type={SocialTypes.HORIZONTAL} />
|
||||
|
||||
<Divider sx={{ my: { xs: 4, sm: 5 } }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
or continue with email
|
||||
</Typography>
|
||||
</Divider>
|
||||
|
||||
{/* Login form */}
|
||||
<AuthRegister />
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: { xs: 2, sm: 3 } }}>
|
||||
Already have an account?{' '}
|
||||
<Link component={RouterLink} underline="hover" variant="subtitle2" to="/auth/login" sx={{ '&:hover': { color: 'primary.dark' } }}>
|
||||
Sign In
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Copyright section*/}
|
||||
<Copyright />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,412 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui
|
||||
import { useColorScheme, useTheme } from '@mui/material/styles';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
// @project
|
||||
import { Themes } from '@/config';
|
||||
import ComponentsWrapper from '@/components/ComponentsWrapper';
|
||||
import useConfig from '@/hooks/useConfig';
|
||||
import { ColorBox } from '@/sections/components/color';
|
||||
|
||||
// get theme wise color string
|
||||
function getColorString(themes) {
|
||||
switch (themes) {
|
||||
case Themes.THEME_HOSTING:
|
||||
default:
|
||||
return 'HOSTING';
|
||||
}
|
||||
}
|
||||
|
||||
// get theme wise primary/secondary color offset
|
||||
function getColorCode(themes, index) {
|
||||
const lightModeCodes = [90, 80, 40, 30, 10];
|
||||
|
||||
const code1 = lightModeCodes;
|
||||
|
||||
switch (themes) {
|
||||
case Themes.THEME_HOSTING:
|
||||
default:
|
||||
return code1[index];
|
||||
}
|
||||
}
|
||||
|
||||
// get theme wise grey color offset
|
||||
function getGreyCode(themes, index) {
|
||||
const lightModeCodes = [98, 96, 94, 92, 90, 87, 80, 50, 30, 10];
|
||||
|
||||
const code1 = lightModeCodes;
|
||||
|
||||
switch (themes) {
|
||||
case Themes.THEME_HOSTING:
|
||||
default:
|
||||
return code1[index];
|
||||
}
|
||||
}
|
||||
|
||||
/*************************** COLOR - PALETTE ***************************/
|
||||
|
||||
function ColorPalette({ title, palette }) {
|
||||
return (
|
||||
<Stack sx={{ gap: { xs: 2, sm: 3 } }}>
|
||||
<Typography variant="subtitle1">{title}</Typography>
|
||||
<Grid container spacing={{ xs: 2, sm: 3 }} sx={{ alignItems: 'center' }}>
|
||||
{palette.map((item, index) => (
|
||||
<ColorBox key={index} {...item} />
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
/*************************** UTILS - COLOR ***************************/
|
||||
|
||||
export default function UtilsColor() {
|
||||
const theme = useTheme();
|
||||
const { colorScheme } = useColorScheme();
|
||||
|
||||
const {
|
||||
state: { currentTheme }
|
||||
} = useConfig();
|
||||
const colorString = getColorString(currentTheme);
|
||||
|
||||
const scheme = colorScheme ?? 'light';
|
||||
const schemeTheme = theme.colorSchemes?.[scheme];
|
||||
|
||||
const currentPalette = schemeTheme ? schemeTheme.palette : theme.palette;
|
||||
|
||||
const primaryPalette = [
|
||||
{
|
||||
value: currentPalette.primary.lighter,
|
||||
color: 'primary.darker',
|
||||
muiLabel: 'primary.lighter',
|
||||
figmaLabel: 'Primary Container / Primary Fixed',
|
||||
figmaValue: `${colorString}/primary/${getColorCode(currentTheme, 0, colorScheme)}` // setup swr and use function for dynamic value
|
||||
},
|
||||
{
|
||||
value: currentPalette.primary.light,
|
||||
color: 'primary.dark',
|
||||
muiLabel: 'primary.light',
|
||||
figmaLabel: 'Primary Fixed Dim',
|
||||
figmaValue: `${colorString}/primary/${getColorCode(currentTheme, 1, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.primary.main,
|
||||
color: 'background.default',
|
||||
muiLabel: 'primary.main',
|
||||
figmaLabel: 'Primary',
|
||||
main: true,
|
||||
figmaValue: `${colorString}/primary/${getColorCode(currentTheme, 2, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.primary.dark,
|
||||
color: 'primary.light',
|
||||
muiLabel: 'primary.dark',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Primary Container / Primary Fixed' : 'On Primary Fixed Variant',
|
||||
figmaValue: `${colorString}/primary/${getColorCode(currentTheme, 3, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.primary.darker,
|
||||
color: 'primary.lighter',
|
||||
muiLabel: 'primary.darker',
|
||||
figmaLabel: 'On Primary Container / On Primary Fixed',
|
||||
figmaValue: `${colorString}/primary/${getColorCode(currentTheme, 4, colorScheme)}`
|
||||
}
|
||||
];
|
||||
|
||||
const secondaryPalette = [
|
||||
{
|
||||
value: currentPalette.secondary.lighter,
|
||||
color: 'secondary.darker',
|
||||
muiLabel: 'secondary.lighter',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Secondary Container / On Secondary Fixed Variant' : 'Secondary Container / Secondary Fixed',
|
||||
figmaValue: `${colorString}/secondary/${getColorCode(currentTheme, 0, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.secondary.light,
|
||||
color: 'secondary.dark',
|
||||
muiLabel: 'secondary.light',
|
||||
figmaLabel: 'Secondary Fixed Dim',
|
||||
figmaValue: `${colorString}/secondary/${getColorCode(currentTheme, 1, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.secondary.main,
|
||||
color: 'background.default',
|
||||
muiLabel: 'secondary.main',
|
||||
figmaLabel: 'Secondary',
|
||||
main: true,
|
||||
figmaValue: `${colorString}/secondary/${getColorCode(currentTheme, 2, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.secondary.dark,
|
||||
color: 'secondary.light',
|
||||
muiLabel: 'secondary.dark',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Secondary Container / Secondary Fixed' : 'On Secondary Fixed Variant',
|
||||
figmaValue: `${colorString}/secondary/${getColorCode(currentTheme, 3, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.secondary.darker,
|
||||
color: 'secondary.lighter',
|
||||
muiLabel: 'secondary.darker',
|
||||
figmaLabel: 'On Secondary Container / On Secondary Fixed',
|
||||
figmaValue: `${colorString}/secondary/${getColorCode(currentTheme, 4, colorScheme)}`
|
||||
}
|
||||
];
|
||||
|
||||
const greyPalette = [
|
||||
{
|
||||
value: currentPalette.grey[50],
|
||||
color: 'grey.900',
|
||||
muiLabel: 'grey.50',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Surface / Surface Dim' : 'Surface / Surface Bright',
|
||||
figmaValue: `${colorString}/neutral/${getGreyCode(currentTheme, 0, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.grey[100],
|
||||
color: 'grey.900',
|
||||
muiLabel: 'grey.100',
|
||||
figmaLabel: 'Surface Container Low',
|
||||
figmaValue: `${colorString}/neutral/${getGreyCode(currentTheme, 1, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.grey[200],
|
||||
color: 'grey.900',
|
||||
muiLabel: 'grey.200',
|
||||
figmaLabel: 'Surface Container',
|
||||
figmaValue: `${colorString}/neutral/${getGreyCode(currentTheme, 2, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.grey[300],
|
||||
color: 'grey.900',
|
||||
muiLabel: 'grey.300',
|
||||
figmaLabel: 'Surface Container High',
|
||||
figmaValue: `${colorString}/neutral/${getGreyCode(currentTheme, 3, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.grey[400],
|
||||
color: 'grey.900',
|
||||
muiLabel: 'grey.400',
|
||||
figmaLabel: 'Surface Container Highest',
|
||||
figmaValue: `${colorString}/neutral/${getGreyCode(currentTheme, 4, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.grey[500],
|
||||
color: 'grey.900',
|
||||
muiLabel: 'grey.500',
|
||||
figmaLabel: 'Surface Container Highest',
|
||||
figmaValue: `${colorString}/neutral/${getGreyCode(currentTheme, 5, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.grey[600],
|
||||
color: 'grey.800',
|
||||
muiLabel: 'divider/grey.600',
|
||||
figmaLabel: 'Outline Variant',
|
||||
figmaValue: `${colorString}/neutral variant/${getGreyCode(currentTheme, 6, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.grey[700],
|
||||
color: 'grey.600',
|
||||
muiLabel: 'grey.700',
|
||||
figmaLabel: 'Outline',
|
||||
figmaValue: `${colorString}/neutral variant/${getGreyCode(currentTheme, 7, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.grey[800],
|
||||
color: 'grey.600',
|
||||
muiLabel: 'text.secondary/grey.800',
|
||||
figmaLabel: 'On Surface Variant',
|
||||
figmaValue: `${colorString}/neutral variant/${getGreyCode(currentTheme, 8, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.grey[900],
|
||||
color: 'grey.50',
|
||||
muiLabel: 'text.primary/grey.900',
|
||||
figmaLabel: 'On Surface',
|
||||
figmaValue: `${colorString}/neutral/${getGreyCode(currentTheme, 9, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.background.default,
|
||||
color: 'text.priamry',
|
||||
muiLabel: 'background.default',
|
||||
figmaLabel: 'On Priamry/Secondary',
|
||||
figmaValue: 'Common'
|
||||
}
|
||||
];
|
||||
|
||||
const errorPalette = [
|
||||
{
|
||||
value: currentPalette.error.lighter,
|
||||
color: 'error.darker',
|
||||
muiLabel: 'error.lighter',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Error / Error Container' : 'On Error / Error Container Low',
|
||||
figmaValue: `error/${getColorCode(currentTheme, 0, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.error.light,
|
||||
color: 'error.dark',
|
||||
muiLabel: 'error.light',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Error Container High' : 'Error Container High / Outline',
|
||||
figmaValue: `error/${getColorCode(currentTheme, 1, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.error.main,
|
||||
color: 'background.default',
|
||||
muiLabel: 'error.main',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Error' : 'Error',
|
||||
figmaValue: `error/${getColorCode(currentTheme, 2, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.error.dark,
|
||||
color: 'error.light',
|
||||
muiLabel: 'error.dark',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Error Container High' : 'On Container/ Error Container',
|
||||
figmaValue: `error/${getColorCode(currentTheme, 3, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.error.darker,
|
||||
color: 'error.lighter',
|
||||
muiLabel: 'error.darker',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Error/ Error Container' : 'On Container Low / Container High',
|
||||
figmaValue: `error/${getColorCode(currentTheme, 4, colorScheme)}`
|
||||
}
|
||||
];
|
||||
|
||||
const warningPalette = [
|
||||
{
|
||||
value: currentPalette.warning.lighter,
|
||||
color: 'warning.darker',
|
||||
muiLabel: 'warning.lighter',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Warning / Warning Container' : 'On Warning / Warning Container Low',
|
||||
figmaValue: `warning/${getColorCode(currentTheme, 0, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.warning.light,
|
||||
color: 'warning.dark',
|
||||
muiLabel: 'warning.light',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Warning Container High' : 'Warning Container High / Outline',
|
||||
figmaValue: `warning/${getColorCode(currentTheme, 1, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.warning.main,
|
||||
color: 'background.default',
|
||||
muiLabel: 'warning.main',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Warning' : 'Warning',
|
||||
figmaValue: `warning/${getColorCode(currentTheme, 2, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.warning.dark,
|
||||
color: 'warning.light',
|
||||
muiLabel: 'warning.dark',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Warning Container High' : 'On Container/ Warning Container',
|
||||
figmaValue: `warning/${getColorCode(currentTheme, 3, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.warning.darker,
|
||||
color: 'warning.lighter',
|
||||
muiLabel: 'warning.darker',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Warning/ Warning Container' : 'On Container Low / Container High',
|
||||
figmaValue: `warning/${getColorCode(currentTheme, 4, colorScheme)}`
|
||||
}
|
||||
];
|
||||
|
||||
const infoPalette = [
|
||||
{
|
||||
value: currentPalette.info.lighter,
|
||||
color: 'info.darker',
|
||||
muiLabel: 'info.lighter',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Info / Info Container' : 'On Info / Info Container Low',
|
||||
figmaValue: `info/${getColorCode(currentTheme, 0, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.info.light,
|
||||
color: 'info.dark',
|
||||
muiLabel: 'info.light',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Info Container High' : 'Info Container High / Outline',
|
||||
figmaValue: `info/${getColorCode(currentTheme, 1, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.info.main,
|
||||
color: 'background.default',
|
||||
muiLabel: 'info.main',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Info' : 'Info',
|
||||
figmaValue: `info/${getColorCode(currentTheme, 2, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.info.dark,
|
||||
color: 'info.light',
|
||||
muiLabel: 'info.dark',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Info Container High' : 'On Container/ Info Container',
|
||||
figmaValue: `info/${getColorCode(currentTheme, 3, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.info.darker,
|
||||
color: 'info.lighter',
|
||||
muiLabel: 'info.darker',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Info/ Info Container' : 'On Container Low / Container High',
|
||||
figmaValue: `info/${getColorCode(currentTheme, 4, colorScheme)}`
|
||||
}
|
||||
];
|
||||
|
||||
const successPalette = [
|
||||
{
|
||||
value: currentPalette.success.lighter,
|
||||
color: 'success.darker',
|
||||
muiLabel: 'success.lighter',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Success / Success Container' : 'On Success / Success Container Low',
|
||||
figmaValue: `success/${getColorCode(currentTheme, 0, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.success.light,
|
||||
color: 'success.dark',
|
||||
muiLabel: 'success.light',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Success Container High' : 'Success Container High / Outline',
|
||||
figmaValue: `success/${getColorCode(currentTheme, 1, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.success.main,
|
||||
color: 'background.default',
|
||||
muiLabel: 'success.main',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Success' : 'Success',
|
||||
figmaValue: `success/${getColorCode(currentTheme, 2, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.success.dark,
|
||||
color: 'success.light',
|
||||
muiLabel: 'success.dark',
|
||||
figmaLabel: colorScheme === 'dark' ? 'Success Container High' : 'On Container/ Success Container',
|
||||
figmaValue: `success/${getColorCode(currentTheme, 3, colorScheme)}`
|
||||
},
|
||||
{
|
||||
value: currentPalette.success.darker,
|
||||
color: 'success.lighter',
|
||||
muiLabel: 'success.darker',
|
||||
figmaLabel: colorScheme === 'dark' ? 'On Success/ Success Container' : 'On Container Low / Container High',
|
||||
figmaValue: `success/${getColorCode(currentTheme, 4, colorScheme)}`
|
||||
}
|
||||
];
|
||||
|
||||
const palettes = [
|
||||
{ title: 'Primary', palette: primaryPalette },
|
||||
{ title: 'Secondary', palette: secondaryPalette },
|
||||
{ title: 'Neutral', palette: greyPalette },
|
||||
{ title: 'Error', palette: errorPalette },
|
||||
{ title: 'Warning', palette: warningPalette },
|
||||
{ title: 'Info', palette: infoPalette },
|
||||
{ title: 'Success', palette: successPalette }
|
||||
];
|
||||
|
||||
return (
|
||||
<ComponentsWrapper title="Color">
|
||||
<Stack sx={{ gap: { xs: 2, sm: 3 } }}>
|
||||
{palettes.map((palette, index) => (
|
||||
<ColorPalette key={index} {...palette} />
|
||||
))}
|
||||
</Stack>
|
||||
</ComponentsWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
ColorPalette.propTypes = { title: PropTypes.string, palette: PropTypes.array };
|
||||
@@ -0,0 +1,57 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
// @project
|
||||
import ComponentsWrapper from '@/components/ComponentsWrapper';
|
||||
import MainCard from '@/components/MainCard';
|
||||
|
||||
/*************************** SHADOW TYPE - LIST ***************************/
|
||||
|
||||
const shadows = [
|
||||
{ label: 'Button Shadow', value: 'button' },
|
||||
{ label: 'Section Shadow', value: 'section' },
|
||||
{ label: 'Tooltip Shadow', value: 'tooltip' },
|
||||
{ label: 'Focus Shadow', value: 'focus' }
|
||||
];
|
||||
|
||||
/*************************** SHADOW - BOX ***************************/
|
||||
|
||||
function ShadowBox({ label, value }) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<MainCard sx={{ p: 0.25, boxShadow: theme.vars.customShadows[value], bgcolor: 'grey.50', width: 1, border: 'none' }}>
|
||||
<Stack sx={{ alignItems: 'center', justifyContent: 'center', height: 180 }}>
|
||||
<Stack sx={{ gap: 1, alignItems: 'center' }}>
|
||||
<Typography variant="h6">{`customShadows.${value}`}</Typography>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
{label}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</MainCard>
|
||||
);
|
||||
}
|
||||
|
||||
/*************************** UTILS - SHADOW ***************************/
|
||||
|
||||
export default function UtilsShadow() {
|
||||
return (
|
||||
<ComponentsWrapper title="Shadows">
|
||||
<Grid container spacing={{ xs: 2, sm: 3 }}>
|
||||
{shadows.map((item, index) => (
|
||||
<Grid key={index} size={{ xs: 12, sm: 6, md: 3 }}>
|
||||
<ShadowBox {...item} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</ComponentsWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
ShadowBox.propTypes = { label: PropTypes.string, value: PropTypes.any };
|
||||
+208
@@ -0,0 +1,208 @@
|
||||
// @mui
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
// @project
|
||||
import branding from '@/branding.json';
|
||||
import ComponentsWrapper from '@/components/ComponentsWrapper';
|
||||
import MainCard from '@/components/MainCard';
|
||||
|
||||
/*************************** TYPOGRAPHY - DATA ***************************/
|
||||
|
||||
const typographyData = [
|
||||
{
|
||||
heading: 'Headings',
|
||||
items: [
|
||||
{
|
||||
title: 'Heading 01',
|
||||
sizeValue: '40px',
|
||||
lineHeight: '44px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'h1',
|
||||
label: 'h1 - Heading',
|
||||
fontWeight: 'Medium (500)'
|
||||
},
|
||||
{
|
||||
title: 'Heading 02',
|
||||
sizeValue: '32px',
|
||||
lineHeight: '36px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'h2',
|
||||
label: 'h2 - Heading',
|
||||
fontWeight: 'Medium (500)'
|
||||
},
|
||||
{
|
||||
title: 'Heading 03',
|
||||
sizeValue: '28px',
|
||||
lineHeight: '32px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'h3',
|
||||
label: 'h3 - Heading',
|
||||
fontWeight: 'Medium (500)'
|
||||
},
|
||||
{
|
||||
title: 'Heading 04',
|
||||
sizeValue: '24px',
|
||||
lineHeight: '28px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'h4',
|
||||
label: 'h4 - Heading',
|
||||
fontWeight: 'Medium (500)'
|
||||
},
|
||||
{
|
||||
title: 'Heading 05',
|
||||
sizeValue: '20px',
|
||||
lineHeight: '24px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'h5',
|
||||
label: 'h5 - Heading',
|
||||
fontWeight: 'Medium (500)'
|
||||
},
|
||||
{
|
||||
title: 'Heading 06',
|
||||
sizeValue: '18px',
|
||||
lineHeight: '22px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'h6',
|
||||
label: 'h6 - Heading',
|
||||
fontWeight: 'Medium (500)'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: 'Subtitle',
|
||||
items: [
|
||||
{
|
||||
title: 'Subtitle 01',
|
||||
sizeValue: '16px',
|
||||
lineHeight: '20px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'subtitle1',
|
||||
label: 'subtitle1',
|
||||
fontWeight: 'Medium (500)'
|
||||
},
|
||||
{
|
||||
title: 'Subtitle 02',
|
||||
sizeValue: '14px',
|
||||
lineHeight: '18px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'subtitle2',
|
||||
label: 'subtitle2',
|
||||
fontWeight: 'Medium (500)'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: 'Body / Paragraph',
|
||||
items: [
|
||||
{
|
||||
title: 'Body 01',
|
||||
sizeValue: '16px',
|
||||
lineHeight: '20px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'body1',
|
||||
label: 'body1 - Paragraph',
|
||||
fontWeight: 'Regular (400)'
|
||||
},
|
||||
{
|
||||
title: 'Body 02',
|
||||
sizeValue: '14px',
|
||||
lineHeight: '18px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'body2',
|
||||
label: 'body2 - Paragraph',
|
||||
fontWeight: 'Regular (400)'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: 'Caption',
|
||||
items: [
|
||||
{
|
||||
title: 'Caption',
|
||||
sizeValue: '12px',
|
||||
lineHeight: '16px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'caption',
|
||||
label: 'caption',
|
||||
fontWeight: 'Regular (400)'
|
||||
},
|
||||
{
|
||||
title: 'Caption 01',
|
||||
sizeValue: '12px',
|
||||
lineHeight: '16px',
|
||||
letterSpacing: '0px',
|
||||
variant: 'caption1',
|
||||
label: 'caption1',
|
||||
fontWeight: 'Medium (500)'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
/*************************** COMPONENT - TYPOGRAPHY ***************************/
|
||||
|
||||
export default function TypographyComponent() {
|
||||
return (
|
||||
<ComponentsWrapper title="Typography">
|
||||
<Grid container spacing={{ xs: 2, sm: 3 }}>
|
||||
{typographyData.map((list, index) => (
|
||||
<Grid key={index} size={12}>
|
||||
<Stack sx={{ gap: { xs: 2, sm: 3 } }}>
|
||||
<Typography variant="subtitle1">{list.heading}</Typography>
|
||||
{list.items.map((block, index) => (
|
||||
<MainCard key={index} sx={{ p: { xs: 3, sm: 4 } }}>
|
||||
<Grid container spacing={2.5}>
|
||||
<Grid size={{ xs: 12, sm: 3, md: 2 }}>
|
||||
<Typography variant="h4">{block.title}</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'grey.700' }}>
|
||||
{block.label}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
|
||||
<Stack sx={{ gap: 2.5 }}>
|
||||
<Typography variant="subtitle1">{block.fontWeight}</Typography>
|
||||
<Grid container spacing={1}>
|
||||
<Grid size={4}>
|
||||
<Stack sx={{ gap: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ color: 'grey.700' }}>
|
||||
Font Size
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">{block.sizeValue}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid size={4}>
|
||||
<Stack sx={{ gap: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ color: 'grey.700' }}>
|
||||
Line Height
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">{block.lineHeight}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid size={4}>
|
||||
<Stack sx={{ gap: 0.5 }}>
|
||||
<Typography variant="body2" sx={{ color: 'grey.700' }}>
|
||||
Letter Spacing
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">{block.letterSpacing}</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<Typography variant={block.variant}>
|
||||
{block.variant} - {branding.brandName} for every industry
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MainCard>
|
||||
))}
|
||||
</Stack>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</ComponentsWrapper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user