feat: add brand logo and animated background

2026-05-23 13:58:27 +02:00
parent 9d8cf47d2a
commit df8d3940c5
3 changed files with 233 additions and 0 deletions
@@ -0,0 +1,88 @@
+'use client';
+
+import Image from 'next/image';
+import { Box } from '@mui/material';
+
+interface LogoProps {
+  /** Total box size in pixels. */
+  size?: number;
+  /** Show the rounded white container backplate (for use over coloured surfaces). */
+  withBackplate?: boolean;
+  /** Padding inside the backplate (if any). */
+  padding?: number;
+  /** Optional border-radius override (defaults to 2 = 8px). */
+  rounded?: number;
+  /** className for parent positioning. */
+  className?: string;
+  /** Click handler. */
+  onClick?: () => void;
+}
+
+export default function Logo({
+  size = 36,
+  withBackplate = false,
+  padding,
+  rounded,
+  className,
+  onClick,
+}: LogoProps) {
+  const inner = (
+    <Image
+      src="/logo.png"
+      alt="PatchPilot Logo"
+      width={size}
+      height={size}
+      priority
+      style={{
+        width: '100%',
+        height: '100%',
+        objectFit: 'contain',
+        display: 'block',
+      }}
+    />
+  );
+
+  if (!withBackplate) {
+    return (
+      <Box
+        className={className}
+        onClick={onClick}
+        sx={{
+          width: size,
+          height: size,
+          flexShrink: 0,
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: onClick ? 'pointer' : undefined,
+        }}
+      >
+        {inner}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      className={className}
+      onClick={onClick}
+      sx={{
+        width: size,
+        height: size,
+        flexShrink: 0,
+        p: padding ?? 0.5,
+        borderRadius: rounded ?? 2,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bgcolor: 'background.paper',
+        border: '1px solid',
+        borderColor: 'divider',
+        boxShadow: 'var(--pp-shadow-soft)',
+        cursor: onClick ? 'pointer' : undefined,
+      }}
+    >
+      {inner}
+    </Box>
+  );
+}