uiable
blockblock-component-1source: ok · hit
Component 1
Component 1 variant for block.
npx shadcn add "https://uiable.com/r/block-component-1.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · light@tabler/icons-react
Registry dependencies
@uiable/button@uiable/card@uiable/separator
Files10 · source cached 10/8/2026, 1:24:12 PM
src/components/uiable/blocks/landing/component-1/component-1.tsx
// react
import type { ComponentType } from "react"
// next
import Link from "next/link"
// shadcn
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
// project-imports
import categoryCounts from "@/category-counts.json"
import BorderGlow from "@/components/animation/BorderGlow"
import SectionHeader from "@/components/uiable/blocks/landing/components/SectionHeader"
import ButtonSvg from "@/images/svg/button"
import ButtonGroupSvg from "@/images/svg/ButtonGroup"
import InputOtpSvg from "@/images/svg/InputOtp"
import ItemSvg from "@/images/svg/item"
import SwitchSvg from "@/images/svg/switch"
import ToggleGroupSvg from "@/images/svg/ToggleGroup"
// assets
import { IconArrowUpRight } from "@tabler/icons-react"
// types
interface ComponentEntry {
title: string
slug: string
count: string
Svg: ComponentType<{ className?: string }>
}
interface ComponentCardProps {
title: string
slug: string
count: string
Svg: ComponentType<{ className?: string }>
}
const componentsData: ComponentEntry[] = [
{
title: "Button",
slug: "button",
count: `${categoryCounts["button"] || 0} variants`,
Svg: ButtonSvg,
},
{
title: "Button Group",
slug: "button-group",
count: `${categoryCounts["button-group"] || 0} variants`,
Svg: ButtonGroupSvg,
},
{
title: "Input OTP",
slug: "input-otp",
count: `${categoryCounts["input-otp"] || 0} variants`,
Svg: InputOtpSvg,
},
{
title: "Item",
slug: "item",
count: `${categoryCounts["item"] || 0} variants`,
Svg: ItemSvg,
},
{
title: "Switch",
slug: "switch",
count: `${categoryCounts["switch"] || 0} variants`,
Svg: SwitchSvg,
},
{
title: "Toggle Group",
slug: "toggle-group",
count: `${categoryCounts["toggle-group"] || 0} variants`,
Svg: ToggleGroupSvg,
},
]
function ComponentCard({ title, slug, count, Svg }: ComponentCardProps) {
return (
<BorderGlow className="rounded-lg">
<Link href={`/components/${slug}`} className="group block cursor-pointer">
<Card className="mb-0 overflow-hidden border-0 transition-all duration-300">
<CardContent className="flex flex-col gap-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<p className="font-sans text-base leading-none font-medium tracking-normal text-secondary-foreground capitalize">
{title}
</p>
<Separator orientation="vertical" />
<p className="text-sm font-medium text-muted-foreground">
{count}
</p>
</div>
<div className="flex flex-row items-center gap-2 group-hover:text-primary">
<IconArrowUpRight
aria-hidden="true"
className="size-5 text-foreground"
/>
</div>
</div>
<div className="h-px w-full bg-border/70" />
<div className="flex min-h-40 items-center justify-center p-0">
<Svg className="h-full max-h-45 w-full max-w-7xl" />
</div>
</CardContent>
</Card>
</Link>
</BorderGlow>
)
}
// ------------------------------ | COMPONENT 1 | ------------------------------ //
export default function Component1() {
return (
<section className="mx-auto flex w-full flex-col gap-12.5 px-4 py-12.5 sm:px-8">
<SectionHeader
title="Components designed for real applications"
subtitle="Carefully crafted components built with accessibility, consistency, and developer experience in mind."
/>
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
{componentsData.map((entry) => (
<ComponentCard key={entry.title} {...entry} />
))}
</div>
<div className="flex items-center justify-center">
<Button
variant="outline"
size="lg"
nativeButton={false}
render={<Link href="/components" />}
className="h-11 gap-2 rounded-lg border-border bg-card px-6 font-medium text-foreground hover:bg-accent dark:border-border dark:bg-card dark:hover:bg-accent/10"
>
View Components
<IconArrowUpRight aria-hidden="true" className="size-5" />
</Button>
</div>
</section>
)
}
src/category-counts.json
{
"accordion": 10,
"alert": 46,
"alert-dialog": 10,
"aspect-ratio": 5,
"attachment": 5,
"avatar": 15,
"badge": 37,
"layout": 14,
"breadcrumb": 11,
"bubble": 8,
"button": 49,
"button-group": 15,
"calendar": 12,
"card": 24,
"carousel": 9,
"changelog": 3,
"chart": 10,
"checkbox": 11,
"collapsible": 6,
"combobox": 14,
"command": 9,
"context-menu": 13,
"coupon": 3,
"cursor": 3,
"data-table": 4,
"date-picker": 8,
"dialog": 15,
"drawer": 6,
"dropdown-menu": 25,
"empty": 8,
"field": 12,
"hover-card": 5,
"input": 16,
"input-group": 22,
"input-otp": 11,
"item": 15,
"kbd": 7,
"label": 4,
"list-group": 13,
"marker": 7,
"menubar": 8,
"message": 5,
"message-scroller": 9,
"native-select": 3,
"navigation-menu": 3,
"pagination": 11,
"popover": 8,
"progress": 20,
"questionnaire": 7,
"radio": 1,
"radio-group": 9,
"resizable": 7,
"scroll-area": 5,
"select": 10,
"separator": 8,
"sheet": 5,
"sidebar": 17,
"skeleton": 8,
"slider": 8,
"sonner": 8,
"spinner": 21,
"switch": 11,
"table": 6,
"tabs": 10,
"textarea": 8,
"timeline": 7,
"toggle": 6,
"toggle-group": 8,
"tooltip": 11,
"tree-view": 7,
"typography": 22,
"contact": 24,
"content": 17,
"cta": 12,
"e-commerce": 25,
"faq": 19,
"feature": 42,
"footer": 21,
"gallery": 11,
"hero": 32,
"landing": 14,
"portfolio": 11,
"pricing": 19,
"process": 12,
"small-hero": 7,
"statistics": 13,
"team": 14,
"testimonial": 24,
"bento": 8,
"charts": 8,
"check-mail": 2,
"code-verification": 7,
"coming-soon": 2,
"component-layout": 1,
"dashboard-layout": 3,
"doc-layout": 1,
"error-404": 2,
"error-500": 2,
"forgot-password": 5,
"join-waitlist": 1,
"login": 7,
"navbar": 11,
"reset-password": 1,
"sign-up": 7,
"tables": 1,
"under-construction": 2,
"widgets": 20
}
src/components/animation/BorderGlow.tsx
"use client"
import {
ReactNode,
useCallback,
useEffect,
useRef,
useState,
type CSSProperties,
type PointerEvent,
} from "react"
// types
interface BorderGlowProps {
children?: ReactNode
className?: string
edgeSensitivity?: number
glowColor?: string
backgroundColor?: string
glowRadius?: number
glowIntensity?: number
coneSpread?: number
animated?: boolean
colors?: string[]
fillOpacity?: number
}
function parseHSL(hslStr: string): { h: number; s: number; l: number } {
const match = hslStr.match(/([\d.]+)\s*([\d.]+)%?\s*([\d.]+)%?/)
if (!match) return { h: 221, s: 100, l: 64 }
return {
h: parseFloat(match[1]),
s: parseFloat(match[2]),
l: parseFloat(match[3]),
}
}
function rgbToHsl(
r: number,
g: number,
b: number
): { h: number; s: number; l: number } {
r /= 255
g /= 255
b /= 255
const max = Math.max(r, g, b),
min = Math.min(r, g, b)
const l = (max + min) / 2
if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }
const d = max - min
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
let h = 0
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
else if (max === g) h = ((b - r) / d + 2) / 6
else h = ((r - g) / d + 4) / 6
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100),
}
}
function readPrimaryAsHSL(): string | null {
if (typeof window === "undefined") return null
const style = getComputedStyle(document.body)
const primary = style.getPropertyValue("--primary").trim()
if (!primary) return null
const rgbMatch = primary.match(
/rgb\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*\)/
)
if (rgbMatch) {
const { h, s, l } = rgbToHsl(+rgbMatch[1], +rgbMatch[2], +rgbMatch[3])
return `${h} ${s} ${l}`
}
const hexMatch = primary.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)
if (hexMatch) {
const { h, s, l } = rgbToHsl(
parseInt(hexMatch[1], 16),
parseInt(hexMatch[2], 16),
parseInt(hexMatch[3], 16)
)
return `${h} ${s} ${l}`
}
return null
}
function buildBoxShadow(glowColor: string, intensity: number): string {
const { h, s, l } = parseHSL(glowColor)
const base = `${h}deg ${s}% ${l}%`
const layers: [number, number, number, number, number, boolean][] = [
[0, 0, 0, 1, 100, true],
[0, 0, 1, 0, 60, true],
[0, 0, 3, 0, 50, true],
[0, 0, 6, 0, 40, true],
[0, 0, 15, 0, 30, true],
[0, 0, 25, 2, 20, true],
[0, 0, 50, 2, 10, true],
[0, 0, 1, 0, 60, false],
[0, 0, 3, 0, 50, false],
[0, 0, 6, 0, 40, false],
[0, 0, 15, 0, 30, false],
[0, 0, 25, 2, 20, false],
[0, 0, 50, 2, 10, false],
]
return layers
.map(([x, y, blur, spread, alpha, inset]) => {
const a = Math.min(alpha * intensity, 100)
return `${inset ? "inset " : ""}${x}px ${y}px ${blur}px ${spread}px hsl(${base} / ${a}%)`
})
.join(", ")
}
function easeOutCubic(x: number) {
return 1 - Math.pow(1 - x, 3)
}
function easeInCubic(x: number) {
return x * x * x
}
interface AnimateOpts {
start?: number
end?: number
duration?: number
delay?: number
ease?: (t: number) => number
onUpdate: (v: number) => void
onEnd?: () => void
}
function animateValue({
start = 0,
end = 100,
duration = 1000,
delay = 0,
ease = easeOutCubic,
onUpdate,
onEnd,
}: AnimateOpts) {
const t0 = performance.now() + delay
function tick() {
const elapsed = performance.now() - t0
const t = Math.min(elapsed / duration, 1)
onUpdate(start + (end - start) * ease(t))
if (t < 1) requestAnimationFrame(tick)
else if (onEnd) onEnd()
}
setTimeout(() => requestAnimationFrame(tick), delay)
}
const GRADIENT_POSITIONS = [
"80% 55%",
"69% 34%",
"8% 6%",
"41% 38%",
"86% 85%",
"82% 18%",
"51% 4%",
]
const COLOR_MAP = [0, 1, 2, 0, 1, 2, 1]
function buildMeshGradients(colors: string[]): string[] {
const gradients: string[] = []
for (let i = 0; i < 7; i++) {
const c = colors[Math.min(COLOR_MAP[i], colors.length - 1)]
gradients.push(
`radial-gradient(at ${GRADIENT_POSITIONS[i]}, ${c} 0px, transparent 50%)`
)
}
gradients.push(`linear-gradient(${colors[0]} 0 100%)`)
return gradients
}
export default function BorderGlow({
children,
className = "",
edgeSensitivity = 30,
glowColor,
backgroundColor = "var(--primary)",
glowRadius = 40,
glowIntensity = 1.0,
coneSpread = 25,
animated = false,
colors = ["var(--primary)", "var(--primary)", "var(--primary)"],
fillOpacity = 0.35,
}: BorderGlowProps) {
const cardRef = useRef<HTMLDivElement>(null)
const [isHovered, setIsHovered] = useState(false)
const [cursorAngle, setCursorAngle] = useState(45)
const [edgeProximity, setEdgeProximity] = useState(0)
const [sweepActive, setSweepActive] = useState(false)
const [internalGlowColor, setInternalGlowColor] = useState("221 100 64")
const resolvedGlowColor = glowColor || internalGlowColor
useEffect(() => {
if (glowColor) return
const update = () => {
requestAnimationFrame(() => {
const hsl = readPrimaryAsHSL()
if (hsl) setInternalGlowColor(hsl)
})
}
update()
const observer = new MutationObserver((mutations) => {
for (const m of mutations) {
if (
m.type === "attributes" &&
(m.attributeName === "class" || m.attributeName === "style")
) {
update()
}
}
for (const m of mutations) {
if (m.type === "childList") {
update()
}
}
})
observer.observe(document.body, {
attributes: true,
attributeFilter: ["class"],
})
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class", "style"],
})
observer.observe(document.head, { childList: true, subtree: true })
return () => observer.disconnect()
}, [glowColor])
const getCenterOfElement = useCallback((el: HTMLElement) => {
const { width, height } = el.getBoundingClientRect()
return [width / 2, height / 2]
}, [])
const getEdgeProximity = useCallback(
(el: HTMLElement, x: number, y: number) => {
const [cx, cy] = getCenterOfElement(el)
const dx = x - cx
const dy = y - cy
let kx = Infinity
let ky = Infinity
if (dx !== 0) kx = cx / Math.abs(dx)
if (dy !== 0) ky = cy / Math.abs(dy)
return Math.min(Math.max(1 / Math.min(kx, ky), 0), 1)
},
[getCenterOfElement]
)
const getCursorAngle = useCallback(
(el: HTMLElement, x: number, y: number) => {
const [cx, cy] = getCenterOfElement(el)
const dx = x - cx
const dy = y - cy
if (dx === 0 && dy === 0) return 0
const radians = Math.atan2(dy, dx)
let degrees = radians * (180 / Math.PI) + 90
if (degrees < 0) degrees += 360
return degrees
},
[getCenterOfElement]
)
const handlePointerMove = useCallback(
(e: PointerEvent<HTMLDivElement>) => {
const card = cardRef.current
if (!card) return
const rect = card.getBoundingClientRect()
const x = e.clientX - rect.left
const y = e.clientY - rect.top
setEdgeProximity(getEdgeProximity(card, x, y))
setCursorAngle(getCursorAngle(card, x, y))
},
[getEdgeProximity, getCursorAngle]
)
useEffect(() => {
if (!animated) return
const angleStart = 110
const angleEnd = 465
setTimeout(() => setSweepActive(true), 0)
setTimeout(() => setCursorAngle(angleStart), 0)
animateValue({ duration: 500, onUpdate: (v) => setEdgeProximity(v / 100) })
animateValue({
ease: easeInCubic,
duration: 1500,
end: 50,
onUpdate: (v) => {
setCursorAngle((angleEnd - angleStart) * (v / 100) + angleStart)
},
})
animateValue({
ease: easeOutCubic,
delay: 1500,
duration: 2250,
start: 50,
end: 100,
onUpdate: (v) => {
setCursorAngle((angleEnd - angleStart) * (v / 100) + angleStart)
},
})
animateValue({
ease: easeInCubic,
delay: 2500,
duration: 1500,
start: 100,
end: 0,
onUpdate: (v) => setEdgeProximity(v / 100),
onEnd: () => setSweepActive(false),
})
}, [animated])
const colorSensitivity = edgeSensitivity + 20
const isVisible = isHovered || sweepActive
const borderOpacity = Math.max(
isVisible
? Math.max(
0,
(edgeProximity * 100 - colorSensitivity) / (100 - colorSensitivity)
)
: 0.12,
0.12
)
const glowOpacity = isVisible
? Math.max(
0,
(edgeProximity * 100 - edgeSensitivity) / (100 - edgeSensitivity)
)
: 0.07
const meshGradients = buildMeshGradients(colors)
const borderBg = meshGradients.map((g) => `${g} border-box`)
const fillBg = meshGradients.map((g) => `${g} padding-box`)
const angleDeg = `${cursorAngle.toFixed(3)}deg`
return (
<div
ref={cardRef}
onPointerMove={handlePointerMove}
onPointerEnter={() => setIsHovered(true)}
onPointerLeave={() => setIsHovered(false)}
className={`rounded-[inherit]] relative isolate grid ${className}`}
style={{
background: backgroundColor,
transform: "translate3d(0, 0, 0.01px)",
}}
>
<div
className="absolute inset-0 z-[-1] rounded-[inherit]"
style={{
background: [
`linear-gradient(${backgroundColor} 0 100%) padding-box`,
"linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box",
...borderBg,
].join(", "),
opacity: borderOpacity,
maskImage: `conic-gradient(from ${angleDeg} at center, black ${coneSpread}%, transparent ${coneSpread + 15}%, transparent ${100 - coneSpread - 15}%, black ${100 - coneSpread}%)`,
WebkitMaskImage: `conic-gradient(from ${angleDeg} at center, black ${coneSpread}%, transparent ${coneSpread + 15}%, transparent ${100 - coneSpread - 15}%, black ${100 - coneSpread}%)`,
transition: isVisible
? "opacity 0.25s ease-out"
: "opacity 0.75s ease-in-out",
}}
/>
<div
className="absolute inset-0 z-[-1] rounded-[inherit]"
style={
{
border: "1px solid transparent",
background: fillBg.join(", "),
maskImage: [
"linear-gradient(to bottom, black, black)",
"radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)",
"radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)",
"radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)",
"radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)",
"radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",
`conic-gradient(from ${angleDeg} at center, transparent 5%, black 15%, black 85%, transparent 95%)`,
].join(", "),
WebkitMaskImage: [
"linear-gradient(to bottom, black, black)",
"radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%)",
"radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%)",
"radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%)",
"radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%)",
"radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%)",
`conic-gradient(from ${angleDeg} at center, transparent 5%, black 15%, black 85%, transparent 95%)`,
].join(", "),
maskComposite: "subtract, add, add, add, add, add",
WebkitMaskComposite:
"source-out, source-over, source-over, source-over, source-over, source-over",
opacity: borderOpacity * fillOpacity,
mixBlendMode: "soft-light",
transition: isVisible
? "opacity 0.25s ease-out"
: "opacity 0.75s ease-in-out",
} as CSSProperties
}
/>
<span
className="pointer-events-none absolute z-1 rounded-[inherit]"
style={
{
inset: `${-glowRadius}px`,
maskImage: `conic-gradient(from ${angleDeg} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,
WebkitMaskImage: `conic-gradient(from ${angleDeg} at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%)`,
opacity: glowOpacity,
mixBlendMode: "plus-lighter",
transition: isVisible
? "opacity 0.25s ease-out"
: "opacity 0.75s ease-in-out",
} as CSSProperties
}
>
<span
className="absolute rounded-[inherit]"
style={{
inset: `${glowRadius}px`,
boxShadow: buildBoxShadow(resolvedGlowColor, glowIntensity),
}}
/>
</span>
<div className="relative z-1 flex flex-col overflow-auto p-0">
{children}
</div>
</div>
)
}
src/components/uiable/blocks/landing/components/SectionHeader.tsx
// third-party
import { cn } from "cn"
// types
interface SectionHeaderProps {
title: string
subtitle: string
className?: string
titleClassName?: string
subtitleClassName?: string
}
// ------------------------------ | BLOCK - SECTION HEADER | ------------------------------ //
export default function SectionHeader({
title,
subtitle,
className,
titleClassName,
subtitleClassName,
}: SectionHeaderProps) {
return (
<div className={cn("flex flex-col gap-2 md:gap-3", className)}>
<h2
className={cn(
"text-2xl leading-tight font-medium tracking-normal text-foreground sm:text-3xl sm:leading-8 md:text-4xl md:leading-9",
titleClassName
)}
>
{title}
</h2>
<p
className={cn(
"text-base leading-relaxed font-normal tracking-normal text-muted-foreground sm:text-lg",
subtitleClassName
)}
>
{subtitle}
</p>
</div>
)
}
src/images/svg/ButtonGroup.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | BUTTONGROUP | ------------------------------ //
export default function ButtonGroup(props: SVGAttributes<SVGElement>) {
return (
<svg
width="320"
height="180"
viewBox="0 0 320 180"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect
x="70"
y="75"
width="180"
height="30"
rx="15"
fill="var(--primary)"
/>
<path
d="M104.333 86C106.542 86 108.333 87.7909 108.333 90C108.333 92.2091 106.542 94 104.333 94H84C81.7909 94 80 92.2091 80 90C80 87.7909 81.7909 86 84 86H104.333Z"
fill="white"
/>
<line
x1="118.582"
y1="75.25"
x2="118.582"
y2="104.75"
stroke="white"
strokeWidth="0.5"
strokeLinecap="round"
/>
<path
d="M128.332 90C128.332 87.7909 130.123 86 132.332 86H152.665C154.874 86 156.665 87.7909 156.665 90C156.665 92.2091 154.875 94 152.665 94H132.332C130.123 94 128.332 92.2091 128.332 90Z"
fill="white"
/>
<line
x1="166.918"
y1="75.25"
x2="166.918"
y2="104.75"
stroke="white"
strokeWidth="0.5"
strokeLinecap="round"
/>
<path
d="M176.668 90C176.668 87.7909 178.459 86 180.668 86H201.001C203.21 86 205.001 87.7909 205.001 90C205.001 92.2091 203.21 94 201.001 94H180.668C178.459 94 176.668 92.2091 176.668 90Z"
fill="white"
/>
<line
x1="215.25"
y1="75.25"
x2="215.25"
y2="104.75"
stroke="white"
strokeWidth="0.5"
strokeLinecap="round"
/>
<path
d="M231.775 95.5767V84.7869H233.232V95.5767H231.775ZM227.104 90.9062V89.4574H237.902V90.9062H227.104Z"
fill="white"
/>
<path
d="M266.988 18.9004C267.065 25.6325 267.13 32.3646 267.185 39.0967C268.153 42.4556 270.808 45.0702 274.191 45.9814L275.23 46.2607C284.82 46.3039 294.41 46.3513 304 46.4053C309.333 46.4353 314.667 46.4667 320 46.5C314.667 46.5333 309.333 46.5647 304 46.5947C294.41 46.6487 284.82 46.6951 275.23 46.7383L274.191 47.0186C270.921 47.8994 268.331 50.3717 267.287 53.5693C267.358 65.7129 267.394 77.8564 267.394 90C267.394 102.143 267.358 114.286 267.287 126.43C268.331 129.628 270.92 132.101 274.191 132.981L275.23 133.261C284.82 133.304 294.41 133.351 304 133.405C309.333 133.435 314.667 133.467 320 133.5C314.667 133.533 309.333 133.565 304 133.595C294.41 133.649 284.82 133.695 275.23 133.738L274.191 134.019C270.808 134.93 268.153 137.544 267.185 140.902C267.13 147.635 267.065 154.367 266.988 161.1C266.958 163.733 266.927 166.367 266.894 169C266.86 166.367 266.829 163.733 266.799 161.1C266.73 155.063 266.67 149.027 266.619 142.991L266.617 143L266.099 141.074C265.172 137.633 262.484 134.945 259.043 134.019L258.265 133.809C225.51 133.934 192.755 134 160 134C127.509 134 95.0176 133.936 62.5264 133.812L61.7617 134.019C58.3664 134.933 55.7055 137.562 54.7451 140.938C54.6902 147.658 54.6254 154.379 54.5488 161.1C54.5188 163.733 54.4874 166.367 54.4541 169C54.4208 166.367 54.3894 163.733 54.3594 161.1C54.2905 155.057 54.231 149.014 54.1797 142.971L53.6689 141.074C52.7423 137.633 50.0544 134.945 46.6133 134.019L45.5869 133.742C35.7246 133.698 25.8623 133.65 16 133.595C10.6667 133.565 5.33333 133.533 0 133.5C5.33333 133.467 10.6667 133.435 16 133.405C25.8623 133.35 35.7246 133.301 45.5869 133.257L46.6133 132.981C50.0544 132.055 52.7423 129.367 53.6689 125.926L54.0498 124.508C53.9861 113.005 53.9541 101.503 53.9541 90C53.9541 78.4971 53.9861 66.9941 54.0498 55.4912L53.6689 54.0742C52.7423 50.6331 50.0544 47.9452 46.6133 47.0186L45.5869 46.7422C35.7246 46.6981 25.8623 46.6502 16 46.5947C10.6667 46.5647 5.33333 46.5333 0 46.5C5.33333 46.4667 10.6667 46.4353 16 46.4053C25.8623 46.3498 35.7246 46.3009 45.5869 46.2568L46.6133 45.9814C50.0544 45.0548 52.7423 42.3669 53.6689 38.9258L54.1797 37.0283C54.231 30.9857 54.2905 24.943 54.3594 18.9004C54.3894 16.2671 54.4208 13.6333 54.4541 11C54.4874 13.6333 54.5188 16.2671 54.5488 18.9004C54.6254 25.6208 54.6902 32.3411 54.7451 39.0615C55.7053 42.4373 58.3661 45.067 61.7617 45.9814L62.5244 46.1865C95.0163 46.0627 127.508 46 160 46C192.756 46 225.511 46.0636 258.267 46.1895L259.043 45.9814C262.484 45.0548 265.172 42.3669 266.099 38.9258L266.617 37L266.619 37.0078C266.67 30.972 266.73 24.9362 266.799 18.9004C266.829 16.2671 266.86 13.6333 266.894 11C266.927 13.6333 266.958 16.2671 266.988 18.9004ZM258.265 46.8086C225.51 46.9344 192.755 47 160 47C127.509 47 95.0176 46.9363 62.5264 46.8125L61.7617 47.0186C58.4806 47.9021 55.8853 50.3873 54.8477 53.5996C54.9185 65.7331 54.9541 77.8665 54.9541 90C54.9541 102.133 54.9185 114.266 54.8477 126.399C55.8851 129.612 58.4803 132.098 61.7617 132.981L62.5244 133.187C95.0163 133.063 127.508 133 160 133C192.756 133 225.511 133.064 258.267 133.189L259.043 132.981C262.484 132.055 265.172 129.367 266.099 125.926L266.489 124.473C266.426 112.982 266.394 101.491 266.394 90C266.394 78.5088 266.426 67.0176 266.489 55.5264L266.099 54.0742C265.172 50.6331 262.484 47.9452 259.043 47.0186L258.265 46.8086Z"
fill="url(#paint0_linear_786_591)"
fillOpacity="0.4"
/>
<defs>
<linearGradient
id="paint0_linear_786_591"
x1="160"
y1="11"
x2="160"
y2="169"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--primary)" stopOpacity="0.1" />
<stop offset="0.5" stopColor="var(--primary)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--primary)" stopOpacity="0.1" />
</linearGradient>
</defs>
</svg>
)
}
src/images/svg/InputOtp.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | INPUTOTP | ------------------------------ //
export default function InputOtp(props: SVGAttributes<SVGElement>) {
return (
<svg
width="320"
height="180"
viewBox="0 0 320 180"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M266.985 9C267.066 17.0378 267.133 25.0755 267.189 33.1133C268.162 36.4642 270.813 39.0717 274.191 39.9814L275.275 40.2725C284.85 40.3156 294.425 40.3631 304 40.417C309.333 40.447 314.667 40.4784 320 40.5117C314.667 40.5451 309.333 40.5764 304 40.6064C294.394 40.6605 284.788 40.7077 275.183 40.751L274.191 41.0186C270.911 41.9019 268.317 44.3858 267.278 47.5967C267.352 61.7311 267.391 75.8656 267.391 90C267.391 104.134 267.352 118.268 267.278 132.402C268.316 135.614 270.911 138.098 274.191 138.981L275.708 139.39C285.139 139.432 294.569 139.479 304 139.532C309.333 139.562 314.667 139.594 320 139.627C314.667 139.66 309.333 139.692 304 139.722C294.25 139.777 284.501 139.823 274.751 139.867L274.191 140.019C270.813 140.928 268.162 143.535 267.189 146.886C267.133 154.924 267.066 162.962 266.985 171C266.955 174 266.924 177 266.891 180C266.857 177 266.826 174 266.796 171C266.722 163.654 266.66 156.307 266.606 148.961L266.099 147.074C265.172 143.633 262.484 140.945 259.043 140.019L258.729 139.934C225.82 140.061 192.91 140.127 160 140.127C127.351 140.127 94.7025 140.062 62.0537 139.938L61.7539 140.019C58.3753 140.928 55.7233 143.536 54.751 146.888C54.6945 154.925 54.6282 162.963 54.5479 171C54.5179 174 54.4865 177 54.4531 180C54.4198 177 54.3884 174 54.3584 171C54.2849 163.654 54.2225 156.307 54.1689 148.961L53.6611 147.074C52.7345 143.633 50.0466 140.945 46.6055 140.019L46.0586 139.871C36.0391 139.826 26.0195 139.778 16 139.722C10.6667 139.692 5.33333 139.66 0 139.627C5.33333 139.594 10.6667 139.562 16 139.532C25.7005 139.478 35.401 139.429 45.1016 139.386L46.6055 138.981C50.0466 138.055 52.7345 135.367 53.6611 131.926L54.0537 130.464C53.9863 116.976 53.9531 103.488 53.9531 90C53.9531 76.5117 53.9863 63.0234 54.0537 49.5352L53.6611 48.0742C52.7345 44.6331 50.0466 41.9452 46.6055 41.0186L45.627 40.7549C35.7513 40.7107 25.8757 40.662 16 40.6064C10.6667 40.5764 5.33333 40.5451 0 40.5117C5.33333 40.4784 10.6667 40.447 16 40.417C25.8447 40.3616 35.6894 40.3136 45.5342 40.2695L46.6055 39.9814C50.0466 39.0548 52.7345 36.3669 53.6611 32.9258L54.1689 31.0381C54.2225 23.6921 54.2849 16.346 54.3584 9C54.3884 6 54.4198 3 54.4531 0C54.4865 3 54.5179 6 54.5479 9C54.6282 17.0371 54.6945 25.0742 54.751 33.1113C55.7231 36.4632 58.375 39.0715 61.7539 39.9814L62.5615 40.1982C95.041 40.0745 127.521 40.0117 160 40.0117C192.741 40.0117 225.481 40.0765 258.222 40.2021L259.043 39.9814C262.484 39.0548 265.172 36.3669 266.099 32.9258L266.606 31.0381C266.66 23.6921 266.722 16.346 266.796 9C266.826 6 266.857 3 266.891 0C266.924 3 266.955 6 266.985 9ZM258.31 40.8203C225.54 40.9462 192.77 41.0117 160 41.0117C127.491 41.0117 94.9824 40.9481 62.4736 40.8242L61.7539 41.0186C58.4738 41.9019 55.8791 44.3858 54.8408 47.5967C54.9149 61.7311 54.9531 75.8656 54.9531 90C54.9531 104.134 54.9149 118.268 54.8408 132.402C55.8789 135.614 58.4735 138.098 61.7539 138.981L62.9805 139.312C95.3203 139.189 127.66 139.127 160 139.127C192.601 139.127 225.202 139.19 257.804 139.314L259.043 138.981C262.484 138.055 265.172 135.367 266.099 131.926L266.491 130.464C266.424 116.976 266.391 103.488 266.391 90C266.391 76.5117 266.424 63.0234 266.491 49.5352L266.099 48.0742C265.172 44.6331 262.484 41.9452 259.043 41.0186L258.31 40.8203Z"
fill="url(#paint0_linear_786_1029)"
fillOpacity="0.4"
/>
<rect
x="74.5"
y="78.5"
width="74"
height="24"
rx="3.5"
fill="var(--primary)"
stroke="white"
/>
<line
x1="124.5"
y1="79.333"
x2="124.5"
y2="101.666"
stroke="white"
strokeLinecap="round"
/>
<line
x1="99.5"
y1="79.333"
x2="99.5"
y2="101.666"
stroke="white"
strokeLinecap="round"
/>
<path
d="M87.8011 95.1193C87.4432 95.1136 87.0852 95.0455 86.7273 94.9148C86.3693 94.7841 86.0426 94.5639 85.7472 94.2543C85.4517 93.9418 85.2145 93.5199 85.0355 92.9886C84.8565 92.4545 84.767 91.7841 84.767 90.9773C84.767 90.2045 84.8395 89.5199 84.9844 88.9233C85.1293 88.3239 85.3395 87.8196 85.6151 87.4105C85.8906 86.9986 86.223 86.6861 86.6122 86.473C87.0043 86.2599 87.446 86.1534 87.9375 86.1534C88.4261 86.1534 88.8608 86.2514 89.2415 86.4474C89.625 86.6406 89.9375 86.9105 90.179 87.2571C90.4205 87.6037 90.5767 88.0028 90.6477 88.4545H89.608C89.5114 88.0625 89.3239 87.7372 89.0455 87.4787C88.767 87.2202 88.3977 87.0909 87.9375 87.0909C87.2614 87.0909 86.7287 87.3849 86.3395 87.973C85.9531 88.5611 85.7585 89.3864 85.7557 90.4489H85.8239C85.983 90.2074 86.1719 90.0014 86.3906 89.831C86.6122 89.6577 86.8565 89.5241 87.1236 89.4304C87.3906 89.3366 87.6733 89.2898 87.9716 89.2898C88.4716 89.2898 88.929 89.4148 89.3438 89.6648C89.7585 89.9119 90.0909 90.2543 90.3409 90.6918C90.5909 91.1264 90.7159 91.625 90.7159 92.1875C90.7159 92.7273 90.5952 93.2216 90.3537 93.6705C90.1122 94.1165 89.7727 94.4716 89.3352 94.7358C88.9006 94.9972 88.3892 95.125 87.8011 95.1193ZM87.8011 94.1818C88.1591 94.1818 88.4801 94.0923 88.7642 93.9134C89.0511 93.7344 89.277 93.4943 89.4418 93.1932C89.6094 92.892 89.6932 92.5568 89.6932 92.1875C89.6932 91.8267 89.6122 91.4986 89.4503 91.2031C89.2912 90.9048 89.071 90.6676 88.7898 90.4915C88.5114 90.3153 88.1932 90.2273 87.8352 90.2273C87.5653 90.2273 87.3139 90.2812 87.081 90.3892C86.848 90.4943 86.6435 90.6392 86.4673 90.8239C86.294 91.0085 86.1577 91.2202 86.0582 91.4588C85.9588 91.6946 85.9091 91.9432 85.9091 92.2045C85.9091 92.5511 85.9901 92.875 86.152 93.1761C86.3168 93.4773 86.5412 93.7202 86.8253 93.9048C87.1122 94.0895 87.4375 94.1818 87.8011 94.1818Z"
fill="white"
/>
<path
d="M108.903 95V94.233L111.784 91.0795C112.122 90.7102 112.401 90.3892 112.619 90.1165C112.838 89.8409 113 89.5824 113.105 89.3409C113.213 89.0966 113.267 88.8409 113.267 88.5739C113.267 88.267 113.193 88.0014 113.045 87.777C112.901 87.5526 112.702 87.3793 112.449 87.2571C112.196 87.1349 111.912 87.0739 111.597 87.0739C111.261 87.0739 110.969 87.1435 110.719 87.2827C110.472 87.419 110.28 87.6108 110.143 87.858C110.01 88.1051 109.943 88.3949 109.943 88.7273H108.938C108.938 88.2159 109.055 87.767 109.291 87.3807C109.527 86.9943 109.848 86.6932 110.254 86.4773C110.663 86.2614 111.122 86.1534 111.631 86.1534C112.142 86.1534 112.595 86.2614 112.99 86.4773C113.385 86.6932 113.695 86.9844 113.919 87.3509C114.143 87.7173 114.256 88.125 114.256 88.5739C114.256 88.8949 114.197 89.2088 114.081 89.5156C113.967 89.8196 113.768 90.1591 113.484 90.5341C113.203 90.9062 112.812 91.3608 112.312 91.8977L110.352 93.9943V94.0625H114.409V95H108.903Z"
fill="white"
/>
<line
x1="155.5"
y1="90"
x2="164.5"
y2="90"
stroke="var(--primary)"
strokeLinecap="round"
/>
<rect
x="171.5"
y="78.5"
width="74"
height="24"
rx="3.5"
fill="var(--primary)"
stroke="white"
/>
<line
x1="221.5"
y1="79.333"
x2="221.5"
y2="101.666"
stroke="white"
strokeLinecap="round"
/>
<line
x1="196.5"
y1="79.333"
x2="196.5"
y2="101.666"
stroke="white"
strokeLinecap="round"
/>
<defs>
<linearGradient
id="paint0_linear_786_1029"
x1="160"
y1="0"
x2="160"
y2="180"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--primary)" stopOpacity="0.1" />
<stop offset="0.5" stopColor="var(--primary)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--primary)" stopOpacity="0.1" />
</linearGradient>
</defs>
</svg>
)
}
src/images/svg/ToggleGroup.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | TOGGLEGROUP | ------------------------------ //
export default function ToggleGroup(props: SVGAttributes<SVGElement>) {
return (
<svg
width="320"
height="180"
viewBox="0 0 320 180"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_894_257)">
<g opacity="0.5">
<path
d="M87 76.5H117.833V103.5H87C79.5442 103.5 73.5 97.4558 73.5 90C73.5 82.6607 79.3567 76.6898 86.6514 76.5049L87 76.5Z"
fill="var(--primary)"
/>
<path
d="M87 76.5H117.833V103.5H87C79.5442 103.5 73.5 97.4558 73.5 90C73.5 82.6607 79.3567 76.6898 86.6514 76.5049L87 76.5Z"
stroke="var(--primary)"
/>
<path
d="M83 90C83 91.1046 83.8954 92 85 92H106.333C107.438 92 108.333 91.1046 108.333 90C108.333 88.8954 107.438 88 106.333 88H85C83.8954 88 83 88.8954 83 90Z"
fill="white"
/>
</g>
<rect
x="117.832"
y="76.5"
width="55.3333"
height="27"
fill="var(--primary)"
/>
<rect
x="117.832"
y="76.5"
width="55.3333"
height="27"
stroke="var(--primary)"
/>
<path
d="M127.332 90C127.332 91.1046 128.227 92 129.332 92H161.665C162.77 92 163.665 91.1046 163.665 90C163.665 88.8954 162.77 88 161.665 88H129.332C128.227 88 127.332 88.8954 127.332 90Z"
fill="white"
/>
<g opacity="0.5">
<path
d="M233.001 76.5C240.457 76.5 246.501 82.5442 246.501 90C246.501 97.4558 240.457 103.5 233.001 103.5H173.168V76.5H233.001Z"
fill="var(--primary)"
/>
<path
d="M233.001 76.5C240.457 76.5 246.501 82.5442 246.501 90C246.501 97.4558 240.457 103.5 233.001 103.5H173.168V76.5H233.001Z"
stroke="var(--primary)"
/>
<path
d="M182.668 90C182.668 91.1046 183.563 92 184.668 92H235.001C236.106 92 237.001 91.1046 237.001 90C237.001 88.8954 236.106 88 235.001 88H184.668C183.563 88 182.668 88.8954 182.668 90Z"
fill="white"
/>
</g>
</g>
<path
d="M266.095 9C266.206 20.11 266.292 31.2201 266.357 42.3301L266.519 42.9258C267.445 46.3669 270.133 49.0548 273.574 49.9814L274.647 50.2705C284.432 50.3143 294.216 50.3629 304 50.418C309.333 50.448 314.667 50.4794 320 50.5127C314.667 50.546 309.333 50.5774 304 50.6074C294.185 50.6626 284.37 50.71 274.555 50.7539L273.574 51.0186C270.133 51.9452 267.445 54.6331 266.519 58.0742L266.438 58.374C266.479 68.916 266.5 79.458 266.5 90C266.5 100.542 266.479 111.083 266.438 121.625L266.519 121.926C267.445 125.367 270.133 128.055 273.574 128.981L275.083 129.388C284.722 129.431 294.361 129.478 304 129.532C309.333 129.562 314.667 129.594 320 129.627C314.667 129.66 309.333 129.692 304 129.722C294.041 129.778 284.082 129.826 274.123 129.87L273.574 130.019C270.133 130.945 267.445 133.633 266.519 137.074L266.357 137.669C266.292 148.779 266.206 159.89 266.095 171C266.065 174 266.033 177 266 180C265.967 177 265.935 174 265.905 171C265.794 159.89 265.707 148.779 265.642 137.669L265.481 137.074C264.555 133.633 261.867 130.945 258.426 130.019L258.121 129.937C225.414 130.062 192.707 130.127 160 130.127C127.293 130.127 94.5853 130.062 61.8779 129.937L61.5742 130.019C58.1331 130.945 55.4452 133.633 54.5186 137.074L54.3574 137.669C54.292 148.779 54.2058 159.89 54.0947 171C54.0647 174 54.0333 177 54 180C53.9667 177 53.9353 174 53.9053 171C53.7942 159.89 53.707 148.779 53.6416 137.669L53.4814 137.074C52.5548 133.633 49.8669 130.945 46.4258 130.019L45.876 129.87C35.9173 129.826 25.9587 129.778 16 129.722C10.6667 129.692 5.33333 129.66 0 129.627C5.33333 129.594 10.6667 129.562 16 129.532C25.6387 129.478 35.2773 129.431 44.916 129.388L46.4258 128.981C49.8669 128.055 52.5548 125.367 53.4814 121.926L53.5625 121.625C53.5213 111.083 53.5 100.542 53.5 90C53.5 79.4577 53.5203 68.9154 53.5615 58.373L53.4814 58.0742C52.5548 54.6331 49.8669 51.9452 46.4258 51.0186L45.4443 50.7539C35.6296 50.71 25.8148 50.6626 16 50.6074C10.6667 50.5774 5.33333 50.546 0 50.5127C5.33333 50.4794 10.6667 50.448 16 50.418C25.7839 50.3629 35.5677 50.3143 45.3516 50.2705L46.4258 49.9814C49.8669 49.0548 52.5548 46.3669 53.4814 42.9258L53.6416 42.3301C53.707 31.2201 53.7942 20.11 53.9053 9C53.9353 6 53.9667 3 54 0C54.0333 3 54.0647 6 54.0947 9C54.2058 20.11 54.292 31.2201 54.3574 42.3301L54.5186 42.9258C55.4452 46.3669 58.1331 49.0548 61.5742 49.9814L62.3857 50.1992C94.9238 50.0751 127.462 50.0127 160 50.0127C192.538 50.0127 225.076 50.0751 257.613 50.1992L258.426 49.9814C261.867 49.0548 264.555 46.3669 265.481 42.9258L265.642 42.3301C265.707 31.2201 265.794 20.11 265.905 9C265.935 6 265.967 3 266 0C266.033 3 266.065 6 266.095 9ZM257.701 50.8232C225.134 50.9476 192.567 51.0127 160 51.0127C127.433 51.0127 94.8652 50.9476 62.2979 50.8232L61.5742 51.0186C58.1331 51.9452 55.4452 54.6331 54.5186 58.0742L54.4375 58.374C54.4787 68.916 54.5 79.458 54.5 90C54.5 100.542 54.4787 111.083 54.4375 121.625L54.5186 121.926C55.4452 125.367 58.1331 128.055 61.5742 128.981L62.8057 129.312C95.2038 129.189 127.602 129.127 160 129.127C192.398 129.127 224.796 129.189 257.193 129.312L258.426 128.981C261.867 128.055 264.555 125.367 265.481 121.926L265.562 121.626C265.52 111.084 265.5 100.542 265.5 90C265.5 79.4577 265.52 68.9154 265.562 58.373L265.481 58.0742C264.555 54.6331 261.867 51.9452 258.426 51.0186L257.701 50.8232Z"
fill="url(#paint0_linear_894_257)"
fillOpacity="0.4"
/>
<defs>
<linearGradient
id="paint0_linear_894_257"
x1="160"
y1="0"
x2="160"
y2="180"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--primary)" stopOpacity="0.1" />
<stop offset="0.5" stopColor="var(--primary)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--primary)" stopOpacity="0.1" />
</linearGradient>
<clipPath id="clip0_894_257">
<rect x="73" y="76" width="174" height="28" rx="14" fill="white" />
</clipPath>
</defs>
</svg>
)
}
src/images/svg/button.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | BUTTON | ------------------------------ //
export default function Button(props: SVGAttributes<SVGElement>) {
return (
<svg
width="320"
height="180"
viewBox="0 0 320 180"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect
x="105"
y="70"
width="110"
height="40"
rx="20"
fill="var(--primary)"
/>
<path
d="M185 85C187.761 85 190 87.2386 190 90C190 92.7614 187.761 95 185 95H135C132.239 95 130 92.7614 130 90C130 87.2386 132.239 85 135 85H185Z"
fill="#FAFAFA"
/>
<path
d="M239.595 18.9004C239.667 25.2829 239.729 31.6654 239.782 38.0479L240.019 38.9258C240.945 42.3669 243.633 45.0548 247.074 45.9814L248.17 46.2764C254.48 46.3157 260.79 46.3576 267.1 46.4053C271.066 46.4353 275.033 46.4667 279 46.5C275.033 46.5333 271.066 46.5647 267.1 46.5947C260.79 46.6424 254.48 46.6834 248.17 46.7227L247.074 47.0186C243.633 47.9452 240.945 50.6331 240.019 54.0742L239.898 54.5186C239.966 66.3457 240 78.1728 240 90C240 101.827 239.966 113.654 239.898 125.48L240.019 125.926C240.945 129.367 243.633 132.055 247.074 132.981L248.17 133.276C254.48 133.316 260.79 133.358 267.1 133.405C271.066 133.435 275.033 133.467 279 133.5C275.033 133.533 271.066 133.565 267.1 133.595C260.79 133.642 254.48 133.683 248.17 133.723L247.074 134.019C243.633 134.945 240.945 137.633 240.019 141.074L239.782 141.951C239.729 148.334 239.667 154.717 239.595 161.1C239.565 163.733 239.533 166.367 239.5 169C239.467 166.367 239.435 163.733 239.405 161.1C239.333 154.717 239.27 148.334 239.217 141.951L238.981 141.074C238.055 137.633 235.367 134.945 231.926 134.019L231.186 133.819C207.457 133.939 183.729 134 160 134C136.598 134 113.197 133.94 89.7949 133.824L89.0742 134.019C85.6331 134.945 82.9452 137.633 82.0186 141.074L81.7822 141.951C81.7291 148.334 81.6674 154.717 81.5947 161.1C81.5647 163.733 81.5333 166.367 81.5 169C81.4667 166.367 81.4353 163.733 81.4053 161.1C81.3326 154.717 81.27 148.334 81.2168 141.951L80.9814 141.074C80.0548 137.633 77.3669 134.945 73.9258 134.019L72.8525 133.729C66.2018 133.689 59.5511 133.645 52.9004 133.595C48.9337 133.565 44.9667 133.533 41 133.5C44.9667 133.467 48.9337 133.435 52.9004 133.405C59.5511 133.355 66.2018 133.31 72.8525 133.27L73.9258 132.981C77.3669 132.055 80.0548 129.367 80.9814 125.926L81.1006 125.48C81.0333 113.654 81 101.827 81 90C81 78.1729 81.0333 66.3457 81.1006 54.5186L80.9814 54.0742C80.0548 50.6331 77.3669 47.9452 73.9258 47.0186L72.8525 46.7295C66.2018 46.6885 59.5511 46.645 52.9004 46.5947C48.9337 46.5647 44.9667 46.5333 41 46.5C44.9667 46.4667 48.9337 46.4353 52.9004 46.4053C59.5511 46.355 66.2018 46.3105 72.8525 46.2695L73.9258 45.9814C77.3669 45.0548 80.0548 42.3669 80.9814 38.9258L81.2168 38.0479C81.27 31.6654 81.3326 25.2829 81.4053 18.9004C81.4353 16.2671 81.4667 13.6333 81.5 11C81.5333 13.6333 81.5647 16.2671 81.5947 18.9004C81.6674 25.2829 81.7291 31.6654 81.7822 38.0479L82.0186 38.9258C82.9452 42.3669 85.6331 45.0548 89.0742 45.9814L89.7939 46.1748C113.196 46.0587 136.598 46 160 46C183.729 46 207.458 46.0603 231.187 46.1797L231.926 45.9814C235.367 45.0548 238.055 42.3669 238.981 38.9258L239.217 38.0479C239.27 31.6654 239.333 25.2829 239.405 18.9004C239.435 16.2671 239.467 13.6333 239.5 11C239.533 13.6333 239.565 16.2671 239.595 18.9004ZM231.186 46.8193C207.457 46.9387 183.729 47 160 47C136.598 47 113.197 46.9403 89.7949 46.8242L89.0742 47.0186C85.6331 47.9452 82.9452 50.6331 82.0186 54.0742L81.8984 54.5186C81.9657 66.3457 82 78.1728 82 90C82 101.827 81.9657 113.654 81.8984 125.48L82.0186 125.926C82.9452 129.367 85.6331 132.055 89.0742 132.981L89.7939 133.175C113.196 133.059 136.598 133 160 133C183.729 133 207.458 133.06 231.187 133.18L231.926 132.981C235.367 132.055 238.055 129.367 238.981 125.926L239.101 125.48C239.033 113.654 239 101.827 239 90C239 78.1729 239.033 66.3457 239.101 54.5186L238.981 54.0742C238.055 50.6331 235.367 47.9452 231.926 47.0186L231.186 46.8193Z"
fill="url(#paint0_linear_786_501)"
fillOpacity="0.4"
/>
<defs>
<linearGradient
id="paint0_linear_786_501"
x1="160"
y1="11"
x2="160"
y2="169"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--primary)" stopOpacity="0.1" />
<stop offset="0.5" stopColor="var(--primary)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--primary)" stopOpacity="0.1" />
</linearGradient>
</defs>
</svg>
)
}
src/images/svg/item.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | ITEM | ------------------------------ //
export default function Item(props: SVGAttributes<SVGElement>) {
return (
<svg
width="320"
height="180"
viewBox="0 0 320 180"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M266.985 9C267.066 17.0378 267.133 25.0755 267.189 33.1133C268.162 36.4642 270.813 39.0717 274.191 39.9814L275.275 40.2725C284.85 40.3156 294.425 40.3631 304 40.417C309.333 40.447 314.667 40.4784 320 40.5117C314.667 40.5451 309.333 40.5764 304 40.6064C294.394 40.6605 284.788 40.7077 275.183 40.751L274.191 41.0186C270.911 41.9019 268.317 44.3858 267.278 47.5967C267.352 61.7311 267.391 75.8656 267.391 90C267.391 104.134 267.352 118.268 267.278 132.402C268.316 135.614 270.911 138.098 274.191 138.981L275.708 139.39C285.139 139.432 294.569 139.479 304 139.532C309.333 139.562 314.667 139.594 320 139.627C314.667 139.66 309.333 139.692 304 139.722C294.25 139.777 284.501 139.823 274.751 139.867L274.191 140.019C270.813 140.928 268.162 143.535 267.189 146.886C267.133 154.924 267.066 162.962 266.985 171C266.955 174 266.924 177 266.891 180C266.857 177 266.826 174 266.796 171C266.722 163.654 266.66 156.307 266.606 148.961L266.099 147.074C265.172 143.633 262.484 140.945 259.043 140.019L258.729 139.934C225.82 140.061 192.91 140.127 160 140.127C127.351 140.127 94.7025 140.062 62.0537 139.938L61.7539 140.019C58.3753 140.928 55.7233 143.536 54.751 146.888C54.6945 154.925 54.6282 162.963 54.5479 171C54.5179 174 54.4865 177 54.4531 180C54.4198 177 54.3884 174 54.3584 171C54.2849 163.654 54.2225 156.307 54.1689 148.961L53.6611 147.074C52.7345 143.633 50.0466 140.945 46.6055 140.019L46.0586 139.871C36.0391 139.826 26.0195 139.778 16 139.722C10.6667 139.692 5.33333 139.66 0 139.627C5.33333 139.594 10.6667 139.562 16 139.532C25.7005 139.478 35.401 139.429 45.1016 139.386L46.6055 138.981C50.0466 138.055 52.7345 135.367 53.6611 131.926L54.0537 130.464C53.9863 116.976 53.9531 103.488 53.9531 90C53.9531 76.5117 53.9863 63.0234 54.0537 49.5352L53.6611 48.0742C52.7345 44.6331 50.0466 41.9452 46.6055 41.0186L45.627 40.7549C35.7513 40.7107 25.8757 40.662 16 40.6064C10.6667 40.5764 5.33333 40.5451 0 40.5117C5.33333 40.4784 10.6667 40.447 16 40.417C25.8447 40.3616 35.6894 40.3136 45.5342 40.2695L46.6055 39.9814C50.0466 39.0548 52.7345 36.3669 53.6611 32.9258L54.1689 31.0381C54.2225 23.6921 54.2849 16.346 54.3584 9C54.3884 6 54.4198 3 54.4531 0C54.4865 3 54.5179 6 54.5479 9C54.6282 17.0371 54.6945 25.0742 54.751 33.1113C55.7231 36.4632 58.375 39.0715 61.7539 39.9814L62.5615 40.1982C95.041 40.0745 127.521 40.0117 160 40.0117C192.741 40.0117 225.481 40.0765 258.222 40.2021L259.043 39.9814C262.484 39.0548 265.172 36.3669 266.099 32.9258L266.606 31.0381C266.66 23.6921 266.722 16.346 266.796 9C266.826 6 266.857 3 266.891 0C266.924 3 266.955 6 266.985 9ZM258.31 40.8203C225.54 40.9462 192.77 41.0117 160 41.0117C127.491 41.0117 94.9824 40.9481 62.4736 40.8242L61.7539 41.0186C58.4738 41.9019 55.8791 44.3858 54.8408 47.5967C54.9149 61.7311 54.9531 75.8656 54.9531 90C54.9531 104.134 54.9149 118.268 54.8408 132.402C55.8789 135.614 58.4735 138.098 61.7539 138.981L62.9805 139.312C95.3203 139.189 127.66 139.127 160 139.127C192.601 139.127 225.202 139.19 257.804 139.314L259.043 138.981C262.484 138.055 265.172 135.367 266.099 131.926L266.491 130.464C266.424 116.976 266.391 103.488 266.391 90C266.391 76.5117 266.424 63.0234 266.491 49.5352L266.099 48.0742C265.172 44.6331 262.484 41.9452 259.043 41.0186L258.31 40.8203Z"
fill="url(#paint0_linear_786_1091)"
fillOpacity="0.4"
/>
<path
d="M84 75C84 71.6863 86.6863 69 90 69H238C241.314 69 244 71.6863 244 75V103C244 106.314 241.314 109 238 109H90C86.6863 109 84 106.314 84 103V75Z"
fill="var(--primary)"
/>
<circle cx="108" cy="89" r="10" fill="white" />
<path
opacity="0.8"
d="M126 82C126 80.3431 127.343 79 129 79H182C183.657 79 185 80.3431 185 82C185 83.6569 183.657 85 182 85H129C127.343 85 126 83.6569 126 82Z"
fill="white"
/>
<path
opacity="0.8"
d="M126 96C126 94.3431 127.343 93 129 93H191C192.657 93 194 94.3431 194 96C194 97.6569 192.657 99 191 99H129C127.343 99 126 97.6569 126 96Z"
fill="white"
/>
<g opacity="0.8">
<rect x="214" y="81" width="16" height="16" rx="8" fill="white" />
<path
d="M221.516 93.0511V85.858H222.488V93.0511H221.516ZM218.403 89.9375V88.9716H225.602V89.9375H218.403Z"
fill="var(--primary)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_786_1091"
x1="160"
y1="0"
x2="160"
y2="180"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--primary)" stopOpacity="0.1" />
<stop offset="0.5" stopColor="var(--primary)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--primary)" stopOpacity="0.1" />
</linearGradient>
</defs>
</svg>
)
}
src/images/svg/switch.tsx
// types
import type { SVGAttributes } from "react"
// ------------------------------ | SWITCH | ------------------------------ //
export default function Switch(props: SVGAttributes<SVGElement>) {
return (
<svg
width="320"
height="180"
viewBox="0 0 320 180"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M219.595 18.9004C219.706 28.7119 219.794 38.5234 219.859 48.335L220.019 48.9258C220.945 52.3669 223.633 55.0548 227.074 55.9814L227.746 56.1621C240.864 56.2249 253.982 56.3061 267.1 56.4053C271.066 56.4353 275.033 56.4667 279 56.5C275.033 56.5333 271.066 56.5647 267.1 56.5947C253.982 56.6939 240.864 56.7741 227.746 56.8369L227.074 57.0186C223.633 57.9452 220.945 60.6331 220.019 64.0742L219.946 64.3398C219.982 72.8932 220 81.4466 220 90C220 98.5531 219.982 107.106 219.946 115.659L220.019 115.926C220.945 119.367 223.633 122.055 227.074 122.981L227.746 123.162C240.864 123.225 253.982 123.306 267.1 123.405C271.066 123.435 275.033 123.467 279 123.5C275.033 123.533 271.066 123.565 267.1 123.595C253.982 123.694 240.864 123.774 227.746 123.837L227.074 124.019C223.633 124.945 220.945 127.633 220.019 131.074L219.859 131.664C219.794 141.476 219.707 151.288 219.595 161.1C219.565 163.733 219.533 166.367 219.5 169C219.467 166.367 219.435 163.733 219.405 161.1C219.293 151.288 219.205 141.476 219.14 131.664L218.981 131.074C218.055 127.633 215.367 124.945 211.926 124.019L211.505 123.905C194.337 123.968 177.168 124 160 124C143.161 124 126.322 123.968 109.482 123.908L109.074 124.019C105.633 124.945 102.945 127.633 102.019 131.074L101.859 131.664C101.794 141.476 101.707 151.288 101.595 161.1C101.565 163.733 101.533 166.367 101.5 169C101.467 166.367 101.435 163.733 101.405 161.1C101.293 151.288 101.205 141.476 101.14 131.664L100.981 131.074C100.055 127.633 97.3669 124.945 93.9258 124.019L93.2725 123.842C79.8151 123.778 66.3577 123.697 52.9004 123.595C48.9337 123.565 44.9667 123.533 41 123.5C44.9667 123.467 48.9337 123.435 52.9004 123.405C66.3577 123.303 79.8151 123.221 93.2725 123.157L93.9258 122.981C97.3669 122.055 100.055 119.367 100.981 115.926L101.053 115.659C101.018 107.106 101 98.5531 101 90C101 81.4466 101.018 72.8932 101.053 64.3398L100.981 64.0742C100.055 60.6331 97.3669 57.9452 93.9258 57.0186L93.2725 56.8418C79.8151 56.7783 66.3577 56.6965 52.9004 56.5947C48.9337 56.5647 44.9667 56.5333 41 56.5C44.9667 56.4667 48.9337 56.4353 52.9004 56.4053C66.3577 56.3035 79.8151 56.2207 93.2725 56.1572L93.9258 55.9814C97.3669 55.0548 100.055 52.3669 100.981 48.9258L101.14 48.335C101.205 38.5234 101.293 28.7119 101.405 18.9004C101.435 16.2671 101.467 13.6333 101.5 11C101.533 13.6333 101.565 16.2671 101.595 18.9004C101.707 28.7119 101.794 38.5234 101.859 48.335L102.019 48.9258C102.945 52.3669 105.633 55.0548 109.074 55.9814L109.482 56.0908C126.322 56.0307 143.161 56 160 56C177.168 56 194.337 56.0312 211.505 56.0938L211.926 55.9814C215.367 55.0548 218.055 52.3669 218.981 48.9258L219.14 48.335C219.205 38.5234 219.294 28.7119 219.405 18.9004C219.435 16.2671 219.467 13.6333 219.5 11C219.533 13.6333 219.565 16.2671 219.595 18.9004ZM211.505 56.9053C194.337 56.9678 177.168 57 160 57C143.161 57 126.322 56.9683 109.482 56.9082L109.074 57.0186C105.633 57.9452 102.945 60.6331 102.019 64.0742L101.946 64.3398C101.982 72.8932 102 81.4466 102 90C102 98.5531 101.982 107.106 101.946 115.659L102.019 115.926C102.945 119.367 105.633 122.055 109.074 122.981L109.482 123.091C126.322 123.031 143.161 123 160 123C177.168 123 194.337 123.031 211.505 123.094L211.926 122.981C215.367 122.055 218.055 119.367 218.981 115.926L219.053 115.659C219.018 107.106 219 98.5531 219 90C219 81.4466 219.018 72.8932 219.053 64.3398L218.981 64.0742C218.055 60.6331 215.367 57.9452 211.926 57.0186L211.505 56.9053Z"
fill="url(#paint0_linear_796_189)"
fillOpacity="0.4"
/>
<rect
x="130"
y="75"
width="60"
height="30"
rx="15"
fill="var(--primary)"
/>
<circle cx="176" cy="90" r="10" fill="white" />
<defs>
<linearGradient
id="paint0_linear_796_189"
x1="160"
y1="11"
x2="160"
y2="169"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="var(--primary)" stopOpacity="0.1" />
<stop offset="0.5" stopColor="var(--primary)" stopOpacity="0.5" />
<stop offset="1" stopColor="var(--primary)" stopOpacity="0.1" />
</linearGradient>
</defs>
</svg>
)
}