SomeCodecat
a6f74e0c22
- Added new Radix UI components: Dialog, Tooltip, Separator, and updated existing components. - Introduced a Sidebar component with collapsible functionality and mobile responsiveness. - Implemented a custom hook `useIsMobile` to manage mobile state. - Updated package dependencies in package.json and yarn.lock for new components. - Created utility components such as Button, Skeleton, and Input for consistent styling. feat: add AppSidebar component with collapsible functionality and sidebar menu - Introduced AppSidebar component for a customizable sidebar layout. - Implemented collapsible sections using Radix UI's Collapsible component. - Added sidebar menu items with icons and links for navigation. - Created Sidebar UI components including SidebarHeader, SidebarFooter, and SidebarMenu. - Integrated ThemePicker for theme selection within the sidebar. - Updated sidebar styles and layout for better responsiveness. chore: add @radix-ui/react-collapsible dependency - Added @radix-ui/react-collapsible package to manage collapsible UI elements.
102 lines
2.5 KiB
TypeScript
102 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import Image, { ImageProps } from 'next/image';
|
|
|
|
import * as logoAssets from '@/assets/logo/logo-export';
|
|
import { useTheme } from 'next-themes';
|
|
|
|
type ColorType = 'colored' | 'monochrome';
|
|
type LogoType = 'combo' | 'primary' | 'secondary' | 'submark';
|
|
type Theme = 'light' | 'dark';
|
|
|
|
interface LogoProps extends Omit<ImageProps, 'src' | 'alt'> {
|
|
colorType: ColorType;
|
|
logoType: LogoType;
|
|
overrideTheme?: Theme;
|
|
alt?: string;
|
|
}
|
|
|
|
const LOGO_BASE_PATH = '/assets/logo/';
|
|
const IMAGE_EXTENSION = 'svg';
|
|
|
|
export default function Logo({
|
|
colorType,
|
|
logoType,
|
|
overrideTheme,
|
|
alt,
|
|
className = '',
|
|
width,
|
|
height,
|
|
// onError,
|
|
...imageProps
|
|
}: LogoProps) {
|
|
const [mounted, setMounted] = useState(false);
|
|
let { resolvedTheme: theme } = useTheme() as {
|
|
resolvedTheme?: Theme;
|
|
};
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (overrideTheme) {
|
|
theme = overrideTheme;
|
|
}
|
|
|
|
// Prevent rendering until mounted (theme is available)
|
|
if (!mounted && !overrideTheme) {
|
|
return null;
|
|
}
|
|
|
|
if (!colorType || !logoType || !theme) {
|
|
const errorMessage =
|
|
'Logo: colorType, logoType, and theme props are required.';
|
|
console.error(errorMessage);
|
|
return (
|
|
<div
|
|
role='alert'
|
|
className='p-2 text-red-700 bg-red-100 border border-red-500 rounded-md text-xs'
|
|
>
|
|
Error: Missing required logo props. Check console.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (width === undefined || height === undefined) {
|
|
console.warn(
|
|
`Logo: 'width' and 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
|
|
);
|
|
}
|
|
|
|
const colorTypeInFilename = colorType === 'monochrome' ? 'mono' : colorType;
|
|
const defaultAltText = `Logo: ${colorType} ${logoType} ${theme}`;
|
|
const varName = `logo_${colorTypeInFilename}_${logoType}_${theme}` as const;
|
|
|
|
// Match the varName with the Logo-Asset name and store it in "logoVar"
|
|
const logoVar = logoAssets[varName];
|
|
|
|
if (!logoVar) {
|
|
console.error(`Logo: Could not find logo asset for ${varName}`);
|
|
return (
|
|
<div
|
|
role='alert'
|
|
className='p-2 text-red-700 bg-red-100 border border-red-500 rounded-md text-xs'
|
|
>
|
|
Error: Logo asset not found. Check console.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Image
|
|
unoptimized
|
|
src={logoVar}
|
|
alt={alt || defaultAltText}
|
|
className={className}
|
|
width={width}
|
|
height={height}
|
|
{...imageProps}
|
|
/>
|
|
);
|
|
}
|