From 49b3869d7bfdb60879c692f5f70a46865e9fe7ab Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Thu, 5 Jun 2025 17:22:03 +0200 Subject: [PATCH] feat(logo): consolidate logo imports into a single export file --- src/assets/logo/logo-export.ts | 16 +++++++++++ src/components/custom-ui/button.tsx | 3 -- src/components/logo.tsx | 44 ++++------------------------- 3 files changed, 22 insertions(+), 41 deletions(-) create mode 100644 src/assets/logo/logo-export.ts diff --git a/src/assets/logo/logo-export.ts b/src/assets/logo/logo-export.ts new file mode 100644 index 0000000..44681d3 --- /dev/null +++ b/src/assets/logo/logo-export.ts @@ -0,0 +1,16 @@ +export { default as logo_colored_combo_light } from '@/assets/logo/logo_colored_combo_light.svg'; +export { default as logo_colored_combo_dark } from '@/assets/logo/logo_colored_combo_dark.svg'; +export { default as logo_colored_primary_light } from '@/assets/logo/logo_colored_primary_light.svg'; +export { default as logo_colored_primary_dark } from '@/assets/logo/logo_colored_primary_dark.svg'; +export { default as logo_colored_secondary_light } from '@/assets/logo/logo_colored_secondary_light.svg'; +export { default as logo_colored_secondary_dark } from '@/assets/logo/logo_colored_secondary_dark.svg'; +export { default as logo_mono_combo_light } from '@/assets/logo/logo_mono_combo_light.svg'; +export { default as logo_mono_combo_dark } from '@/assets/logo/logo_mono_combo_dark.svg'; +export { default as logo_mono_primary_light } from '@/assets/logo/logo_mono_primary_light.svg'; +export { default as logo_mono_primary_dark } from '@/assets/logo/logo_mono_primary_dark.svg'; +export { default as logo_mono_secondary_light } from '@/assets/logo/logo_mono_secondary_light.svg'; +export { default as logo_mono_secondary_dark } from '@/assets/logo/logo_mono_secondary_dark.svg'; +export { default as logo_mono_submark_light } from '@/assets/logo/logo_mono_submark_light.svg'; +export { default as logo_mono_submark_dark } from '@/assets/logo/logo_mono_submark_dark.svg'; +export { default as logo_colored_submark_light } from '@/assets/logo/logo_colored_submark_light.svg'; +export { default as logo_colored_submark_dark } from '@/assets/logo/logo_colored_submark_dark.svg'; diff --git a/src/components/custom-ui/button.tsx b/src/components/custom-ui/button.tsx index 1910ea5..f45fcd7 100644 --- a/src/components/custom-ui/button.tsx +++ b/src/components/custom-ui/button.tsx @@ -15,9 +15,6 @@ const buttonVariants = cva( 'bg-secondary text-text-alt shadow-xs hover:bg-hover-secondary active:bg-active-secondary', outline: 'border-2 border-primary bg-transparent text-text shadow-xs hover:bg-primary hover:border-neutral-000 hover:border-1.5 hover:text-neutral-000 active:bg-active-primary', - /*destructive: - 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', - */ ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-text underline-offset-4 hover:underline', diff --git a/src/components/logo.tsx b/src/components/logo.tsx index 505665f..129adef 100644 --- a/src/components/logo.tsx +++ b/src/components/logo.tsx @@ -3,22 +3,7 @@ import React, { useEffect, useState } from 'react'; import Image, { ImageProps } from 'next/image'; -import logo_colored_combo_light from '@/assets/logo/logo_colored_combo_light.svg'; -import logo_colored_combo_dark from '@/assets/logo/logo_colored_combo_dark.svg'; -import logo_colored_primary_light from '@/assets/logo/logo_colored_primary_light.svg'; -import logo_colored_primary_dark from '@/assets/logo/logo_colored_primary_dark.svg'; -import logo_colored_secondary_light from '@/assets/logo/logo_colored_secondary_light.svg'; -import logo_colored_secondary_dark from '@/assets/logo/logo_colored_secondary_dark.svg'; -import logo_mono_combo_light from '@/assets/logo/logo_mono_combo_light.svg'; -import logo_mono_combo_dark from '@/assets/logo/logo_mono_combo_dark.svg'; -import logo_mono_primary_light from '@/assets/logo/logo_mono_primary_light.svg'; -import logo_mono_primary_dark from '@/assets/logo/logo_mono_primary_dark.svg'; -import logo_mono_secondary_light from '@/assets/logo/logo_mono_secondary_light.svg'; -import logo_mono_secondary_dark from '@/assets/logo/logo_mono_secondary_dark.svg'; -import logo_mono_submark_light from '@/assets/logo/logo_mono_submark_light.svg'; -import logo_mono_submark_dark from '@/assets/logo/logo_mono_submark_dark.svg'; -import logo_colored_submark_light from '@/assets/logo/logo_colored_submark_light.svg'; -import logo_colored_submark_dark from '@/assets/logo/logo_colored_submark_dark.svg'; +import * as logoAssets from '@/assets/logo/logo-export'; import { useTheme } from 'next-themes'; type ColorType = 'colored' | 'monochrome'; @@ -47,7 +32,9 @@ export default function Logo({ ...imageProps }: LogoProps) { const [mounted, setMounted] = useState(false); - let { resolvedTheme: theme } = useTheme(); + let { resolvedTheme: theme } = useTheme() as { + resolvedTheme?: Theme; + }; useEffect(() => { setMounted(true); @@ -84,29 +71,10 @@ export default function Logo({ const colorTypeInFilename = colorType === 'monochrome' ? 'mono' : colorType; const defaultAltText = `Logo: ${colorType} ${logoType} ${theme}`; - const varName = `logo_${colorTypeInFilename}_${logoType}_${theme}`; - - const logoAssets = { - logo_colored_combo_light, - logo_colored_combo_dark, - logo_colored_primary_light, - logo_colored_primary_dark, - logo_colored_secondary_light, - logo_colored_secondary_dark, - logo_mono_combo_light, - logo_mono_combo_dark, - logo_mono_primary_light, - logo_mono_primary_dark, - logo_mono_secondary_light, - logo_mono_secondary_dark, - logo_mono_submark_light, - logo_mono_submark_dark, - logo_colored_submark_light, - logo_colored_submark_dark, - }; + 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 as keyof typeof logoAssets]; + const logoVar = logoAssets[varName]; if (!logoVar) { console.error(`Logo: Could not find logo asset for ${varName}`);