First Commit
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
'use client';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import CardMedia from '@mui/material/CardMedia';
|
||||
|
||||
// @project
|
||||
import branding from '@/branding.json';
|
||||
|
||||
/*************************** LOGO - FAB ***************************/
|
||||
|
||||
export default function LogoFab({ size = 24 }) {
|
||||
const theme = useTheme();
|
||||
const logoFabPath = branding.logo.logoFab;
|
||||
|
||||
return logoFabPath ? (
|
||||
<CardMedia src={logoFabPath} component="img" alt="logo" sx={{ height: 1 }} loading="lazy" />
|
||||
) : (
|
||||
<svg width={size} height={size} viewBox="0 0 98 98" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_10380_3978)">
|
||||
<path
|
||||
d="M47.3333 5.35571C23.6771 5.35571 4.5 24.5329 4.5 48.189C4.5 71.8452 23.6771 91.0224 47.3333 91.0224H50.6667C74.3229 91.0224 93.5 71.8452 93.5 48.189C93.5 24.5329 74.3229 5.35571 50.6667 5.35571H47.3333Z"
|
||||
fill="url(#paint0_linear_1276_81272)"
|
||||
/>
|
||||
<path
|
||||
d="M47.3333 5.35571C23.6771 5.35571 4.5 24.5329 4.5 48.189C4.5 71.8452 23.6771 91.0224 47.3333 91.0224H50.6667C74.3229 91.0224 93.5 71.8452 93.5 48.189C93.5 24.5329 74.3229 5.35571 50.6667 5.35571H47.3333Z"
|
||||
stroke="url(#paint1_linear_1276_81272)"
|
||||
strokeWidth="9"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M54.9092 36.4271C57.4504 35.0387 60.4586 37.2398 59.9077 40.0845L56.2289 59.083C56.2034 59.2543 56.1648 59.4244 56.1128 59.5919C55.9979 59.983 55.8316 60.3088 55.6248 60.5713L55.6066 60.5963C54.4914 62.1231 52.3507 62.456 50.8252 61.3398C50.0686 60.7862 49.6055 59.9802 49.4668 59.1221L49.4676 59.1226C49.0443 57.5306 49.6491 53.2572 52.8231 46.4168L54.046 47.7888L55.6654 41.1762C55.7381 40.8793 55.4152 40.643 55.1546 40.8025L49.3504 44.3531L51.0968 45.1536C47.804 48.6269 43.2194 51.8763 39.9689 52.2187C39.1569 52.3043 38.185 52.0911 37.4288 51.5377C35.9033 50.4215 35.5707 48.279 36.686 46.7522L36.6946 46.7404L36.7045 46.7271C36.8915 46.4504 37.1509 46.1932 37.488 45.9652C37.6319 45.8645 37.7825 45.7759 37.9382 45.6994L54.9092 36.4271ZM42.4176 59.161C43.3969 59.8631 44.7638 59.6318 45.4705 58.6444C45.9401 57.9883 46.2852 55.8511 46.4639 54.4907C46.5325 53.9682 46.0061 53.5908 45.5339 53.8239C44.3045 54.431 42.3937 55.4456 41.9241 56.1017C41.2173 57.0891 41.4383 58.4588 42.4176 59.161Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1276_81272" x1="89" y1="12.647" x2="-6.43223" y2="102.064" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor={theme.vars.palette.primary.main} />
|
||||
<stop offset="1" stopColor={theme.vars.palette.primary.light} stopOpacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1276_81272" x1="-14.8889" y1="110.899" x2="125.136" y2="-10.1282" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor={theme.vars.palette.primary.main} />
|
||||
<stop offset="1" stopColor={theme.vars.palette.primary.lighter} stopOpacity="1" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1276_81272">
|
||||
<rect width="40" height="36.6667" fill="white" transform="translate(29 29.8557)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
LogoFab.propTypes = { size: PropTypes.number };
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
// @mui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import CardMedia from '@mui/material/CardMedia';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
// @project
|
||||
import branding from '@/branding.json';
|
||||
|
||||
/*************************** LOGO - ICON ***************************/
|
||||
|
||||
export default function LogoIcon() {
|
||||
const theme = useTheme();
|
||||
const logoIconPath = branding.logo.logoIcon;
|
||||
const palette = theme?.vars ? theme.vars.palette : theme.palette;
|
||||
|
||||
return (
|
||||
<Box
|
||||
className="icon-logo"
|
||||
sx={{
|
||||
width: { xs: 19.5, sm: 22, md: 24 },
|
||||
height: 1,
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
display: 'block',
|
||||
'& svg': {
|
||||
display: 'block'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{logoIconPath ? (
|
||||
<CardMedia src={logoIconPath} component="img" alt="logo" sx={{ height: 1 }} loading="lazy" />
|
||||
) : (
|
||||
<svg viewBox="0 0 37 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M29.0507 0.657088C32.9601 -1.47888 37.5881 1.90736 36.7407 6.28379L31.081 35.5123C31.0417 35.7758 30.9823 36.0375 30.9023 36.2952C30.7256 36.8969 30.4697 37.3981 30.1515 37.802L30.1236 37.8405C28.4079 40.1894 25.1144 40.7015 22.7675 38.9843C21.6036 38.1327 20.8911 36.8926 20.6777 35.5724L20.6789 35.5732C20.0277 33.124 20.9582 26.5495 25.8412 16.0258L27.7227 18.1367L30.214 7.96335C30.3258 7.50659 29.8291 7.14315 29.4282 7.3884L20.4986 12.8509L23.1853 14.0825C18.1195 19.426 11.0662 24.4251 6.06551 24.9519C4.81627 25.0835 3.32109 24.7555 2.15767 23.9042C-0.18924 22.187 -0.700904 18.8907 1.01484 16.5418L1.02814 16.5237L1.0433 16.5032C1.33101 16.0776 1.73015 15.6819 2.24875 15.3311C2.4702 15.1762 2.70184 15.0398 2.9413 14.9222L29.0507 0.657088ZM9.83615 35.6327C11.3428 36.7129 13.4456 36.3571 14.5329 34.8379C15.2554 33.8285 15.7862 30.5405 16.0612 28.4476C16.1668 27.6438 15.3569 27.0632 14.6305 27.4219C12.739 28.3558 9.79931 29.9167 9.07685 30.9261C7.98955 32.4453 8.3295 34.5525 9.83615 35.6327Z"
|
||||
fill={palette.primary.main}
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import CardMedia from '@mui/material/CardMedia';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
// @project
|
||||
import branding from '@/branding.json';
|
||||
|
||||
/*************************** LOGO - WATERMARK ***************************/
|
||||
|
||||
export default function LogoWatermark({ width = 430, height = 466 }) {
|
||||
const theme = useTheme();
|
||||
const logoWatermark = branding.logo.logoWatermark;
|
||||
|
||||
return logoWatermark ? (
|
||||
<CardMedia src={logoWatermark} component="img" alt="logo" loading="lazy" sx={{ width, height }} />
|
||||
) : (
|
||||
<Box sx={{ width, height }}>
|
||||
<svg viewBox="0 0 430 466" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
opacity="0.08"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M338.865 7.65501C384.41 -17.229 438.326 22.2206 428.453 73.206L362.518 413.718C362.061 416.788 361.368 419.837 360.436 422.839C358.377 429.849 355.397 435.688 351.689 440.393C351.581 440.543 351.473 440.692 351.364 440.841C331.376 468.207 293.007 474.172 265.666 454.167C252.106 444.245 243.805 429.799 241.32 414.419L241.333 414.428C233.747 385.894 244.587 309.302 301.474 186.701L323.393 211.292L352.417 92.773C353.72 87.4517 347.934 83.2176 343.263 86.0748L239.233 149.712L270.533 164.061C211.517 226.313 129.346 284.552 71.0875 290.69C56.5339 292.223 39.1151 288.401 25.5612 278.484C-1.78032 258.478 -7.74121 220.077 12.2472 192.712C12.2987 192.641 12.3504 192.571 12.4021 192.501C12.4609 192.421 12.5198 192.341 12.5788 192.262C15.9306 187.304 20.5806 182.694 26.6222 178.607C29.2021 176.803 31.9007 175.213 34.6905 173.844L338.865 7.65501ZM115.015 415.116C132.568 427.7 157.065 423.555 169.732 405.857C178.149 394.098 184.334 355.792 187.537 331.41C188.767 322.045 179.332 315.281 170.869 319.46C148.833 330.34 114.586 348.525 106.169 360.284C93.5024 377.982 97.4628 402.531 115.015 415.116Z"
|
||||
fill={theme.vars.palette.primary.main}
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
LogoWatermark.propTypes = { width: PropTypes.number, height: PropTypes.number };
|
||||
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @next
|
||||
import NextLink from 'next/link';
|
||||
|
||||
// @mui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import ButtonBase from '@mui/material/ButtonBase';
|
||||
|
||||
// @project
|
||||
import { generateFocusVisibleStyles } from '@/utils/CommonFocusStyle';
|
||||
import LogoMain from './LogoMain';
|
||||
import LogoIcon from './LogoIcon';
|
||||
|
||||
/*************************** MAIN - LOGO ***************************/
|
||||
|
||||
export default function LogoSection({ isIcon, sx, to }) {
|
||||
const theme = useTheme();
|
||||
const palette = theme?.vars ? theme.vars.palette : theme.palette;
|
||||
|
||||
return (
|
||||
<NextLink href={!to ? process.env.NEXT_PUBLIC_BASE_NAME || '/' : to} passHref>
|
||||
<ButtonBase
|
||||
disableRipple
|
||||
sx={{ ...sx, display: 'block', '&:focus-visible': generateFocusVisibleStyles(palette.primary.main) }}
|
||||
aria-label="logo"
|
||||
>
|
||||
{isIcon ? <LogoIcon /> : <LogoMain />}
|
||||
</ButtonBase>
|
||||
</NextLink>
|
||||
);
|
||||
}
|
||||
|
||||
LogoSection.propTypes = { isIcon: PropTypes.bool, sx: PropTypes.any, to: PropTypes.string };
|
||||
Reference in New Issue
Block a user