@flamingo-stack/openframe-frontend-core 0.0.518-1660.4292.1 → 0.0.518

package/src/components/community-hub-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface CommunityHubIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CommunityHubIcon: React.FC<CommunityHubIconProps> = ({ 
+  className = "", 
+  width = 19, 
+  height = 16 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 19 16" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M2.26831 10.5006C2.7145 10.2384 3.28877 10.3878 3.55127 10.8339C3.81375 11.28 3.66521 11.8542 3.21924 12.1168C2.7743 12.3786 2.44807 12.8134 2.32568 13.3266C2.76754 13.4022 3.10443 13.786 3.10449 14.2494C3.10449 14.7349 2.73505 15.1341 2.26221 15.182L2.16699 15.1869H1.80933C1.02862 15.1868 0.395752 14.5541 0.395752 13.7733C0.395757 12.3777 1.14996 11.1587 2.26831 10.5006ZM15.812 4.24941C15.8119 3.75414 15.582 3.31222 15.22 3.02504L15.0576 2.91152L14.9771 2.85781C14.5977 2.5719 14.489 2.03884 14.7402 1.62367C14.9917 1.20828 15.5145 1.05828 15.9438 1.26235L16.0281 1.30751L16.21 1.42592C17.1011 2.04549 17.6869 3.07846 17.687 4.24941C17.687 5.49852 17.0207 6.59175 16.0281 7.19252L15.9438 7.23769C15.5145 7.44157 14.9916 7.29049 14.7402 6.87514C14.4724 6.43223 14.6148 5.85655 15.0576 5.58852L15.22 5.47499C15.5823 5.18777 15.812 4.74494 15.812 4.24941ZM1.64575 4.24941C1.64584 2.99822 2.31536 1.90392 3.31079 1.30385C3.75403 1.03697 4.33009 1.17947 4.59741 1.62245C4.86469 2.06583 4.72213 2.64295 4.27881 2.9103C3.82282 3.18518 3.52084 3.68236 3.52075 4.24941C3.52075 4.74455 3.75095 5.18653 4.11279 5.47377L4.27515 5.5873L4.35449 5.64101C4.73432 5.92694 4.84293 6.45981 4.59131 6.87514C4.33984 7.29016 3.81804 7.44014 3.38892 7.23647L3.30347 7.1913L3.12158 7.07289C2.23118 6.45318 1.64575 5.41987 1.64575 4.24941ZM18.937 13.7733C18.937 14.5541 18.3042 15.1869 17.5234 15.1869H17.167C16.6492 15.1869 16.2295 14.7672 16.2295 14.2494C16.2296 13.7861 16.5654 13.4023 17.0071 13.3266C16.9045 12.8965 16.6603 12.5213 16.321 12.2572L16.1172 12.1193L16.0366 12.0656C15.6544 11.7838 15.5399 11.2529 15.7864 10.8351C16.0332 10.4172 16.5537 10.2614 16.9851 10.4603L17.0706 10.5043L17.2756 10.6349C18.2769 11.3166 18.937 12.4673 18.937 13.7733Z" fill="currentColor"/>
+      <path d="M9.0717 11.4368C7.73301 11.4368 6.62961 12.4363 6.46183 13.7292H12.8717C12.704 12.4363 11.6006 11.4368 10.2619 11.4368H9.0717ZM11.6462 4.24927C11.6459 3.15639 10.7591 2.27051 9.66618 2.27051C8.57344 2.27073 7.68764 3.15653 7.68742 4.24927C7.68742 5.3422 8.5733 6.22903 9.66618 6.22925C10.7592 6.22925 11.6462 5.34233 11.6462 4.24927ZM14.7712 14.071C14.7712 14.9176 14.0845 15.6042 13.238 15.6042H6.09562C5.24911 15.6042 4.56242 14.9176 4.56242 14.071C4.5625 11.5809 6.58154 9.56177 9.0717 9.56177H10.2619C12.752 9.5618 14.7711 11.5809 14.7712 14.071ZM13.5212 4.24927C13.5212 6.37787 11.7948 8.10425 9.66618 8.10425C7.53777 8.10403 5.81242 6.37773 5.81242 4.24927C5.81264 2.12099 7.5379 0.395727 9.66618 0.395508C11.7946 0.395508 13.5209 2.12086 13.5212 4.24927Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/community-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface CommunityIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CommunityIcon: React.FC<CommunityIconProps> = ({ 
+  className = "", 
+  width = 24, 
+  height = 24 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M18.124 7.75024C18.124 6.5895 17.3704 5.60113 16.3223 5.25561L16.6753 4.18774L17.0269 3.11987C18.9698 3.76042 20.374 5.58968 20.374 7.75024C20.3739 10.17 18.6127 12.1762 16.3018 12.5593C15.6889 12.6609 15.1085 12.2464 15.0068 11.6335C14.9053 11.0208 15.3201 10.442 15.9326 10.3401C17.1758 10.1341 18.1239 9.05156 18.124 7.75024ZM15.606 3.83618C15.8005 3.2461 16.4368 2.92535 17.0269 3.11987L16.3223 5.25561C15.7326 5.06102 15.4119 4.42595 15.606 3.83618ZM23.125 19.2859C23.1249 20.3016 22.3009 21.1243 21.2852 21.1243H20.0005C19.3792 21.1243 18.8755 20.6206 18.8755 19.9993C18.8759 19.3783 19.3794 18.8743 20.0005 18.8743H20.8457C20.6676 17.5065 19.617 16.4113 18.269 16.1731C17.6574 16.0648 17.2498 15.4811 17.3579 14.8694C17.4662 14.258 18.0487 13.8505 18.6602 13.9583C21.1971 14.4066 23.125 16.6199 23.125 19.2859Z" fill="currentColor"/>
+      <path d="M7.14307 16.125C5.01417 16.125 3.27616 17.781 3.13818 19.875H14.8613C14.7233 17.781 12.9853 16.125 10.8564 16.125H7.14307ZM12.125 7.24951C12.1247 5.52401 10.726 4.12526 9.00049 4.125C7.27476 4.125 5.87478 5.52385 5.87451 7.24951C5.87451 8.9754 7.2746 10.3755 9.00049 10.3755C10.7262 10.3752 12.125 8.97524 12.125 7.24951ZM17.1245 20.1431C17.1244 21.2377 16.2372 22.125 15.1426 22.125H2.85693C1.76239 22.1249 0.875113 21.2376 0.875 20.1431C0.875 16.6814 3.68142 13.875 7.14307 13.875H10.8564C14.3181 13.875 17.1245 16.6814 17.1245 20.1431ZM14.375 7.24951C14.375 10.2179 11.9688 12.6252 9.00049 12.6255C6.03196 12.6255 3.62451 10.218 3.62451 7.24951C3.62478 4.28121 6.03212 1.875 9.00049 1.875C11.9686 1.87526 14.3747 4.28137 14.375 7.24951Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/compare-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface CompareIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CompareIcon: React.FC<CompareIconProps> = ({ 
+  className = "", 
+  width = 24, 
+  height = 24 
+}) => {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M12 1C13.3059 1 14.4141 1.83532 14.8262 3H18.5C19.0523 3 19.5 3.44772 19.5 4C19.5 4.55228 19.0523 5 18.5 5H14.8262C14.5249 5.85152 13.8515 6.5238 13 6.8252V21H18.5C19.0523 21 19.5 21.4477 19.5 22C19.5 22.5523 19.0523 23 18.5 23H5.5C4.94772 23 4.5 22.5523 4.5 22C4.5 21.4477 4.94772 21 5.5 21H11V6.8252C10.1485 6.5238 9.47513 5.85152 9.17383 5H5.5C4.94772 5 4.5 4.55228 4.5 4C4.5 3.44772 4.94772 3 5.5 3H9.17383C9.58594 1.83532 10.6941 1 12 1ZM12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3Z" fill="currentColor"/>
+      <path d="M3.67383 7.56812C4.229 6.50318 5.771 6.50317 6.32617 7.56812L6.37891 7.67847L8.91895 13.6062C8.97225 13.7306 8.99997 13.8644 9 13.9998C9 15.7352 7.69135 17.9998 5 17.9998C2.30865 17.9998 1 15.7352 1 13.9998C1.00003 13.8644 1.02775 13.7306 1.08105 13.6062L3.62109 7.67847L3.67383 7.56812ZM17.6738 7.56812C18.229 6.50317 19.771 6.50317 20.3262 7.56812L20.3789 7.67847L22.9189 13.6062C22.9723 13.7306 23 13.8644 23 13.9998C23 15.7352 21.6914 17.9998 19 17.9998C16.3086 17.9998 15 15.7352 15 13.9998C15 13.8644 15.0277 13.7306 15.0811 13.6062L17.6211 7.67847L17.6738 7.56812ZM3.00879 14.1833C3.09268 15.0659 3.77658 15.9998 5 15.9998C6.22338 15.9998 6.9063 15.0659 6.99023 14.1833L5 9.53882L3.00879 14.1833ZM17.0088 14.1833C17.0927 15.0659 17.7766 15.9998 19 15.9998C20.2234 15.9998 20.9063 15.0659 20.9902 14.1833L19 9.53882L17.0088 14.1833Z" fill="currentColor"/>
+    </svg>
+  );
+}; 

package/src/components/context-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-h6 font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

package/src/components/custom-external-link-icon.tsx

@@ -0,0 +1,33 @@
+interface CustomExternalLinkIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomExternalLinkIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 21, 
+  height = 22,
+  ...props 
+}: CustomExternalLinkIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 21 22" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M0.375 17.0002V5.00024C0.375 2.72207 2.22183 0.875244 4.5 0.875244H7.5C8.12132 0.875244 8.625 1.37892 8.625 2.00024C8.625 2.62156 8.12132 3.12524 7.5 3.12524H4.5C3.46447 3.12524 2.625 3.96471 2.625 5.00024V17.0002C2.625 18.0358 3.46447 18.8752 4.5 18.8752H16.5C17.5355 18.8752 18.375 18.0358 18.375 17.0002V14.0002C18.375 13.3789 18.8787 12.8752 19.5 12.8752C20.1213 12.8752 20.625 13.3789 20.625 14.0002V17.0002C20.625 19.2784 18.7782 21.1252 16.5 21.1252H4.5C2.22183 21.1252 0.375 19.2784 0.375 17.0002Z" 
+      fill={fill} 
+    />
+    <path 
+      d="M20.6255 7.49902L20.6196 7.61475C20.5623 8.18202 20.0829 8.62516 19.5005 8.62549C18.9182 8.62574 18.4394 8.18324 18.3813 7.61621L18.3755 7.50049L18.3726 4.71143L10.2954 12.7959C9.85618 13.235 9.14394 13.235 8.70459 12.7959C8.26524 12.3567 8.26543 11.6445 8.70459 11.2051L16.7817 3.12207H14C13.3787 3.12207 12.875 2.61839 12.875 1.99707C12.875 1.37575 13.3787 0.87207 14 0.87207H19.4976C20.1183 0.872449 20.6222 1.37624 20.6226 1.99707L20.6255 7.49902Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/custom-fork-icon.tsx

@@ -0,0 +1,33 @@
+interface CustomForkIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomForkIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 24, 
+  height = 24,
+  ...props 
+}: CustomForkIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M10.8745 15.9995V13.1255H8.5C6.22199 13.1255 4.37526 11.2784 4.375 9.00049V8C4.375 7.37868 4.87868 6.875 5.5 6.875C6.12132 6.875 6.625 7.37868 6.625 8V9.00049C6.62526 10.0358 7.46463 10.8755 8.5 10.8755H15.5005C16.5356 10.8752 17.3752 10.0356 17.3755 9.00049V8C17.3755 7.37868 17.8792 6.875 18.5005 6.875C19.1216 6.87526 19.6255 7.37884 19.6255 8V9.00049C19.6252 11.2783 17.7783 13.1252 15.5005 13.1255H13.1245V15.9995C13.1245 16.6208 12.6208 17.1245 11.9995 17.1245C11.3784 17.1242 10.8745 16.6207 10.8745 15.9995Z" 
+      fill={fill} 
+    />
+    <path 
+      d="M13.3755 18.4995C13.3752 17.7403 12.7592 17.1255 12 17.1255C11.2408 17.1255 10.6248 17.7403 10.6245 18.4995C10.6245 19.2589 11.2406 19.875 12 19.875C12.7594 19.875 13.3755 19.2589 13.3755 18.4995ZM6.87451 5.50049C6.87451 4.74126 6.25966 4.12526 5.50049 4.125C4.7411 4.125 4.125 4.7411 4.125 5.50049C4.12526 6.25966 4.74077 6.875 5.5 6.875C6.259 6.87474 6.87425 6.25949 6.87451 5.50049ZM19.875 5.50049C19.875 4.7411 19.2589 4.125 18.4995 4.125C17.7403 4.12526 17.1255 4.74126 17.1255 5.50049C17.1258 6.25949 17.7405 6.87425 18.4995 6.87451C19.2587 6.87451 19.8747 6.25966 19.875 5.50049ZM15.6255 18.4995C15.6255 20.5015 14.002 22.125 12 22.125C9.99797 22.125 8.37451 20.5015 8.37451 18.4995C8.37478 16.4977 9.99813 14.8755 12 14.8755C14.0019 14.8755 15.6252 16.4977 15.6255 18.4995ZM9.12451 5.50049C9.12425 7.50213 7.50213 9.12425 5.50049 9.12451C3.49862 9.12451 1.87526 7.5023 1.875 5.50049C1.875 3.49846 3.49846 1.875 5.50049 1.875C7.5023 1.87526 9.12451 3.49862 9.12451 5.50049ZM22.125 5.50049C22.1247 7.5023 20.5014 9.12451 18.4995 9.12451C16.4979 9.12425 14.8758 7.50213 14.8755 5.50049C14.8755 3.49862 16.4977 1.87526 18.4995 1.875C20.5015 1.875 22.125 3.49846 22.125 5.50049Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/custom-icons.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+}
+
+export function CheckCircleIcon({ className }: IconProps) {
+  return (
+    <svg 
+      width="25" 
+      height="24" 
+      viewBox="0 0 25 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path 
+        fillRule="evenodd" 
+        clipRule="evenodd" 
+        d="M12.6006 0.875C18.7443 0.875528 23.7246 5.85713 23.7246 12.001C23.7241 18.1444 18.744 23.1245 12.6006 23.125C6.45674 23.125 1.47514 18.1447 1.47461 12.001C1.47461 5.85681 6.45642 0.875 12.6006 0.875ZM17.8955 8.2041C17.4563 7.7649 16.7441 7.76518 16.3047 8.2041L11.0996 13.4092L8.89551 11.2041L8.81055 11.127C8.36882 10.7666 7.71662 10.7926 7.30469 11.2041C6.89287 11.6159 6.86633 12.2681 7.22656 12.71L7.30469 12.7949L10.3047 15.7949C10.744 16.2342 11.4562 16.2343 11.8955 15.7949L17.8955 9.79492C18.3344 9.35555 18.3347 8.6433 17.8955 8.2041Z" 
+        fill="#5EA62E"
+      />
+    </svg>
+  );
+}
+
+export function XCircleIcon({ className }: IconProps) {
+  return (
+    <svg 
+      width="25" 
+      height="24" 
+      viewBox="0 0 25 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path 
+        d="M21.4741 12.0005C21.4741 7.09912 17.5014 3.12526 12.6001 3.125C7.69857 3.125 3.72461 7.09896 3.72461 12.0005C3.72487 16.9018 7.69873 20.8745 12.6001 20.8745C17.5012 20.8742 21.4739 16.9016 21.4741 12.0005ZM23.7241 12.0005C23.7239 18.1443 18.7439 23.1242 12.6001 23.1245C6.45609 23.1245 1.47487 18.1444 1.47461 12.0005C1.47461 5.85632 6.45593 0.875 12.6001 0.875C18.744 0.875264 23.7241 5.85648 23.7241 12.0005Z" 
+        fill="#F36666"
+      />
+      <path 
+        d="M15.3047 7.70459C15.7441 7.26549 16.4563 7.26533 16.8955 7.70459C17.3345 8.14387 17.3345 8.85613 16.8955 9.29541L14.19 11.9995L16.8955 14.7051L16.9717 14.79C17.3323 15.2319 17.3075 15.8839 16.8955 16.2959C16.4836 16.7079 15.8315 16.7327 15.3897 16.3721L15.3047 16.2959L12.5991 13.5903L9.89503 16.2959C9.45575 16.7349 8.74349 16.7349 8.30421 16.2959C7.86495 15.8566 7.86511 15.1444 8.30421 14.7051L11.0083 11.9995L8.30421 9.29541L8.22657 9.21045C7.86611 8.76858 7.8923 8.11649 8.30421 7.70459C8.71611 7.29268 9.3682 7.26649 9.81007 7.62695L9.89503 7.70459L12.5991 10.4087L15.3047 7.70459Z" 
+        fill="#F36666"
+      />
+    </svg>
+  );
+} 

package/src/components/custom-license-icon.tsx

@@ -0,0 +1,33 @@
+interface CustomLicenseIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomLicenseIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 24, 
+  height = 24,
+  ...props 
+}: CustomLicenseIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M12 1C13.3059 1 14.4141 1.83532 14.8262 3H18.5C19.0523 3 19.5 3.44772 19.5 4C19.5 4.55228 19.0523 5 18.5 5H14.8262C14.5249 5.85152 13.8515 6.5238 13 6.8252V21H18.5C19.0523 21 19.5 21.4477 19.5 22C19.5 22.5523 19.0523 23 18.5 23H5.5C4.94772 23 4.5 22.5523 4.5 22C4.5 21.4477 4.94772 21 5.5 21H11V6.8252C10.1485 6.5238 9.47513 5.85152 9.17383 5H5.5C4.94772 5 4.5 4.55228 4.5 4C4.5 3.44772 4.94772 3 5.5 3H9.17383C9.58594 1.83532 10.6941 1 12 1ZM12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3Z" 
+      fill={fill} 
+    />
+    <path 
+      d="M3.67383 7.56812C4.229 6.50318 5.771 6.50317 6.32617 7.56812L6.37891 7.67847L8.91895 13.6062C8.97225 13.7306 8.99997 13.8644 9 13.9998C9 15.7352 7.69135 17.9998 5 17.9998C2.30865 17.9998 1 15.7352 1 13.9998C1.00003 13.8644 1.02775 13.7306 1.08105 13.6062L3.62109 7.67847L3.67383 7.56812ZM17.6738 7.56812C18.229 6.50317 19.771 6.50317 20.3262 7.56812L20.3789 7.67847L22.9189 13.6062C22.9723 13.7306 23 13.8644 23 13.9998C23 15.7352 21.6914 17.9998 19 17.9998C16.3086 17.9998 15 15.7352 15 13.9998C15 13.8644 15.0277 13.7306 15.0811 13.6062L17.6211 7.67847L17.6738 7.56812ZM3.00879 14.1833C3.09268 15.0659 3.77658 15.9998 5 15.9998C6.22338 15.9998 6.9063 15.0659 6.99023 14.1833L5 9.53882L3.00879 14.1833ZM17.0088 14.1833C17.0927 15.0659 17.7766 15.9998 19 15.9998C20.2234 15.9998 20.9063 15.0659 20.9902 14.1833L19 9.53882L17.0088 14.1833Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/custom-star-icon.tsx

@@ -0,0 +1,29 @@
+interface CustomStarIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomStarIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 24, 
+  height = 24,
+  ...props 
+}: CustomStarIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M9.74696 2.14709C10.7891 0.38904 13.4111 0.44767 14.348 2.32287L16.3739 6.37756L20.871 7.02356C22.9667 7.3244 23.8383 9.83383 22.4589 11.3683L22.3197 11.5133L19.0839 14.6261L19.8514 19.0441C20.2229 21.184 17.9836 22.8236 16.056 21.8229L11.9999 19.715L7.94374 21.8229C6.0162 22.824 3.77554 21.184 4.14686 19.0441L4.91298 14.6261L1.68007 11.5133C0.106241 9.99772 0.964838 7.33451 3.12733 7.02356L7.6244 6.37756L9.65174 2.32287L9.74696 2.14709ZM12.3353 3.32922C12.1972 3.05267 11.8026 3.05267 11.6644 3.32922L9.60926 7.4425C9.29773 8.066 8.69959 8.49629 8.00965 8.59533L3.44813 9.25158C3.13914 9.29594 3.01673 9.67519 3.24159 9.89172L6.52284 13.0529L6.70008 13.2462C7.0832 13.7194 7.24804 14.3388 7.14247 14.9469L6.36464 19.4293C6.31198 19.7348 6.63142 19.9691 6.90663 19.8263L11.0199 17.6891L11.2557 17.5851C11.7356 17.4056 12.2642 17.4055 12.744 17.5851L12.9784 17.6891L17.0932 19.8263C17.3682 19.9687 17.6877 19.7346 17.6351 19.4293L16.8573 14.9469C16.7366 14.2518 16.9688 13.5422 17.4769 13.0529L20.7582 9.89172C20.9827 9.67519 20.8604 9.29605 20.5516 9.25158L15.9887 8.59533C15.2991 8.49614 14.702 8.06571 14.3905 7.4425L12.3353 3.32922Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/custom-time-icon.tsx

@@ -0,0 +1,33 @@
+interface CustomTimeIconProps {
+  className?: string;
+  fill?: string;
+  width?: number;
+  height?: number;
+}
+
+export const CustomTimeIcon = ({ 
+  className, 
+  fill = "#888888", 
+  width = 24, 
+  height = 24,
+  ...props 
+}: CustomTimeIconProps) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    {...props}
+  >
+    <path 
+      d="M20.8745 12.0005C20.8745 7.09912 16.9018 3.12526 12.0005 3.125C7.09896 3.125 3.125 7.09896 3.125 12.0005C3.12526 16.9018 7.09912 20.8745 12.0005 20.8745C16.9016 20.8742 20.8742 16.9016 20.8745 12.0005ZM23.1245 12.0005C23.1242 18.1443 18.1443 23.1242 12.0005 23.1245C5.85648 23.1245 0.875264 18.1444 0.875 12.0005C0.875 5.85632 5.85632 0.875 12.0005 0.875C18.1444 0.875264 23.1245 5.85648 23.1245 12.0005Z" 
+      fill={fill} 
+    />
+    <path 
+      d="M10.8752 8.5C10.8752 7.87868 11.3789 7.375 12.0002 7.375C12.6216 7.375 13.1252 7.87868 13.1252 8.5V11.5337L14.7952 13.2051L14.8728 13.29C15.2331 13.7319 15.207 14.3841 14.7952 14.7959C14.3833 15.2073 13.7325 15.2322 13.2908 14.8721L13.2043 14.7959L11.2048 12.7949C10.994 12.584 10.8752 12.2978 10.8752 11.9995V8.5Z" 
+      fill={fill} 
+    />
+  </svg>
+) 

package/src/components/donut-icon.tsx

@@ -0,0 +1,21 @@
+export function DonutIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M19.7949 18.2041C20.2343 18.6431 20.2352 19.3553 19.7964 19.7949C19.3575 20.2343 18.6452 20.2349 18.2056 19.7964L19.7949 18.2041ZM14.8745 12.0005C14.8745 11.5126 14.7541 11.0558 14.542 10.6558C14.0579 9.74319 13.1004 9.12518 12.0005 9.125C10.4127 9.125 9.125 10.4127 9.125 12.0005C9.12526 13.5881 10.4128 14.8745 12.0005 14.8745C13.5879 14.8742 14.8742 13.5879 14.8745 12.0005ZM19.9736 6.50586C20.5226 6.21523 21.2033 6.42435 21.4941 6.97314C21.7847 7.52205 21.5755 8.20276 21.0269 8.49365L19.9736 6.50586ZM17.1245 12.0005C17.1244 13.0089 16.8322 13.9484 16.3291 14.7412L19.7949 18.2041L18.9995 18.9995L18.2056 19.7964L14.7368 16.332C13.9449 16.8334 13.007 17.1244 12.0005 17.1245C9.17019 17.1245 6.87526 14.8307 6.875 12.0005C6.875 9.5564 8.58603 7.51213 10.8755 6.99951V2C10.8755 1.37868 11.3792 0.875 12.0005 0.875C12.6216 0.875264 13.1255 1.37884 13.1255 2V6.99951C14.2221 7.24534 15.1837 7.8436 15.8896 8.6665L19.9736 6.50586L20.4995 7.50049L21.0269 8.49365L16.9429 10.6558C17.0594 11.085 17.1245 11.5358 17.1245 12.0005Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.8745 12.0005C20.8745 7.09912 16.9018 3.12526 12.0005 3.125C7.09896 3.125 3.125 7.09896 3.125 12.0005C3.12526 16.9018 7.09912 20.8745 12.0005 20.8745C16.9016 20.8742 20.8742 16.9016 20.8745 12.0005ZM23.1245 12.0005C23.1242 18.1443 18.1443 23.1242 12.0005 23.1245C5.85648 23.1245 0.875264 18.1444 0.875 12.0005C0.875 5.85632 5.85632 0.875 12.0005 0.875C18.1444 0.875264 23.1245 5.85648 23.1245 12.0005Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+} 

package/src/components/edit-profile-icon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface EditProfileIconProps extends React.SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+export function EditProfileIcon({ className = '', ...props }: EditProfileIconProps) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path d="M1.875 18.0006V6.00057C1.875 3.7224 3.72183 1.87557 6 1.87557H9C9.62132 1.87557 10.125 2.37925 10.125 3.00057C10.125 3.62189 9.62132 4.12557 9 4.12557H6C4.96447 4.12557 4.125 4.96504 4.125 6.00057V18.0006C4.125 19.0361 4.96447 19.8756 6 19.8756H18C19.0355 19.8756 19.875 19.0361 19.875 18.0006V15.0006C19.875 14.3793 20.3787 13.8756 21 13.8756C21.6213 13.8756 22.125 14.3793 22.125 15.0006V18.0006C22.125 20.2787 20.2782 22.1256 18 22.1256H6C3.72183 22.1256 1.875 20.2787 1.875 18.0006Z" fill="#FAFAFA"/>
+      <path d="M14.8315 3.8326C15.2436 3.42057 15.8955 3.39414 16.3374 3.75497L16.4224 3.8326L20.1724 7.5826L20.25 7.66757C20.6101 8.10943 20.5841 8.76166 20.1724 9.17342C19.7604 9.58528 19.1083 9.61027 18.6665 9.2496L18.5815 9.17342L14.8315 5.42343L14.7539 5.337C14.3938 4.89519 14.4199 4.24439 14.8315 3.8326Z" fill="#FAFAFA"/>
+      <path d="M17.1024 1.57923C18.3298 0.57828 20.1405 0.650507 21.2845 1.79457L22.2059 2.71595L22.4213 2.95326C23.4221 4.18067 23.35 5.99135 22.2059 7.13539L13.8109 15.5319C13.2789 16.0639 12.6125 16.4387 11.8861 16.6188L11.5712 16.6832L9.40026 17.0451C7.96242 17.2843 6.71613 16.0381 6.95544 14.6002L7.31725 12.4293C7.45859 11.5813 7.86069 10.7975 8.46862 10.1896L16.8651 1.79457L17.1024 1.57923ZM19.6937 3.38539C19.3948 3.0865 18.9332 3.04861 18.5936 3.27259L18.4559 3.38539L10.0609 11.7819C9.78466 12.0581 9.60079 12.4131 9.53649 12.7985L9.20251 14.7965L11.202 14.464C11.5874 14.3997 11.9424 14.2158 12.2186 13.9396L20.6151 5.54457C20.914 5.24571 20.9518 4.78406 20.7279 4.44447L20.6151 4.30677L19.6937 3.38539Z" fill="#FAFAFA"/>
+    </svg>
+  );
+} 

package/src/components/elestio-logo.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+/**
+ * Official Elestio logo with unique IDs to prevent gradient/clip-path collisions
+ * when the same SVG is rendered multiple times on the page.
+ */
+export const ElestioLogo = ({ className, ...props }: { className?: string } & React.SVGProps<SVGSVGElement>) => {
+  // Generate unique ID suffix to avoid ID collisions between instances
+  const uniqueId = React.useId();
+
+  return (
+    <svg
+      {...props}
+      className={className}
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id={`mask0_${uniqueId}`}
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="2"
+        y="2"
+        width="21"
+        height="20"
+      >
+        <path
+          d="M15.0429 16.9829C14.2182 17.3609 13.256 17.6014 12.2251 17.6014C9.95706 17.6014 7.96393 16.1924 7.27664 13.9932H21.8471C21.9502 13.2715 22.0876 12.5842 22.0876 11.8626C22.0876 6.60479 17.8264 2 12.4657 2C6.8299 2 2.5 6.57045 2.5 12.1375C2.5 17.6014 6.933 22 12.3969 22C14.8368 22 17.2423 21.0034 18.9949 19.4227L15.0429 16.9829ZM12.4313 6.433C14.7337 6.433 16.7955 7.77325 17.5515 10.0413H7.20791C7.8952 7.84192 10.1976 6.433 12.4313 6.433Z"
+          fill="black"
+        />
+      </mask>
+      <g mask={`url(#mask0_${uniqueId})`}>
+        <path d="M18.9942 8.73535H6.62305V14.9209H18.9942V8.73535Z" fill="#A91A1F" />
+        <path d="M12.4211 6.4445C12.5622 6.4445 12.7034 6.4445 12.8092 6.47969L7.87043 2.89355C7.34128 3.13966 6.8474 3.45608 6.3888 3.80766C3.21389 6.12808 1.73227 9.89003 2.26142 13.5465L7.65454 9.76642C8.50118 7.69204 10.1976 6.4445 12.4211 6.4445Z" fill={`url(#paint0_linear_${uniqueId})`} />
+        <path d="M6.96148 12.031C6.96148 11.2385 7.18239 10.4837 7.48272 9.7666C5.86846 10.9366 3.7705 12.4462 2.15625 13.6162C2.23133 14.2201 2.3815 14.8239 2.5692 15.4277C3.84559 19.4283 7.22426 22.1835 11.091 22.825C11.0159 22.5986 10.0398 19.617 9.1013 16.5978C7.78738 15.541 6.96148 13.8804 6.96148 12.031Z" fill={`url(#paint1_linear_${uniqueId})`} />
+        <path d="M15.3086 16.7828C14.4586 17.3044 13.4314 17.6174 12.3335 17.6174C10.9523 17.6174 9.67724 17.1305 8.68555 16.2959L10.5627 21.9987C11.1293 22.1031 11.696 22.1379 12.2981 22.1379C16.2648 22.1379 19.665 19.9471 21.4004 16.748H15.3086V16.7828Z" fill={`url(#paint2_linear_${uniqueId})`} />
+        <path d="M17.6157 10.5868L19.4371 4.9167C19.0591 4.50436 18.6123 4.1607 18.1656 3.81706C15.0728 1.54901 11.0865 1.34283 7.89062 2.92358L12.7016 6.42873C15.1072 6.63496 17.0659 8.31877 17.6157 10.5868Z" fill={`url(#paint3_linear_${uniqueId})`} />
+        <path d="M19.8927 3.37793L17.3451 9.61093C17.4894 10.0644 17.5855 10.5554 17.5855 11.0466C17.5855 13.1998 16.1435 15.0887 13.9805 16.1463H22.296C22.6804 15.6174 22.969 15.013 23.2092 14.4464C24.7954 10.4043 23.3535 6.17334 19.8927 3.37793Z" fill={`url(#paint4_linear_${uniqueId})`} />
+      </g>
+      <defs>
+        <linearGradient id={`paint0_linear_${uniqueId}`} x1="7.48507" y1="13.5074" x2="7.48507" y2="2.88726" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#EC5A22" />
+          <stop offset="1" stopColor="#F5A11A" />
+        </linearGradient>
+        <linearGradient id={`paint1_linear_${uniqueId}`} x1="6.63337" y1="22.84" x2="6.63337" y2="9.77508" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#BF161C" />
+          <stop offset="1" stopColor="#E81C24" />
+        </linearGradient>
+        <linearGradient id={`paint2_linear_${uniqueId}`} x1="15.0856" y1="22.1907" x2="15.0856" y2="16.3259" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#8C278A" />
+          <stop offset="1" stopColor="#A567A5" />
+        </linearGradient>
+        <linearGradient id={`paint3_linear_${uniqueId}`} x1="13.6735" y1="10.598" x2="13.6735" y2="1.92347" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#F28E1E" />
+          <stop offset="1" stopColor="#FFC605" />
+        </linearGradient>
+        <linearGradient id={`paint4_linear_${uniqueId}`} x1="18.8642" y1="16.1243" x2="18.8642" y2="3.36255" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#00A9EA" />
+          <stop offset="1" stopColor="#6DCAF1" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};