@manta-eu/react 0.1.9 → 0.1.10

package/src/components/button/index.tsx

@@ -0,0 +1,202 @@
+import { Slot } from "@radix-ui/react-slot";
+import { Loader2 } from "lucide-react";
+import type { ComponentProps, ComponentPropsWithoutRef, ComponentType, ElementType, ReactNode, Ref } from "react";
+import { tv } from "tailwind-variants";
+import { cn, type ClassProp, type VariantPropsOf } from "#style";
+
+function Loader(props: ComponentProps<typeof Loader2>) {
+  return <Loader2 {...props} className={cn("size-4 animate-spin text-inherit", props.className)} />;
+}
+
+export const buttonConfig = {
+  base: [
+    "inline-flex items-center justify-center text-center gap-1.5 transition-[color_150ms_ease,transform_100ms_ease-out] motion-reduce:transition-none",
+    "active:scale-[0.98] motion-reduce:active:scale-100",
+    "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-active-border/50",
+    "disabled:pointer-events-none disabled:bg-disabled! disabled:text-disabled-foreground! disabled:shadow-none disabled:border-disabled-border disabled:[&_svg]:opacity-60",
+  ],
+  variants: {
+    variant: {
+      primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+      tertiary:
+        "bg-input text-default-foreground border border-muted-border hover:bg-input-hover focus:border-active-border",
+      ghost: "bg-transparent hover:bg-faint",
+      destructive: "bg-error text-error-foreground hover:bg-error-hover focus:ring-error-foreground/25",
+    },
+    size: {
+      xs: "h-7 px-2 typography-tiny-medium [&>svg]:size-4 [&_svg[data-loader]]:size-3.5",
+      sm: "h-8 px-3 typography-tiny-medium [&>svg]:size-5 [&_svg[data-loader]]:size-4",
+      base: "h-10 px-4 typography-caption-medium [&>svg]:size-5 [&_svg[data-loader]]:size-5",
+      lg: "h-12 px-4 typography-body-medium [&>svg]:size-6 [&_svg[data-loader]]:size-6",
+    },
+    rounded: {
+      full: "rounded-full",
+      lg: "rounded-lg-v4",
+      md: "rounded-md-v4",
+      sm: "rounded-sm-v4",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "base",
+    rounded: "full",
+  } as const,
+};
+
+const buttonVariantsHelper = tv(buttonConfig);
+
+// A declared signature, not the inferred one: `tv()` leaves three type parameters uninferred, so
+// the emitted declaration of an exported helper carries `unknown` where a constraint wants a
+// variant map.
+export function buttonVariants(props?: VariantPropsOf<typeof buttonConfig> & ClassProp): string {
+  return buttonVariantsHelper(props);
+}
+
+export type ButtonVariant = VariantPropsOf<typeof buttonConfig>["variant"];
+
+export type BaseButtonProps = Omit<ComponentProps<"button">, "children"> &
+  VariantPropsOf<typeof buttonConfig> & {
+    asChild?: boolean;
+    isLoading?: boolean;
+  };
+
+export type IconOnlyButtonProps = BaseButtonProps & {
+  children?: never;
+  icon: ComponentType<{ className?: string }>;
+  showLeftIcon?: never;
+  showRightIcon?: never;
+  label?: never;
+  iconOnly: true;
+  "aria-label": string;
+};
+
+export type RegularButtonProps = BaseButtonProps & {
+  children?: ReactNode;
+  icon?: ComponentType<{ className?: string }>;
+  showLeftIcon?: boolean;
+  showRightIcon?: boolean;
+  label?: string;
+  iconOnly?: false | never;
+};
+
+export type ButtonProps = (IconOnlyButtonProps | RegularButtonProps) & {
+  ref?: Ref<HTMLButtonElement>;
+};
+
+export const buttonIconOnlySizeClasses = {
+  base: "has-[>svg:only-child]:size-10 has-[>svg:only-child]:p-0 ",
+  sm: "has-[>svg:only-child]:size-8 has-[>svg:only-child]:p-0 ",
+  lg: "has-[>svg:only-child]:size-12 has-[>svg:only-child]:p-0 ",
+  xs: "has-[>svg:only-child]:size-7 has-[>svg:only-child]:p-0 ",
+};
+
+export function Button(props: ButtonProps) {
+  const {
+    className,
+    variant,
+    size = "base",
+    rounded = "full",
+    asChild = false,
+    children,
+    icon,
+    showLeftIcon = true,
+    showRightIcon = false,
+    label,
+    iconOnly = false,
+    disabled,
+    isLoading = false,
+    ref,
+    ...restProps
+  } = props;
+  const isDisabled = disabled || isLoading;
+
+  if (asChild) {
+    return (
+      <Slot
+        ref={ref}
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size, rounded, className }))}
+        aria-disabled={isDisabled}
+        {...restProps}
+      >
+        {children}
+      </Slot>
+    );
+  }
+
+  const Comp = "button";
+
+  if (iconOnly && icon) {
+    const IconComponent = icon;
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size, rounded, className }), buttonIconOnlySizeClasses[size])}
+        disabled={isDisabled}
+        aria-disabled={isDisabled}
+        aria-busy={isDisabled}
+        {...restProps}
+      >
+        {isLoading && <Loader data-loader />}
+        {!isLoading && <IconComponent />}
+      </Comp>
+    );
+  }
+
+  const LeftIconComponent = showLeftIcon && icon ? icon : null;
+  const RightIconComponent = showRightIcon && icon ? icon : null;
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      className={cn(
+        buttonVariants({ variant, size, rounded, className }),
+        "relative",
+        isLoading && "[&>*:not([data-loader-wrapper])]:invisible",
+      )}
+      disabled={isDisabled}
+      aria-disabled={isDisabled}
+      aria-busy={isLoading}
+      {...restProps}
+    >
+      {LeftIconComponent && <LeftIconComponent />}
+      {label && <span>{label}</span>}
+      {RightIconComponent && <RightIconComponent />}
+      {children}
+      {isLoading && (
+        <span className="absolute inset-0 flex items-center justify-center" data-loader-wrapper aria-hidden="true">
+          <Loader data-loader />
+        </span>
+      )}
+    </Comp>
+  );
+}
+
+export type BaseLinkProps = {
+  variant?: VariantPropsOf<typeof buttonConfig>["variant"];
+  size?: VariantPropsOf<typeof buttonConfig>["size"];
+  rounded?: VariantPropsOf<typeof buttonConfig>["rounded"];
+  href: string;
+  component?: ElementType;
+};
+
+export type LinkProps = Omit<ComponentPropsWithoutRef<"a">, "href"> &
+  BaseLinkProps & {
+    ref?: Ref<HTMLAnchorElement>;
+  };
+
+export function Link(props: LinkProps) {
+  const {
+    variant = "primary",
+    className,
+    size = "base",
+    rounded = "full",
+    ref,
+    component: Component = "a",
+    ...rest
+  } = props;
+  return <Component className={cn(buttonVariants({ variant, size, rounded }), className)} ref={ref} {...rest} />;
+}

package/src/components/calendar/index.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { ChevronDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import * as React from "react";
+import type { DayButton } from "react-day-picker";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { Button, buttonVariants } from "../button";
+import { cn } from "#style";
+
+export type CalendarProps = ComponentProps<typeof DayPicker> & {
+  buttonVariant?: ComponentProps<typeof Button>["variant"];
+};
+
+const dayButtonClassName = "w-[42px]! max-w-[42px] h-(--cell-size)!";
+
+export function Calendar(props: CalendarProps) {
+  const {
+    className,
+    classNames,
+    showOutsideDays = true,
+    captionLayout = "label",
+    buttonVariant = "ghost",
+    formatters,
+    components,
+    ...restProps
+  } = props;
+  const defaultClassNames = getDefaultClassNames();
+
+  const buttonClassName = "bg-background size-(--cell-size)! aria-disabled:opacity-50 p-0 select-none [&>svg]:size-3";
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      weekStartsOn={1}
+      className={cn(
+        "bg-card group/calendar p-3 [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn(defaultClassNames.root, "w-fit"),
+        months: cn(defaultClassNames.months, "flex gap-4 flex-col md:flex-row relative"),
+        month: cn(defaultClassNames.month, "flex flex-col w-full gap-4"),
+        nav: cn(defaultClassNames.nav, "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between"),
+        button_previous: cn(
+          defaultClassNames.button_previous,
+          buttonVariants({ variant: buttonVariant, className: buttonClassName }),
+        ),
+        button_next: cn(
+          defaultClassNames.button_next,
+          buttonVariants({ variant: buttonVariant, className: buttonClassName }),
+        ),
+        month_caption: cn(
+          defaultClassNames.month_caption,
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size) [&>span]:typography-small text-default-foreground",
+        ),
+        dropdowns: cn(
+          "w-full flex items-center typography-tiny justify-center h-(--cell-size) gap-1.5",
+          //   "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          defaultClassNames.dropdown_root,
+          "relative border has-focus:border-active-border shadow-xs has-focus:ring-active-border/50 has-focus:ring-2 has-focus:ring-offset-0 has-focus:outline-none rounded-md-v4",
+        ),
+        dropdown: cn("absolute bg-background inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none typography-caption",
+          captionLayout === "label"
+            ? "typography-tiny"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 typography-caption h-8 [&>svg]:text-default-foreground [&>svg]:size-3.5 ",
+          defaultClassNames.caption_label,
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn(defaultClassNames.weekdays, "flex"),
+        weekday: cn(
+          defaultClassNames.weekday,
+          "text-muted-foreground rounded-md flex-1 typography-tiny select-none",
+          "w-[42px]! max-w-[42px]",
+        ),
+        week: cn(defaultClassNames.week, "flex w-full mt-2"),
+        week_number_header: cn(defaultClassNames.week_number_header, "select-none w-(--cell-size)"),
+        week_number: cn(defaultClassNames.week_number, "text-[0.8rem] select-none text-muted-foreground"),
+        day: cn(
+          defaultClassNames.day,
+          "relative w-full h-full p-0 text-center group/day select-none text-default-foreground",
+          dayButtonClassName,
+        ),
+        range_start: cn(dayButtonClassName, defaultClassNames.range_start, "bg-background"),
+        range_middle: cn(dayButtonClassName, defaultClassNames.range_middle, "rounded-none"),
+        range_end: cn(dayButtonClassName, defaultClassNames.range_end, "bg-background"),
+        today: cn(
+          "bg-background rounded-2xl-v4 data-[selected=true]:rounded-none",
+          dayButtonClassName,
+          defaultClassNames.today,
+        ),
+        outside: cn("aria-selected:text-muted-foreground text-muted-foreground", defaultClassNames.outside),
+        disabled: cn(defaultClassNames.disabled, "text-disabled-foreground opacity-50"),
+        hidden: cn(defaultClassNames.hidden, "invisible"),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef as React.Ref<HTMLDivElement>}
+              className={cn("shadow-md border border-muted-border rounded-3xl p-6!", className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          return (
+            <ChevronDownIcon
+              style={{
+                stroke: "var(--color-default-foreground)",
+              }}
+              strokeWidth={1.5}
+              className={cn(
+                "size-4!",
+                orientation === "left" && "rotate-90",
+                orientation === "right" && "-rotate-90",
+                className,
+              )}
+              {...props}
+            />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...restProps}
+    />
+  );
+}
+
+export function CalendarDayButton(props: ComponentProps<typeof DayButton>) {
+  const { className, day, modifiers, ...restProps } = props;
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="xs"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        defaultClassNames.day,
+        [
+          "data-[selected-single=true]:bg-secondary",
+          "data-[selected-single=true]:text-secondary-foreground",
+          "data-[range-middle=true]:bg-background",
+          "data-[range-middle=true]:text-default-foreground",
+          "data-[range-start=true]:bg-secondary",
+          "data-[range-start=true]:text-secondary-foreground",
+          "data-[range-end=true]:bg-secondary",
+          "data-[range-end=true]:text-secondary-foreground",
+          "group-data-[focused=true]/day:border-active-border",
+          "group-data-[focused=true]/day:ring-active-border/50",
+          "flex",
+          "aspect-square",
+          "size-auto",
+          "w-full",
+          "min-w-(--cell-size)!",
+          "flex-col",
+          "gap-1",
+          "leading-none",
+          // eslint-disable-next-line @manta-eu/no-raw-typography
+          "font-normal",
+          "group-data-[focused=true]/day:relative",
+          "group-data-[focused=true]/day:z-10",
+          "group-data-[focused=true]/day:ring-[3px]",
+          "data-[range-end=true]:rounded-2xl-v4",
+          "data-[range-middle=true]:rounded-none",
+          "data-[range-start=true]:rounded-2xl-v4",
+          // eslint-disable-next-line @manta-eu/no-raw-typography
+          "[&>span]:text-xs",
+          "[&>span]:opacity-70",
+          dayButtonClassName,
+        ],
+        className,
+      )}
+      {...restProps}
+    >
+      {props.children}
+    </Button>
+  );
+}

package/src/components/card/index.tsx

@@ -0,0 +1,118 @@
+import type { ComponentProps } from "react";
+import { forwardRef } from "react";
+import { tv } from "tailwind-variants";
+import { cn, type VariantPropsOf } from "#style";
+
+// Header, content and footer read their side padding from --card-inset, which padded cards set to 0.
+export const cardConfig = {
+  base: "flex touch-manipulation flex-col gap-6 rounded-md-v4 border border-muted-border text-default-foreground",
+  variants: {
+    padding: {
+      default: "py-6 [--card-inset:1.5rem]",
+      none: "p-0 [--card-inset:1.5rem]",
+      sm: "p-4 [--card-inset:0px]",
+      md: "p-5 [--card-inset:0px]",
+      lg: "p-6 [--card-inset:0px]",
+    },
+    surface: {
+      default: "bg-card",
+      muted: "bg-muted",
+      dashed: "border-dashed bg-transparent",
+    },
+  },
+  defaultVariants: {
+    padding: "default",
+    surface: "default",
+  } as const,
+};
+
+const cardVariants = tv(cardConfig);
+
+export type CardProps = ComponentProps<"div"> & VariantPropsOf<typeof cardConfig>;
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { className, padding, surface, ...props },
+  ref,
+) {
+  return <div className={cn(cardVariants({ padding, surface }), className)} data-slot="card" ref={ref} {...props} />;
+});
+
+export const CardHeader = forwardRef<HTMLDivElement, ComponentProps<"div">>(function CardHeader(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <div
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-(--card-inset,1.5rem) has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      data-slot="card-header"
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export const CardTitle = forwardRef<HTMLDivElement, ComponentProps<"div">>(function CardTitle(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <div
+      className={cn("typography-small-header leading-none", className)}
+      data-slot="card-title"
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export const CardDescription = forwardRef<HTMLDivElement, ComponentProps<"div">>(function CardDescription(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <div
+      className={cn("text-muted-foreground typography-small", className)}
+      data-slot="card-description"
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export const CardAction = forwardRef<HTMLDivElement, ComponentProps<"div">>(function CardAction(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <div
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      data-slot="card-action"
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export const CardContent = forwardRef<HTMLDivElement, ComponentProps<"div">>(function CardContent(
+  { className, ...props },
+  ref,
+) {
+  return <div className={cn("px-(--card-inset,1.5rem)", className)} data-slot="card-content" ref={ref} {...props} />;
+});
+
+export const CardFooter = forwardRef<HTMLDivElement, ComponentProps<"div">>(function CardFooter(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <div
+      className={cn("flex items-center px-(--card-inset,1.5rem) [.border-t]:pt-6", className)}
+      data-slot="card-footer"
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/channel-icon/google-ads-icon.tsx

@@ -0,0 +1,70 @@
+import { useId } from "react";
+
+export function GoogleAdsIcon(props: { className?: string; rounded?: boolean }) {
+  const { className, rounded } = props;
+  const clip0Id = useId();
+  const clip1Id = useId();
+
+  if (rounded) {
+    return (
+      <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <g clipPath={`url(#${clip0Id})`}>
+          <g clipPath={`url(#${clip1Id})`}>
+            <path
+              d="M0 5C0 3.67392 0.526784 2.40215 1.46447 1.46447C2.40215 0.526784 3.67392 0 5 0L15 0C16.3261 0 17.5979 0.526784 18.5355 1.46447C19.4732 2.40215 20 3.67392 20 5V15C20 16.3261 19.4732 17.5979 18.5355 18.5355C17.5979 19.4732 16.3261 20 15 20H5C3.67392 20 2.40215 19.4732 1.46447 18.5355C0.526784 17.5979 0 16.3261 0 15L0 5Z"
+              fill="#34A853"
+            />
+            <path
+              d="M8.1743 6.09497C8.2843 5.80497 8.43597 5.53747 8.6618 5.32163C8.87255 5.11656 9.12779 4.96289 9.40764 4.87259C9.68749 4.7823 9.9844 4.75781 10.2753 4.80103C10.5661 4.84425 10.8431 4.95402 11.0846 5.12179C11.3261 5.28956 11.5256 5.51081 11.6676 5.7683C12.1276 6.6058 12.6151 7.42497 13.0893 8.2533C13.881 9.62913 14.6818 11.0058 15.4643 12.3866C16.1226 13.5416 15.4093 15.0008 14.1018 15.1991C13.3018 15.3183 12.551 14.95 12.1368 14.2325C11.4418 13.0216 10.7418 11.8108 10.0468 10.605C10.0329 10.5783 10.0162 10.5539 9.9968 10.5316C9.92264 10.4716 9.89097 10.3841 9.8443 10.3066C9.53597 9.7633 9.2193 9.22413 8.91097 8.6858C8.71264 8.3358 8.50514 7.9908 8.30764 7.6408C8.13116 7.33323 8.04346 6.98274 8.0543 6.6283C8.06764 6.44497 8.09097 6.25997 8.17347 6.09497"
+              fill="white"
+            />
+            <path
+              d="M8.17445 6.09375C8.13278 6.25875 8.09528 6.42458 8.08611 6.59958C8.07278 6.98625 8.16945 7.34542 8.36278 7.68125C8.87024 8.55272 9.37497 9.42578 9.87695 10.3004C9.92278 10.3787 9.96028 10.4562 10.0053 10.5304C9.72921 11.0084 9.45143 11.4853 9.17195 11.9612C8.78611 12.6287 8.39945 13.3013 8.00778 13.9688C7.98945 13.9688 7.98528 13.9596 7.98028 13.9454C7.97611 13.9088 7.98945 13.8762 7.99861 13.8396C8.18778 13.1496 8.03111 12.5371 7.55695 12.0121C7.27456 11.7031 6.8908 11.5056 6.47528 11.4554C5.92278 11.3771 5.43528 11.5196 4.99778 11.8654C4.91945 11.9246 4.86861 12.0121 4.77695 12.0579C4.75917 12.0579 4.74833 12.0504 4.74445 12.0354C4.96528 11.6537 5.18195 11.2712 5.40278 10.8896C6.31389 9.30569 7.22667 7.72375 8.14111 6.14375C8.15028 6.12542 8.16445 6.11208 8.17445 6.09375Z"
+              fill="white"
+            />
+            <path
+              d="M4.76456 12.0499C4.85206 11.9716 4.93456 11.8882 5.02706 11.8149C6.14539 10.9316 7.82539 11.5707 8.06873 12.9699C8.12873 13.3057 8.09706 13.6282 7.99539 13.9507C7.99055 13.9771 7.98443 14.0033 7.97706 14.0291C7.93539 14.1024 7.89873 14.1807 7.85206 14.2541C7.44373 14.9307 6.84039 15.2666 6.04873 15.2166C5.61222 15.1859 5.19983 15.0049 4.8818 14.7044C4.56377 14.4038 4.35978 14.0023 4.30456 13.5682C4.24273 13.1432 4.33209 12.7099 4.55706 12.3441C4.60373 12.2607 4.65873 12.1874 4.70956 12.1049C4.73206 12.0866 4.72289 12.0499 4.76456 12.0499Z"
+              fill="white"
+            />
+            <path
+              d="M4.7644 12.0496C4.74606 12.0679 4.74606 12.0996 4.7144 12.1046C4.7094 12.0721 4.72773 12.0546 4.74606 12.0312L4.7644 12.0496ZM7.9769 14.0287C7.95856 13.9962 7.9769 13.9729 7.99523 13.9504L8.01356 13.9688L7.9769 14.0287Z"
+              fill="white"
+            />
+          </g>
+        </g>
+        <defs>
+          <clipPath id={clip0Id}>
+            <rect width="20" height="20" rx="10" fill="white" />
+          </clipPath>
+          <clipPath id={clip1Id}>
+            <rect width="20" height="20" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+      <path
+        d="M7.33836 4.41755C7.49945 3.99468 7.72095 3.60538 8.04985 3.28991C9.36542 2.0079 11.5401 2.33008 12.4329 3.94099C13.1041 5.16259 13.8156 6.35735 14.5069 7.56553C15.6614 9.57245 16.8293 11.5794 17.9704 13.593C18.9302 15.2778 17.8898 17.4055 15.9836 17.6941C14.8157 17.8686 13.7216 17.3317 13.1175 16.2846C12.104 14.5193 11.0837 12.754 10.0702 10.9954C10.0501 10.9551 10.0232 10.9216 9.99636 10.888C9.88897 10.8008 9.84198 10.6732 9.77486 10.5591C9.32515 9.7671 8.86201 8.98179 8.4123 8.19647C8.12368 7.68635 7.82164 7.18294 7.53301 6.67282C7.27124 6.21639 7.15042 5.7197 7.16385 5.19615C7.18398 4.92767 7.21754 4.65918 7.33836 4.41755Z"
+        fill="#4285F4"
+      />
+      <path
+        d="M7.3383 4.41742C7.27789 4.65906 7.22419 4.90069 7.21077 5.15575C7.19063 5.71957 7.33158 6.24312 7.61349 6.7331C8.35183 8.00169 9.09016 9.27699 9.82178 10.5523C9.8889 10.6664 9.9426 10.7805 10.0097 10.8879C9.60699 11.586 9.20427 12.2773 8.79483 12.9754C8.23101 13.9486 7.66719 14.9286 7.09666 15.9019C7.06981 15.9019 7.0631 15.8884 7.05639 15.8683C7.04968 15.8146 7.06981 15.7676 7.08324 15.7139C7.35843 14.7071 7.13022 13.8144 6.43887 13.0492C6.01601 12.5861 5.47904 12.3243 4.86153 12.237C4.05607 12.1229 3.34459 12.331 2.70694 12.8344C2.59283 12.9217 2.519 13.0492 2.38475 13.1163C2.3579 13.1163 2.34448 13.1029 2.33777 13.0828C2.65995 12.5257 2.97542 11.9686 3.2976 11.4114C4.6266 9.10248 5.9556 6.79351 7.29131 4.49125C7.30474 4.4644 7.32487 4.44427 7.3383 4.41742Z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M2.36454 13.103C2.49207 12.9889 2.61289 12.8681 2.74713 12.7607C4.37817 11.472 6.8281 12.405 7.18384 14.4455C7.2711 14.9355 7.22411 15.4053 7.07645 15.8752C7.06973 15.9154 7.06302 15.949 7.0496 15.9893C6.98919 16.0967 6.93549 16.2108 6.86837 16.3182C6.27099 17.3048 5.3917 17.7948 4.23722 17.721C2.91493 17.627 1.87455 16.6336 1.69333 15.318C1.60607 14.6804 1.7336 14.083 2.06249 13.5326C2.12961 13.4118 2.21016 13.3044 2.28399 13.1836C2.31755 13.1567 2.30413 13.103 2.36454 13.103Z"
+        fill="#34A853"
+      />
+      <path
+        d="M2.36461 13.1029C2.33776 13.1297 2.33776 13.1767 2.29078 13.1834C2.28406 13.1365 2.31091 13.1096 2.33776 13.076L2.36461 13.1029Z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M7.04963 15.9891C7.02279 15.9422 7.04963 15.9086 7.07648 15.875C7.08319 15.8817 7.09662 15.8952 7.10333 15.9019L7.04963 15.9891Z"
+        fill="#FBBC05"
+      />
+    </svg>
+  );
+}

package/src/components/channel-icon/index.tsx

@@ -0,0 +1,69 @@
+import { match } from "ts-pattern";
+import { GoogleAdsIcon } from "./google-ads-icon";
+import { MantaIcon } from "./manta-icon";
+import { MetaIcon } from "./meta-icon";
+import { ShopifyIcon } from "./shopify-icon";
+import { SnapChatIcon } from "./snapchat-icon";
+import { cn } from "#style";
+
+export type Channel = "META" | "GOOGLE_ADS" | "SNAPCHAT" | "SHOPIFY" | "MANTA";
+
+const channelDisplayName: Record<Channel, string> = {
+  META: "Meta",
+  GOOGLE_ADS: "Google Ads",
+  SNAPCHAT: "Snapchat",
+  SHOPIFY: "Shopify",
+  MANTA: "Manta",
+};
+
+export type ChannelIconProps = {
+  channel?: Channel;
+  showName?: boolean;
+  iconClassName?: string;
+  rounded?: boolean;
+  className?: string;
+};
+
+export function ChannelIcon(props: ChannelIconProps) {
+  const { channel, showName = false, iconClassName, rounded = false, className } = props;
+  if (!channel) return null;
+
+  return match(channel)
+    .with("META", () => (
+      <span className={cn("flex gap-2 items-center", className)}>
+        <MetaIcon className={cn("size-6", iconClassName)} rounded={rounded} />
+        {showName && <span className="typography-small-semibold">{channelDisplayName.META}</span>}
+      </span>
+    ))
+    .with("GOOGLE_ADS", () => (
+      <span className={cn("flex gap-2 items-center", className)}>
+        <GoogleAdsIcon className={cn("size-6", iconClassName)} rounded={rounded} />
+        {showName && <span className="typography-small-semibold">{channelDisplayName.GOOGLE_ADS}</span>}
+      </span>
+    ))
+    .with("SNAPCHAT", () => (
+      <span className={cn("flex gap-2 items-center", className)}>
+        <SnapChatIcon className={cn("size-6", iconClassName)} rounded={rounded} />
+        {showName && <span className="typography-small-semibold">{channelDisplayName.SNAPCHAT}</span>}
+      </span>
+    ))
+    .with("SHOPIFY", () => (
+      <span className={cn("flex gap-2 items-center", className)}>
+        <ShopifyIcon className={cn("size-6", iconClassName)} rounded={rounded} />
+        {showName && <span className="typography-small-semibold">{channelDisplayName.SHOPIFY}</span>}
+      </span>
+    ))
+    .with("MANTA", () => (
+      <span className={cn("flex gap-2 items-center", className)}>
+        <MantaIcon className={cn("size-6", iconClassName)} />
+        {showName && <span className="typography-small-semibold">{channelDisplayName.MANTA}</span>}
+      </span>
+    ))
+    .exhaustive();
+}
+
+export { MetaIcon } from "./meta-icon";
+export { GoogleAdsIcon } from "./google-ads-icon";
+export { SnapChatIcon } from "./snapchat-icon";
+export { ShopifyIcon } from "./shopify-icon";
+export { MantaIcon } from "./manta-icon";