Logo

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5/**
6 * Edgecom Energy brand logo.
7 *
8 * - `combination` (default): the mark + "EEConnect" wordmark lockup.
9 * - `mark`: the isometric mark on its own (use in collapsed rails, favicons, avatars).
10 *
11 * The colored (gradient) artwork is the default; in dark mode the flat-white
12 * artwork is shown instead. Switching is driven by the `.dark` class on an
13 * ancestor (the convention used throughout this design system), so no props are
14 * needed to handle theming — just size it with `className` (e.g. `h-8 w-auto`).
15 */
16 
17type LogoVariant = "combination" | "mark"
18 
19interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {
20  variant?: LogoVariant
21  /** Accessible name for the logo. Set to "" to mark it decorative. */
22  label?: string
23}
24 
25function Logo({
26  variant = "combination",
27  label = "Edgecom Energy",
28  className,
29  ...props
30}: LogoProps) {
31  const uid = React.useId()
32  const Colored = variant === "mark" ? MarkColored : CombinationColored
33  const White = variant === "mark" ? MarkWhite : CombinationWhite
34 
35  return (
36    <span
37      role="img"
38      aria-label={label || undefined}
39      aria-hidden={label ? undefined : true}
40      className={cn("inline-flex shrink-0 items-center", className)}
41      {...props}
42    >
43      <Colored uid={uid} className="block h-full w-auto dark:hidden" />
44      <White uid={uid} className="hidden h-full w-auto dark:block" />
45    </span>
46  )
47}
48 
49// ---------------------------------------------------------------------------
50// Combination lockup (mark + wordmark)
51// ---------------------------------------------------------------------------
52 
53function CombinationColored({
54  uid,
55  className,
56}: {
57  uid: string
58  className?: string
59}) {
60  const g = (n: number) => `${uid}-comb-${n}`
61  return (
62    <svg
63      viewBox="0 0 500 128"
64      fill="none"
65      xmlns="http://www.w3.org/2000/svg"
66      className={className}
67    >
68// … truncated