@turtleclub/ui 0.3.0-beta.8 → 0.3.0

package/src/components/features/search-bar.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Input, InputProps } from "../ui";
+import { Search } from "lucide-react";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  debounce?: number;
+} & Omit<InputProps, "onChange">;
+
+export const SearchBar: React.FC<Props> = ({
+  value: initialValue,
+  onChange,
+  debounce = 300,
+  ...props
+}) => {
+  const [value, setValue] = React.useState<string>(initialValue);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    setValue(event.target.value);
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+
+    return () => clearTimeout(timeout);
+  }, [value]);
+
+  return (
+    <div className="border-border relative rounded-full border">
+      <Input
+        value={value}
+        onChange={handleInputChange}
+        className="-my-px h-9 max-w-sm md:max-w-md"
+        {...props}
+      />
+      <button
+        type="button"
+        className="bg-border border-border absolute inset-y-0 right-0 flex aspect-square h-full items-center justify-center rounded rounded-full"
+      >
+        <Search className="text-primary size-3" />
+      </button>
+    </div>
+  );
+};

package/src/components/features/segmented-navigation.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { SegmentControl, SegmentControlProps } from "../ui";
+
+type SegmentedNavigationProps<T extends string> = SegmentControlProps<T> & {
+  shouldMobileSelect: boolean;
+};
+
+export function SegmentedNavigation<T extends string>({
+  value,
+  onChange,
+  items,
+}: SegmentedNavigationProps<T>) {
+  return (
+    <div className="">
+      <SegmentControl value={value} onChange={onChange} items={items} />
+    </div>
+  );
+}

package/src/components/features/sidebar-layout.tsx

@@ -0,0 +1,190 @@
+import React from "react";
+import { ChevronRight } from "lucide-react";
+import {
+  Sidebar,
+  SidebarProvider,
+  SidebarHeader,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  SidebarFooter,
+  useSidebar,
+  SidebarTrigger,
+} from "../ui";
+import { cn } from "@/lib/utils";
+import { DotIcon, TurtleIcon } from "../icons";
+
+type SidebarItemBase = {
+  title: string;
+  icon?: any;
+};
+
+// Item with a URL (no children)
+type SidebarLink = SidebarItemBase & {
+  url: string;
+  isActive: boolean;
+  children?: never;
+};
+
+// Item with children (no URL)
+type SidebarGroupBase = SidebarItemBase & {
+  children: SidebarItem[];
+  url?: never;
+  isActive?: never;
+};
+
+export type SidebarItem = SidebarLink | SidebarGroupBase;
+
+export function TurtleSidebarLayout({
+  children,
+  sidebarSlot,
+  sidebarFooter,
+  topSlot,
+  items,
+  linkComponent,
+}: {
+  children: React.ReactNode;
+  sidebarSlot?: React.ReactNode;
+  sidebarFooter?: React.ReactNode;
+  topSlot?: React.ReactNode;
+  items: SidebarItem[];
+  linkComponent: any;
+}) {
+  return (
+    <SidebarProvider>
+      <TurtleSidebar
+        items={items}
+        sidebarFooter={sidebarFooter}
+        sidebarSlot={sidebarSlot}
+        linkComponent={linkComponent}
+      />
+      <TurtleContainer topSlot={topSlot} children={children} />
+    </SidebarProvider>
+  );
+}
+
+export function TurtleSidebar({
+  items,
+  sidebarSlot,
+  sidebarFooter,
+  linkComponent: Comp = "a",
+}: {
+  items: SidebarItem[];
+  sidebarSlot?: React.ReactNode;
+  sidebarFooter?: React.ReactNode;
+  linkComponent: any;
+}) {
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <div className="border-gradient-white border-opacity-20 relative h-[72px] w-full rounded-full shadow">
+          <TurtleIcon className="absolute -top-2 -left-2 aspect-square h-[86px]" />
+
+          <div className="text-primary mt-2 -space-y-1.5 pl-20">
+            <div className="text-3xl leading-tight font-bold">Turtle</div>
+            <div className="pl-1 text-sm font-medium">Partner Portal</div>
+          </div>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => {
+                if (item?.children?.length) {
+                  return (
+                    <Collapsible className="group/collapsible">
+                      <SidebarMenuItem>
+                        <CollapsibleTrigger asChild>
+                          <SidebarMenuButton>
+                            {item.icon && <item.icon />}
+                            <span className="grow">{item.title}</span>
+                            <ChevronRight className="transition-all group-data-[state=open]/collapsible:rotate-90" />
+                          </SidebarMenuButton>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                          <SidebarMenuSub>
+                            {item.children.map((child) => (
+                              <SidebarMenuSubItem key={child.title}>
+                                <SidebarMenuSubButton asChild isActive={child.isActive}>
+                                  <Comp href={child.url}>
+                                    {child.icon && <child.icon />}
+                                    <span className="grow">{child.title}</span>
+
+                                    <div className="relative size-[18px] shrink-0 group-data-[active=false]/menu-sub-button:hidden">
+                                      <DotIcon className="text-primary absolute top-[-15px] left-[-15px] size-12" />
+                                    </div>
+                                  </Comp>
+                                </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                            ))}
+                          </SidebarMenuSub>
+                        </CollapsibleContent>
+                      </SidebarMenuItem>
+                    </Collapsible>
+                  );
+                }
+                return (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild isActive={item.isActive}>
+                      <Comp href={item.url}>
+                        {item.icon && <item.icon />}
+                        <span className="grow">{item.title}</span>
+                        <div className="relative size-[18px] shrink-0 group-data-[active=false]/menu-button:hidden">
+                          <DotIcon className="text-primary absolute top-[-15px] left-[-15px] size-12" />
+                        </div>
+                      </Comp>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <span className="grow" />
+        <SidebarGroup>{sidebarSlot}</SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>{sidebarFooter}</SidebarFooter>
+    </Sidebar>
+  );
+}
+
+export function TurtleContainer({
+  children,
+  topSlot,
+}: {
+  children: React.ReactNode;
+  topSlot?: React.ReactNode;
+}) {
+  const { state, isMobile } = useSidebar();
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 flex h-svh flex-col items-stretch gap-1 py-2 pr-2",
+        state === "collapsed" || isMobile ? "pl-2" : "left-64"
+      )}
+    >
+      <div className="flex gap-1">
+        <SidebarTrigger className="bg-background border-border !rounded-sm" />
+        {topSlot}
+      </div>
+
+      <main
+        className={cn(
+          "bg-background border-border max-h-[96svh] grow overflow-y-auto rounded-lg border p-6"
+        )}
+      >
+        {children}
+      </main>
+    </div>
+  );
+}

package/src/components/icons/arrow.tsx

@@ -0,0 +1,23 @@
+export const ArrowIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="13"
+    height="14"
+    viewBox="0 0 13 14"
+    fill="none"
+    className={className}
+  >
+    <path
+      d="M3.65174 10.4506L3.05176 9.85059L9.05161 3.85073L9.6516 4.45072L3.65174 10.4506Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.68168 4.66626L3.31787 4.66626V3.81775L9.68168 3.81775V4.66626Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.68249 10.1821H8.83398L8.83398 3.81832H9.68249L9.68249 10.1821Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/components/icons/beta.tsx

@@ -0,0 +1,86 @@
+export const BetaIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    className={className}
+  >
+    <g filter="url(#filter0_i_11400_35580)">
+      <rect
+        x="0.135742"
+        width="24"
+        height="24"
+        rx="12"
+        fill="url(#paint0_linear_11400_35580)"
+        fill-opacity="0.6"
+      />
+      <rect
+        x="0.424196"
+        y="0.288454"
+        width="23.4231"
+        height="23.4231"
+        rx="11.7115"
+        stroke="url(#paint1_linear_11400_35580)"
+        stroke-width="0.576907"
+      />
+      <path
+        d="M19.0287 14.9918C18.8952 14.9752 17.1068 14.709 16.5278 12.4321C16.4566 12.15 16.1725 11.9799 15.8933 12.0518C15.701 12.1016 15.5607 12.2537 15.5155 12.4355C14.9132 14.7941 13.0125 14.9918 13.007 14.9925C12.7203 15.0264 12.5149 15.2898 12.5485 15.5795C12.5779 15.8305 12.7764 16.0193 13.0146 16.0435C13.148 16.0601 14.9371 16.3263 15.5162 18.6032C15.5873 18.8853 15.8714 19.0554 16.1506 18.9835C16.343 18.9337 16.4833 18.7816 16.5284 18.5998C17.13 16.2406 19.0314 16.0435 19.0369 16.0428C19.3236 16.0089 19.529 15.7455 19.4954 15.4558C19.466 15.2048 19.2675 15.016 19.0287 14.9918ZM16.022 13.9775C16.4456 14.7297 16.9945 15.211 17.5003 15.518C16.9945 15.8243 16.4456 16.3056 16.022 17.0585C15.5983 16.3056 15.0494 15.8243 14.5436 15.518C15.0494 15.2117 15.5983 14.7304 16.022 13.9775ZM14.2904 8.61183C14.1247 8.59178 11.0989 8.18106 10.1359 4.39678C10.0647 4.11467 9.78065 3.94457 9.5014 4.01648C9.3084 4.06626 9.16877 4.21838 9.1236 4.40023C8.1346 8.2827 4.97185 8.61183 4.96295 8.61252C4.67618 8.64571 4.47016 8.90777 4.50233 9.19749C4.53108 9.44986 4.73025 9.63932 4.97048 9.66352C5.13612 9.68357 8.16197 10.0943 9.12497 13.8786C9.19615 14.1607 9.48019 14.3308 9.75943 14.2589C9.95176 14.2091 10.0921 14.057 10.1372 13.8744C11.1262 9.99196 14.289 9.66283 14.2979 9.66214C14.5847 9.62895 14.7907 9.36689 14.7585 9.07717C14.7298 8.82549 14.5306 8.63603 14.2904 8.61183ZM9.63076 6.0922C10.4076 7.7655 11.5862 8.66162 12.5485 9.13802C11.5855 9.61374 10.4076 10.5105 9.63076 12.1838C8.85393 10.5105 7.67603 9.61374 6.71304 9.13802C7.67603 8.66162 8.85393 7.7655 9.63076 6.0922Z"
+        fill="#AAF1D5"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_i_11400_35580"
+        x="0.135742"
+        y="0"
+        width="24"
+        height="24"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="1.24267" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.666667 0 0 0 0 0.945098 0 0 0 0 0.835294 0 0 0 1 0"
+        />
+        <feBlend mode="normal" in2="shape" result="effect1_innerShadow_11400_35580" />
+      </filter>
+      <linearGradient
+        id="paint0_linear_11400_35580"
+        x1="0.135742"
+        y1="12"
+        x2="24.1357"
+        y2="12"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#121312" />
+        <stop offset="1" stop-color="#AAF1D5" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_11400_35580"
+        x1="1.81706"
+        y1="-5.32127e-06"
+        x2="13.2516"
+        y2="26.324"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" stop-opacity="0.4" />
+        <stop offset="0.405687" stop-color="white" stop-opacity="0.01" />
+        <stop offset="0.574372" stop-color="white" stop-opacity="0.01" />
+        <stop offset="1" stop-color="white" stop-opacity="0.1" />
+      </linearGradient>
+    </defs>
+  </svg>
+);

package/src/components/icons/dot.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+export const DotIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+      <g clip-path="url(#clip0_134_41)">
+        <g filter="url(#filter0_d_134_41)">
+          <path
+            d="M46.0792 51.8986C49.2934 51.8986 51.899 49.293 51.899 46.0788C51.899 42.8646 49.2934 40.259 46.0792 40.259C42.865 40.259 40.2594 42.8646 40.2594 46.0788C40.2594 49.293 42.865 51.8986 46.0792 51.8986Z"
+            fill="currentColor"
+          />
+        </g>
+        <g opacity="0.6" filter="url(#filter1_d_134_41)">
+          <path
+            d="M46.0789 54.6578C50.8169 54.6578 54.6578 50.8169 54.6578 46.0789C54.6578 41.3409 50.8169 37.5 46.0789 37.5C41.3409 37.5 37.5 41.3409 37.5 46.0789C37.5 50.8169 41.3409 54.6578 46.0789 54.6578Z"
+            stroke="currentColor"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_134_41"
+          x="0.259361"
+          y="0.258961"
+          width="91.6397"
+          height="91.6397"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="20" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.45098 0 0 0 0 0.952941 0 0 0 0 0.423529 0 0 0 1 0"
+          />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_134_41" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_134_41"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter1_d_134_41"
+          x="27"
+          y="31"
+          width="38.1579"
+          height="38.1579"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="5" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.45098 0 0 0 0 0.952941 0 0 0 0 0.423529 0 0 0 1 0"
+          />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_134_41" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_134_41"
+            result="shape"
+          />
+        </filter>
+        <clipPath id="clip0_134_41">
+          <rect width="92" height="92" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/icons/index.ts

@@ -0,0 +1,7 @@
+export * from "./dot";
+export * from "./turtle";
+export * from "./arrow";
+export * from "./warning";
+export * from "./update";
+export * from "./beta";
+export * from "./issue";

package/src/components/icons/issue.tsx

@@ -0,0 +1,97 @@
+export const IssueIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    className={className}
+  >
+    <g filter="url(#filter0_i_11400_35599)">
+      <rect
+        x="0.135742"
+        width="24"
+        height="24"
+        rx="12"
+        fill="url(#paint0_linear_11400_35599)"
+        fill-opacity="0.6"
+      />
+      <rect
+        x="0.424196"
+        y="0.288454"
+        width="23.4231"
+        height="23.4231"
+        rx="11.7115"
+        stroke="url(#paint1_linear_11400_35599)"
+        stroke-width="0.576907"
+      />
+      <path
+        d="M17.8164 12C17.8164 11.9282 17.8144 11.8565 17.8109 11.7881C17.8075 11.6637 17.7973 11.5359 17.7809 11.3998L19.5001 9.846L19.4666 9.74073C19.349 9.37842 19.2007 9.01817 19.0223 8.66953L18.9717 8.57177L16.6618 8.68935C16.4834 8.46514 16.2838 8.2539 16.0685 8.05907L16.0111 8.00643C15.9393 7.94354 15.873 7.88749 15.8101 7.8369L15.929 5.52706L15.8313 5.47647C15.4833 5.29806 15.1224 5.14766 14.7601 5.03213L14.6541 5L13.1017 6.71856C12.7202 6.67481 12.3053 6.6714 11.8992 6.72061L10.3461 5L10.2408 5.0335C9.87851 5.15108 9.51825 5.29941 9.16961 5.47785L9.07186 5.52843L9.18944 7.84177C8.8743 8.09061 8.58924 8.37567 8.3404 8.69081L6.02706 8.57323L5.97648 8.67098C5.79806 9.01894 5.64767 9.37988 5.53213 9.74218L5.5 9.84609L7.21857 11.3985C7.19601 11.5947 7.1837 11.7978 7.1837 12.0008C7.1837 12.2072 7.19601 12.4082 7.2172 12.603L5.5 14.1541L5.5335 14.2594C5.65108 14.6217 5.79941 14.982 5.97784 15.3306L6.02843 15.4284L8.33827 15.3094C8.39227 15.3778 8.45038 15.4441 8.5078 15.5104L8.56044 15.5678C8.75458 15.7831 8.96445 15.9807 9.19072 16.1612L9.07314 18.471L9.1709 18.5216C9.51885 18.7 9.87979 18.8504 10.2421 18.9659L10.3474 18.9994L11.9012 17.2809C12.0379 17.2966 12.1671 17.3055 12.2881 17.3109C12.5643 17.3246 12.8445 17.313 13.1036 17.2829L14.654 19.0001L14.7593 18.9666C15.1216 18.849 15.4819 18.7007 15.8305 18.5223L15.9283 18.4717L15.8107 16.1597C15.877 16.1071 15.9331 16.0599 15.9857 16.0128C16.1744 15.8501 16.3535 15.673 16.5127 15.4857C16.5599 15.4317 16.6091 15.3736 16.6618 15.3087L18.9737 15.4263L19.0243 15.3285C19.2027 14.9805 19.3531 14.6196 19.4686 14.2573L19.5021 14.152L17.7836 12.5996C17.8041 12.4075 17.8164 12.2065 17.8164 12ZM19.1084 14.2572C19.0141 14.5334 18.8999 14.8068 18.7687 15.0748L16.4991 14.9592L16.4451 15.031C16.3856 15.1096 16.3227 15.1869 16.2564 15.2621C16.106 15.4391 15.9399 15.6032 15.7615 15.757C15.6876 15.8219 15.6111 15.8848 15.5325 15.9443L15.4607 15.9983L15.5762 18.2679C15.3083 18.3991 15.0334 18.5147 14.7586 18.6076L13.2342 16.9205L13.1447 16.9328C12.8801 16.9697 12.6005 16.9855 12.2997 16.9697C12.1617 16.9643 12.0113 16.952 11.8533 16.9328L11.7658 16.9226L10.2414 18.6076C9.96526 18.5133 9.69182 18.3991 9.42384 18.2679L9.53937 16.0018L9.46964 15.9478C9.21603 15.7516 8.9795 15.5294 8.76623 15.2861L8.72248 15.2369C8.66506 15.1706 8.609 15.1022 8.55431 15.0304L8.50031 14.9607L6.23212 15.0762C6.10087 14.8083 5.98533 14.5355 5.89237 14.2586L7.57949 12.7342L7.56718 12.6447C7.53915 12.4396 7.52548 12.2229 7.52548 11.9987C7.52548 11.7888 7.53915 11.5803 7.56581 11.3793C7.56581 11.3759 7.56787 11.3725 7.56581 11.3725L7.59042 11.2727L5.89305 9.73937C5.98739 9.4632 6.10155 9.18976 6.2328 8.92178L8.50431 9.03731L8.55832 8.96553C8.81877 8.62237 9.12502 8.31612 9.47023 8.05362L9.54201 7.99962L9.42648 5.7281C9.69444 5.59685 9.9672 5.48132 10.2441 5.38835L11.709 7.01053L11.7664 7.08914L11.8909 7.06111C12.3058 7.00711 12.7536 7.01053 13.1494 7.06453L13.2389 7.07684L14.7633 5.38972C15.0395 5.48406 15.3129 5.59822 15.5809 5.72947L15.4661 7.86973L15.4606 7.99893L15.5303 8.05294C15.5987 8.10557 15.6636 8.15821 15.7279 8.21427L15.7853 8.2669C16.0287 8.47881 16.2509 8.71671 16.447 8.97032L16.501 9.04005L18.7671 8.92452C18.8984 9.19248 19.0139 9.46524 19.1069 9.74211L17.4218 11.2665L17.4321 11.354C17.4512 11.5113 17.4656 11.6623 17.469 11.8038C17.4724 11.8688 17.4744 11.9351 17.4744 12.0014C17.4744 12.2236 17.4608 12.4409 17.4327 12.6474L17.4204 12.7369L19.1084 14.2572Z"
+        fill="#FF0608"
+        fill-opacity="0.8"
+      />
+      <path
+        d="M12.5007 8.69019C10.6754 8.69019 9.19141 10.1743 9.19141 11.9995C9.19141 13.8246 10.6755 15.3087 12.5007 15.3087C14.3259 15.3087 15.81 13.8246 15.81 11.9995C15.81 10.1743 14.3259 8.69019 12.5007 8.69019ZM12.5007 14.9691C10.8628 14.9691 9.53108 13.6374 9.53108 11.9995C9.53108 10.3615 10.8627 9.02986 12.5007 9.02986C14.1386 9.02986 15.4703 10.3615 15.4703 11.9995C15.4703 13.6374 14.1386 14.9691 12.5007 14.9691Z"
+        fill="#FF0608"
+        fill-opacity="0.8"
+      />
+      <path
+        d="M12.6759 13.4678C12.6759 13.5823 12.6119 13.6851 12.5138 13.7289C12.4157 13.7728 12.3028 13.7484 12.2277 13.6678C12.1529 13.5869 12.1302 13.4653 12.1709 13.3597C12.2116 13.254 12.3071 13.1851 12.4134 13.1851C12.4829 13.1851 12.5499 13.2148 12.5991 13.2678C12.6483 13.3208 12.6759 13.3929 12.6759 13.4678ZM12.6759 10.3581V12.337C12.6759 12.4932 12.5584 12.6197 12.4134 12.6197C12.2683 12.6197 12.1509 12.4932 12.1509 12.337V10.3581C12.1509 10.2019 12.2683 10.0754 12.4134 10.0754C12.5584 10.0754 12.6759 10.2019 12.6759 10.3581Z"
+        fill="#FF0608"
+        fill-opacity="0.8"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_i_11400_35599"
+        x="0.135742"
+        y="0"
+        width="24"
+        height="24"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="1.24267" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 1 0 0 0 0 0.0235294 0 0 0 0 0.0313726 0 0 0 0.8 0"
+        />
+        <feBlend mode="normal" in2="shape" result="effect1_innerShadow_11400_35599" />
+      </filter>
+      <linearGradient
+        id="paint0_linear_11400_35599"
+        x1="0.135742"
+        y1="12"
+        x2="24.1357"
+        y2="12"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#121312" />
+        <stop offset="1" stop-color="#FF0608" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_11400_35599"
+        x1="1.81706"
+        y1="-5.32127e-06"
+        x2="13.2516"
+        y2="26.324"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" stop-opacity="0.4" />
+        <stop offset="0.405687" stop-color="white" stop-opacity="0.01" />
+        <stop offset="0.574372" stop-color="white" stop-opacity="0.01" />
+        <stop offset="1" stop-color="white" stop-opacity="0.1" />
+      </linearGradient>
+    </defs>
+  </svg>
+);