Logo

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6const logoVariants = cva(
7  "poyraz-logo group relative isolate inline-flex overflow-hidden outline-none transition-[opacity,transform] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)] focus-visible:ring-[3px] focus-visible:ring-ring/25",
8  {
9    variants: {
10      effect: {
11        none: "",
12        shine: "poyraz-logo-shine",
13        "shine-loop": "poyraz-logo-shine poyraz-logo-shine-loop",
14      },
15      radius: {
16        none: "rounded-none",
17        sm: "rounded-sm",
18        md: "rounded-md",
19        lg: "rounded-lg",
20        xl: "rounded-xl",
21        full: "rounded-full",
22      },
23      interactive: {
24        true: "cursor-pointer hover:shadow-md active:scale-[0.99]",
25        false: "",
26      },
27    },
28    defaultVariants: { effect: "shine", radius: "lg", interactive: true },
29  },
30);
31 
32export interface LogoProps
33  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof logoVariants> {
34  href?: string;
35  src?: string;
36  width?: number;
37  height?: number;
38  alt?: string;
39}
40 
41function Logo({
42  alt = "Poyraz Logo",
43  className,
44  effect = "shine",
45  height = 48,
46  href,
47  interactive = true,
48  radius = "lg",
49  src = "/logo/logo.jpeg",
50  style,
51  width = 48,
52  ...props
53}: LogoProps) {
54  const sharedProps = {
55    "data-effect": effect,
56    "data-radius": radius,
57    "data-slot": "logo",
58    className: cn(logoVariants({ effect, radius, interactive }), className),
59    style: { width, height, ...style },
60  };
61 
62  const mark = (
63    <img
64      data-slot="logo-image"
65      src={src}
66      alt={alt}
67      width={width}
68      height={height}
69      className="relative z-0 h-full w-full object-cover"
70    />
71  );
72 
73  if (href) {
74    return (
75      <a href={href} {...sharedProps} {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}>
76        {mark}
77      </a>
78    );
79  }
80 
81  return (
82    <span {...sharedProps} {...props}>
83      {mark}
84    </span>
85  );
86}
87Logo.displayName = "Logo";
88 
89export { Logo, logoVariants };