From 89cc743fdafff469504085ac39974402c51e000a Mon Sep 17 00:00:00 2001
From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com>
Date: Tue, 20 May 2025 17:05:25 +0200
Subject: [PATCH] feat: add logo component

refactor: restyle input according to figma
---
 src/components/labeled-input.tsx |  2 +-
 src/components/logo.tsx          | 74 ++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/components/logo.tsx

diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx
index 7a416d4..250dd5f 100644
--- a/src/components/labeled-input.tsx
+++ b/src/components/labeled-input.tsx
@@ -15,7 +15,7 @@ export default function LabeledInput({
   name?: string;
 }) {
   return (
-    <div className='flex flex-col gap-1'>
+    <div className='grid grid-cols-1 gap-1'>
       <Label htmlFor={name}>{label}</Label>
 
       <Input
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
new file mode 100644
index 0000000..3e6c064
--- /dev/null
+++ b/src/components/logo.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+import Image, { ImageProps } from 'next/image';
+
+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;
+  theme: Theme;
+  alt?: string;
+}
+
+const LOGO_BASE_PATH = '/assets/logo/';
+const IMAGE_EXTENSION = 'svg';
+
+export default function Logo({
+  colorType,
+  logoType,
+  theme,
+  alt,
+  className = '',
+  width,
+  height,
+  onError,
+  ...imageProps
+}: LogoProps) {
+  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 filename = `logo_${colorTypeInFilename}_${logoType}_${theme}.${IMAGE_EXTENSION}`;
+  const logoUrl = `${LOGO_BASE_PATH}${filename}`;
+  const defaultAltText = `Logo: ${colorType} ${logoType} ${theme}`;
+
+  const handleImageError: ImageProps['onError'] = (e) => {
+    console.error(`Error loading logo via next/image: ${logoUrl}`, e);
+    if (onError) {
+      onError(e);
+    }
+  };
+
+  return (
+    <Image
+      src={logoUrl}
+      alt={alt || defaultAltText}
+      className={className}
+      width={width}
+      height={height}
+      onError={handleImageError}
+      {...imageProps}
+    />
+  );
+}