helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-12 02:38:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: initial Untitled UI Vite scaffold with FontAwesome Pro

Browse Source
This commit is contained in:
saridsa2
2026-03-16 14:23:23 +05:30
commit 3a338b33dd
163 changed files with 27081 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
src/components/shared-assets/illustrations/box.tsx Normal file
View File

@@ -0,0 +1,257 @@
import type { HTMLAttributes } from "react";
import { UploadCloud02 } from "@untitledui/icons";
import { cx } from "@/utils/cx";
interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
size?: "sm" | "md" | "lg";
svgClassName?: string;
childrenClassName?: string;
}
export const BoxIllustration = ({ size = "lg", ...otherProps }: IllustrationProps) => {
const Pattern = sizes[size];
return <Pattern {...otherProps} />;
};
export const sm = ({
className,
svgClassName,
childrenClassName,
children = <UploadCloud02 className="size-6" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-31.5 w-38", className)}>
<svg viewBox="0 0 152 126" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="76" cy="60" r="52" className="fill-utility-gray-100" />
<circle cx="21" cy="27" r="5" className="fill-utility-gray-100" />
<circle cx="18" cy="111" r="7" className="fill-utility-gray-100" />
<circle cx="145" cy="43" r="7" className="fill-utility-gray-100" />
<circle cx="134" cy="16" r="4" className="fill-utility-gray-100" />
<g filter="url(#box-shadow-sm)">
<path d="M76.0006 92.1898L118 73.5312V20.375L76.3298 2L34 20.375V73.5312L76.0006 92.1898Z" className="fill-utility-gray-50" />
<path
d="M118.5 73.8564L118.203 73.9883L76.2031 92.6465L76.001 92.7373L75.7979 92.6465L33.7969 73.9883L33.5 73.8564V20.0469L33.8008 19.916L76.1309 1.54102L76.3311 1.4541L76.5312 1.54297L118.202 19.918L118.5 20.0488V73.8564Z"
className="stroke-border-secondary_alt"
/>
<path d="M76 38.0629V92.2344L34 73.5312V20.375L76 38.0629Z" className="fill-utility-gray-200" />
<path d="M76.0008 38.0938V92.2344L118 73.5312V20.375L76.0008 38.0938Z" fill="url(#box-gradient-sm)" />
<path d="M76 38.0938L118 20.375L76.3298 2L34 20.375L76 38.0938Z" className="fill-utility-gray-50" />
<path
d="M50.0781 13.3943L91.6722 31.4986L92.0523 44.7698L103.759 39.9395L103.405 26.5846L60.4847 8.88196L50.0781 13.3943Z"
className="fill-utility-gray-200"
/>
</g>
<defs>
<filter
id="box-shadow-sm"
x="19.875"
y="0.908508"
width="112.25"
height="118.626"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="0.984375" operator="erode" in="SourceAlpha" result="box-shadow-sm-effect1" />
<feOffset dy="1.96875" />
<feGaussianBlur stdDeviation="0.984375" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="box-shadow-sm-effect1" />
<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" />
<feMorphology radius="2.625" operator="erode" in="SourceAlpha" result="box-shadow-sm-effect2" />
<feOffset dy="5.25" />
<feGaussianBlur stdDeviation="2.625" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="box-shadow-sm-effect1" result="box-shadow-sm-effect2" />
<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" />
<feMorphology radius="2.625" operator="erode" in="SourceAlpha" result="box-shadow-sm-effect3" />
<feOffset dy="13.125" />
<feGaussianBlur stdDeviation="7.875" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="box-shadow-sm-effect2" result="box-shadow-sm-effect3" />
<feBlend mode="normal" in="SourceGraphic" in2="box-shadow-sm-effect3" result="shape" />
</filter>
<linearGradient id="box-gradient-sm" x1="97" y1="20.375" x2="128.011" y2="74.9366" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-200" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute inset-x-13 bottom-2 z-10 flex size-12 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
export const md = ({
className,
svgClassName,
childrenClassName,
children = <UploadCloud02 className="size-7" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-37 w-43", className)}>
<svg viewBox="0 0 172 148" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="86" cy="74" r="64" className="fill-utility-gray-100" />
<circle cx="20" cy="30" r="6" className="fill-utility-gray-100" />
<circle cx="17" cy="122" r="8" className="fill-utility-gray-100" />
<circle cx="160" cy="46" r="8" className="fill-utility-gray-100" />
<circle cx="149" cy="19" r="5" className="fill-utility-gray-100" />
<g filter="url(#box-shadow-md)">
<path d="M86.0007 113.664L138 90.5625V24.75L86.4084 2L34 24.75V90.5625L86.0007 113.664Z" className="fill-utility-gray-50" />
<path
d="M138.5 90.8877L138.203 91.0195L86.2041 114.12L86.001 114.211L85.7979 114.12L33.7969 91.0195L33.5 90.8877V24.4219L33.8008 24.291L86.209 1.54102L86.4102 1.4541L86.6104 1.54297L138.202 24.293L138.5 24.4238V90.8877Z"
className="stroke-border-secondary_alt"
/>
<path d="M86 46.6493V113.719L34 90.5625V24.75L86 46.6493Z" className="fill-utility-gray-200" />
<path d="M86.001 46.6875V113.719L138 90.5625V24.75L86.001 46.6875Z" fill="url(#box-gradient-md)" />
<path d="M86 46.6875L138 24.75L86.4084 2L34 24.75L86 46.6875Z" className="fill-utility-gray-50" />
<path
d="M53.9062 16.1072L105.404 38.5221L105.874 54.9531L120.368 48.9727L119.93 32.438L66.7906 10.5205L53.9062 16.1072Z"
className="fill-utility-gray-200"
/>
</g>
<defs>
<filter
id="box-shadow-md"
x="16.75"
y="0.908508"
width="138.5"
height="146.349"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.21875" operator="erode" in="SourceAlpha" result="box-shadow-md-effect1" />
<feOffset dy="2.4375" />
<feGaussianBlur stdDeviation="1.21875" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="box-shadow-md-effect1" />
<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" />
<feMorphology radius="3.25" operator="erode" in="SourceAlpha" result="box-shadow-md-effect2" />
<feOffset dy="6.5" />
<feGaussianBlur stdDeviation="3.25" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="box-shadow-md-effect1" result="box-shadow-md-effect2" />
<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" />
<feMorphology radius="3.25" operator="erode" in="SourceAlpha" result="box-shadow-md-effect3" />
<feOffset dy="16.25" />
<feGaussianBlur stdDeviation="9.75" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="box-shadow-md-effect2" result="box-shadow-md-effect3" />
<feBlend mode="normal" in="SourceGraphic" in2="box-shadow-md-effect3" result="shape" />
</filter>
<linearGradient id="box-gradient-md" x1="112" y1="24.75" x2="150.395" y2="92.3024" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-200" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute bottom-3 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
export const lg = ({
className,
svgClassName,
childrenClassName,
children = <UploadCloud02 className="size-7" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-45.25 w-55", className)}>
<svg viewBox="0 0 220 181" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="110" cy="90" r="80" className="fill-utility-gray-100" />
<circle cx="26" cy="30" r="8" className="fill-utility-gray-100" />
<circle cx="198" cy="136" r="6" className="fill-utility-gray-100" />
<circle cx="25" cy="148" r="10" className="fill-utility-gray-100" />
<circle cx="210" cy="56" r="10" className="fill-utility-gray-100" />
<circle cx="191" cy="21" r="7" className="fill-utility-gray-100" />
<g filter="url(#box-shadow-lg)">
<path d="M110.001 139.432L174 111V30L110.503 2L46 30V111L110.001 139.432Z" className="fill-utility-gray-50" />
<path
d="M174.5 111.325L174.203 111.457L110.204 139.889L110.001 139.979L109.798 139.889L45.7969 111.457L45.5 111.325V29.6719L45.8008 29.541L110.304 1.54102L110.504 1.4541L110.704 1.54297L174.202 29.543L174.5 29.6738V111.325Z"
className="stroke-border-secondary_alt"
/>
<path d="M110 56.9531V139.5L46 111V30.0001L110 56.9531Z" className="fill-utility-gray-200" />
<path d="M110.001 57V139.5L174 111V30L110.001 57Z" fill="url(#box-gradient-lg)" />
<path d="M110 57L174 30L110.503 2L46 30L110 57Z" className="fill-utility-gray-50" />
<path
d="M70.5 19.3627L133.882 46.9503L134.461 67.173L152.299 59.8125L151.759 39.4622L86.3577 12.4868L70.5 19.3627Z"
className="fill-utility-gray-200"
/>
</g>
<defs>
<filter id="box-shadow-lg" x="25" y="0.908508" width="170" height="179.618" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="box-shadow-lg-effect1" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="box-shadow-lg-effect1" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="box-shadow-lg-effect2" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="box-shadow-lg-effect1" result="box-shadow-lg-effect2" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="box-shadow-lg-effect3" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="box-shadow-lg-effect2" result="box-shadow-lg-effect3" />
<feBlend mode="normal" in="SourceGraphic" in2="box-shadow-lg-effect3" result="shape" />
</filter>
<linearGradient id="box-gradient-lg" x1="142" y1="30" x2="189.255" y2="113.141" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-200" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute bottom-5 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
const sizes = {
sm,
md,
lg,
};

281
src/components/shared-assets/illustrations/cloud.tsx Normal file
View File

@@ -0,0 +1,281 @@
import type { HTMLAttributes } from "react";
import { SearchLg } from "@untitledui/icons";
import { cx } from "@/utils/cx";
interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
size?: "sm" | "md" | "lg";
svgClassName?: string;
childrenClassName?: string;
}
export const CloudIllustration = ({ size = "lg", ...otherProps }: IllustrationProps) => {
const Pattern = sizes[size];
return <Pattern {...otherProps} />;
};
export const sm = ({
className,
svgClassName,
childrenClassName,
children = <SearchLg className="size-6" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-30 w-38", className)}>
<svg viewBox="0 0 152 120" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="76" cy="52" r="52" className="fill-utility-gray-100" />
<circle cx="21" cy="19" r="5" className="fill-utility-gray-100" />
<circle cx="18" cy="109" r="7" className="fill-utility-gray-100" />
<circle cx="145" cy="35" r="7" className="fill-utility-gray-100" />
<circle cx="134" cy="8" r="4" className="fill-utility-gray-100" />
<g filter="url(#filter-01-sm)">
<path
d="M78.6 16C67.8273 16 58.2978 21.3233 52.4987 29.4829C50.605 29.0363 48.6301 28.8 46.6 28.8C32.4615 28.8 21 40.2615 21 54.4C21 68.5385 32.4615 80 46.6 80L110.6 80C122.971 80 133 69.9712 133 57.6C133 45.2288 122.971 35.2 110.6 35.2C109.721 35.2 108.854 35.2506 108.002 35.349C103.098 23.9677 91.7797 16 78.6 16Z"
className="fill-bg-secondary"
/>
<path
d="M78.6 15.5C67.7787 15.5 58.1927 20.7893 52.2864 28.9214C50.4555 28.5145 48.5525 28.3 46.6 28.3C32.1854 28.3 20.5 39.9854 20.5 54.4C20.5 68.8146 32.1854 80.5 46.6 80.5L110.6 80.5C123.247 80.5 133.5 70.2473 133.5 57.6C133.5 44.9527 123.247 34.7 110.6 34.7C109.828 34.7 109.065 34.7382 108.313 34.8128C103.256 23.4354 91.8553 15.5 78.6 15.5Z"
className="stroke-border-secondary_alt"
/>
<ellipse cx="46.6" cy="54.3998" rx="25.6" ry="25.6" fill="url(#cloud-gradient-01-sm)" />
<circle cx="78.6" cy="48" r="32" fill="url(#cloud-gradient-02-sm)" />
<ellipse cx="110.6" cy="57.6002" rx="22.4" ry="22.4" fill="url(#cloud-gradient-03-sm)" />
</g>
<defs>
<filter id="filter-01-sm" x="0" y="15" width="154" height="106" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect-01-sm" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect-01-sm" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-02-sm" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect-02-sm" result="effect-02-sm" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-03-sm" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect-02-sm" result="effect-03-sm" />
<feBlend mode="normal" in="SourceGraphic" in2="effect-03-sm" result="shape" />
</filter>
<linearGradient id="cloud-gradient-01-sm" x1="26.9429" y1="37.4855" x2="72.2" y2="79.9998" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-200" />
<stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="cloud-gradient-02-sm" x1="54.0286" y1="26.8571" x2="110.6" y2="80" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-200" />
<stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="cloud-gradient-03-sm" x1="93.4" y1="42.8002" x2="133" y2="80.0002" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-200" />
<stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute inset-x-13 bottom-2 z-10 flex size-12 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
export const md = ({
className,
svgClassName,
childrenClassName,
children = <SearchLg className="size-7" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-32 w-43", className)}>
<svg viewBox="0 0 182 137" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="91" cy="64" r="64" className="fill-utility-gray-100" />
<circle cx="25" cy="20" r="6" className="fill-utility-gray-100" />
<circle cx="22" cy="112" r="8" className="fill-utility-gray-100" />
<circle cx="165" cy="36" r="8" className="fill-utility-gray-100" />
<circle cx="154" cy="9" r="5" className="fill-utility-gray-100" />
<g filter="url(#filter-01-md)">
<path
d="M93 16C79.534 16 67.6222 22.6541 60.3733 32.8536C58.0062 32.2954 55.5376 32 53 32C35.3269 32 21 46.3269 21 64C21 81.6731 35.3269 96 53 96H133C148.464 96 161 83.464 161 68C161 52.536 148.464 40 133 40C131.902 40 130.818 40.0633 129.752 40.1863C123.623 25.9596 109.475 16 93 16Z"
className="fill-bg-secondary"
/>
<path
d="M93 15.5C79.4856 15.5 67.5173 22.1198 60.161 32.2916C57.8566 31.7734 55.4599 31.5 53 31.5C35.0507 31.5 20.5 46.0507 20.5 64C20.5 81.9493 35.0507 96.5 53 96.5H133C148.74 96.5 161.5 83.7401 161.5 68C161.5 52.2599 148.74 39.5 133 39.5C132.009 39.5 131.029 39.5506 130.064 39.6495C123.78 25.427 109.55 15.5 93 15.5Z"
stroke="black"
strokeOpacity="0.08"
/>
<circle cx="53" cy="64" r="32" fill="url(#cloud-gradient-01-md)" />
<circle cx="93" cy="56" r="40" fill="url(#cloud-gradient-02-md)" />
<circle cx="133" cy="68" r="28" fill="url(#cloud-gradient-03-md)" />
</g>
<defs>
<filter id="filter-01-md" x="0" y="15" width="182" height="122" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect-01-md" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect-01-md" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-02-md" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect-01-md" result="effect-02-md" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-03-md" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect-02-md" result="effect-03-md" />
<feBlend mode="normal" in="SourceGraphic" in2="effect-03-md" result="shape" />
</filter>
<linearGradient id="cloud-gradient-01-md" x1="28.4286" y1="42.8571" x2="85" y2="96" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-200" />
<stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="cloud-gradient-02-md" x1="62.2857" y1="29.5714" x2="133" y2="95.9999" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-200" />
<stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="cloud-gradient-03-md" x1="111.5" y1="49.5" x2="161" y2="96" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-200" />
<stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute bottom-3 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
export const lg = ({
className,
svgClassName,
childrenClassName,
children = <SearchLg className="size-7" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-40 w-55", className)}>
<svg viewBox="0 0 220 160" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="110" cy="80" r="80" className="fill-utility-gray-100" />
<circle cx="26" cy="20" r="8" className="fill-utility-gray-100" />
<circle cx="198" cy="126" r="6" className="fill-utility-gray-100" />
<circle cx="25" cy="138" r="10" className="fill-utility-gray-100" />
<circle cx="210" cy="46" r="10" className="fill-utility-gray-100" />
<circle cx="191" cy="11" r="7" className="fill-utility-gray-100" />
<g filter="url(#filter-01-lg)">
<mask id="path-01-lg" maskUnits="userSpaceOnUse" x="23" y="15" width="176" height="102" fill="black">
<rect fill="white" x="23" y="15" width="176" height="102" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M113.486 16C96.7495 16 81.9448 24.2701 72.9354 36.9466C69.9934 36.2528 66.9253 35.8857 63.7714 35.8857C41.8063 35.8857 24 53.692 24 75.6571C24 97.6223 41.8063 115.429 63.7714 115.429H163.2C182.42 115.429 198 99.8481 198 80.6286C198 61.4091 182.42 45.8286 163.2 45.8286C161.835 45.8286 160.488 45.9072 159.164 46.0601C151.546 28.3784 133.961 16 113.486 16Z"
/>
</mask>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M113.486 16C96.7495 16 81.9448 24.2701 72.9354 36.9466C69.9934 36.2528 66.9253 35.8857 63.7714 35.8857C41.8063 35.8857 24 53.692 24 75.6571C24 97.6223 41.8063 115.429 63.7714 115.429H163.2C182.42 115.429 198 99.8481 198 80.6286C198 61.4091 182.42 45.8286 163.2 45.8286C161.835 45.8286 160.488 45.9072 159.164 46.0601C151.546 28.3784 133.961 16 113.486 16Z"
className="fill-bg-secondary"
/>
<path
d="M72.9354 36.9466L72.7059 37.9199L73.3607 38.0744L73.7505 37.5259L72.9354 36.9466ZM63.7714 115.429V116.429V115.429ZM159.164 46.0601L158.245 46.4558L158.54 47.1389L159.279 47.0535L159.164 46.0601ZM73.7505 37.5259C82.5804 25.102 97.0869 17 113.486 17V15C96.412 15 81.3092 23.4382 72.1203 36.3673L73.7505 37.5259ZM63.7714 36.8857C66.8474 36.8857 69.8386 37.2437 72.7059 37.9199L73.1649 35.9733C70.1483 35.2619 67.0031 34.8857 63.7714 34.8857V36.8857ZM25 75.6571C25 54.2443 42.3586 36.8857 63.7714 36.8857V34.8857C41.254 34.8857 23 53.1397 23 75.6571H25ZM63.7714 114.429C42.3586 114.429 25 97.07 25 75.6571H23C23 98.1746 41.254 116.429 63.7714 116.429V114.429ZM163.2 114.429H63.7714V116.429H163.2V114.429ZM197 80.6286C197 99.2958 181.867 114.429 163.2 114.429V116.429C182.972 116.429 199 100.4 199 80.6286H197ZM163.2 46.8286C181.867 46.8286 197 61.9613 197 80.6286H199C199 60.8568 182.972 44.8286 163.2 44.8286V46.8286ZM159.279 47.0535C160.565 46.905 161.873 46.8286 163.2 46.8286V44.8286C161.796 44.8286 160.411 44.9094 159.049 45.0667L159.279 47.0535ZM113.486 17C133.548 17 150.78 29.1277 158.245 46.4558L160.082 45.6644C152.312 27.6291 134.375 15 113.486 15V17Z"
className="fill-border-secondary_alt"
mask="url(#path-01-lg)"
/>
<circle cx="63.7714" cy="75.6572" r="39.7714" fill="url(#cloud-gradient-01-lg)" />
<circle cx="113.486" cy="65.7143" r="49.7143" fill="url(#cloud-gradient-02-lg)" />
<circle cx="163.2" cy="80.6286" r="34.8" fill="url(#cloud-gradient-03-lg)" />
</g>
<defs>
<filter id="filter-01-lg" x="3" y="15" width="216" height="141.429" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect-01-lg" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect-01-lg" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-02-lg" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect-01-lg" result="effect-02-lg" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect-03-lg" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect-02-lg" result="effect-03-lg" />
<feBlend mode="normal" in="SourceGraphic" in2="effect-03-lg" result="shape" />
</filter>
<linearGradient id="cloud-gradient-01-lg" x1="33.2326" y1="49.3796" x2="103.543" y2="115.429" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-200" />
<stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="cloud-gradient-02-lg" x1="75.3122" y1="32.8673" x2="163.2" y2="115.428" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-200" />
<stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="cloud-gradient-03-lg" x1="136.479" y1="57.6357" x2="198" y2="115.429" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-200" />
<stop offset="0.350715" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute bottom-5 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
const sizes = {
sm,
md,
lg,
};

303
src/components/shared-assets/illustrations/credit-card.tsx Normal file
View File

@@ -0,0 +1,303 @@
import type { HTMLAttributes } from "react";
import { AlertCircle } from "@untitledui/icons";
import { cx } from "@/utils/cx";
interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
size?: "sm" | "md" | "lg";
svgClassName?: string;
childrenClassName?: string;
}
export const CreditCardIllustration = ({ size = "lg", ...otherProps }: IllustrationProps) => {
const Pattern = sizes[size];
return <Pattern {...otherProps} />;
};
export const sm = ({
className,
svgClassName,
childrenClassName,
children = <AlertCircle className="size-6" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-29.5 w-38", className)}>
<svg viewBox="0 0 152 118" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="21" cy="5" r="5" className="fill-utility-gray-100" />
<circle cx="18" cy="109" r="7" className="fill-utility-gray-100" />
<circle cx="145" cy="35" r="7" className="fill-utility-gray-100" />
<circle cx="134" cy="8" r="4" className="fill-utility-gray-100" />
<circle cx="76" cy="52" r="52" className="fill-utility-gray-100" />
<g filter="url(#credit-card-shadow-sm)">
<path
d="M18 18C18 14.6863 20.6863 12 24 12H127C130.314 12 133 14.6863 133 18V78C133 81.3137 130.314 84 127 84H24C20.6863 84 18 81.3137 18 78V18Z"
fill="url(#credit-card-gradient-sm)"
/>
<path
d="M127 11.75C130.452 11.75 133.25 14.5482 133.25 18V78C133.25 81.4518 130.452 84.25 127 84.25H24C20.5482 84.25 17.75 81.4518 17.75 78V18C17.75 14.5482 20.5482 11.75 24 11.75H127Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path
d="M28 28C28 26.8954 28.8954 26 30 26H46C47.1046 26 48 26.8954 48 28V39C48 40.1046 47.1046 41 46 41H30C28.8954 41 28 40.1046 28 39V28Z"
className="fill-utility-gray-200"
/>
<circle cx="114.667" cy="32.3335" r="8.33333" className="fill-utility-gray-300" />
<circle cx="104.667" cy="32.3333" r="8.33333" className="fill-utility-gray-200" />
<path
d="M28 73.6667C28 72.7462 28.7462 72 29.6667 72H46.3333C47.2538 72 48 72.7462 48 73.6667C48 74.5871 47.2538 75.3333 46.3333 75.3333H29.6667C28.7462 75.3333 28 74.5871 28 73.6667Z"
className="fill-utility-gray-300"
/>
<path
d="M53 73.6667C53 72.7462 53.7462 72 54.6667 72H71.3333C72.2538 72 73 72.7462 73 73.6667C73 74.5871 72.2538 75.3333 71.3333 75.3333H54.6667C53.7462 75.3333 53 74.5871 53 73.6667Z"
className="fill-utility-gray-300"
/>
<path
d="M78 73.6667C78 72.7462 78.7462 72 79.6667 72H96.3333C97.2538 72 98 72.7462 98 73.6667C98 74.5871 97.2538 75.3333 96.3333 75.3333H79.6667C78.7462 75.3333 78 74.5871 78 73.6667Z"
className="fill-utility-gray-300"
/>
<path
d="M103 73.6667C103 72.7462 103.746 72 104.667 72H121.333C122.254 72 123 72.7462 123 73.6667C123 74.5871 122.254 75.3333 121.333 75.3333H104.667C103.746 75.3333 103 74.5871 103 73.6667Z"
className="fill-utility-gray-300"
/>
</g>
<defs>
<filter
id="credit-card-shadow-sm"
x="0.833333"
y="11.5"
width="149.333"
height="106.333"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="3.33333" operator="erode" in="SourceAlpha" result="credit-card-shadow-sm-effect1" />
<feOffset dy="6.66667" />
<feGaussianBlur stdDeviation="3.33333" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="credit-card-shadow-sm-effect1" />
<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" />
<feMorphology radius="3.33333" operator="erode" in="SourceAlpha" result="credit-card-shadow-sm-effect2" />
<feOffset dy="16.6667" />
<feGaussianBlur stdDeviation="10" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0" />
<feBlend mode="normal" in2="credit-card-shadow-sm-effect1" result="credit-card-shadow-sm-effect2" />
<feBlend mode="normal" in="SourceGraphic" in2="credit-card-shadow-sm-effect2" result="shape" />
</filter>
<linearGradient id="credit-card-gradient-sm" x1="22.0049" y1="83.1477" x2="19.9135" y2="17.2505" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute inset-x-13 bottom-2 z-10 flex size-12 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
export const md = ({
className,
svgClassName,
childrenClassName,
children = <AlertCircle className="size-7" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-35.75 w-45", className)}>
<svg viewBox="0 0 180 143" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="90" cy="64" r="64" className="fill-utility-gray-100" />
<circle cx="24" cy="6" r="6" className="fill-utility-gray-100" />
<circle cx="21" cy="112" r="8" className="fill-utility-gray-100" />
<circle cx="164" cy="36" r="8" className="fill-utility-gray-100" />
<circle cx="153" cy="9" r="5" className="fill-utility-gray-100" />
<g filter="url(#credit-card-shadow-md)">
<path
d="M21 22C21 18.6863 23.6863 16 27 16H153C156.314 16 159 18.6863 159 22V96C159 99.3137 156.314 102 153 102H27C23.6863 102 21 99.3137 21 96V22Z"
fill="url(#credit-card-gradient-md)"
/>
<path
d="M153 15.75C156.452 15.75 159.25 18.5482 159.25 22V96C159.25 99.4518 156.452 102.25 153 102.25H27C23.5482 102.25 20.75 99.4518 20.75 96V22C20.75 18.5482 23.5482 15.75 27 15.75H153Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path
d="M33 38C33 36.8954 33.8954 36 35 36H55C56.1046 36 57 36.8954 57 38V52C57 53.1046 56.1046 54 55 54H35C33.8954 54 33 53.1046 33 52V38Z"
className="fill-utility-gray-200"
/>
<circle cx="137" cy="42" r="10" className="fill-utility-gray-300" />
<circle cx="125" cy="42" r="10" className="fill-utility-gray-200" />
<path
d="M33 89C33 87.8954 33.8954 87 35 87H55C56.1046 87 57 87.8954 57 89C57 90.1046 56.1046 91 55 91H35C33.8954 91 33 90.1046 33 89Z"
className="fill-utility-gray-300"
/>
<path
d="M63 89C63 87.8954 63.8954 87 65 87H85C86.1046 87 87 87.8954 87 89C87 90.1046 86.1046 91 85 91H65C63.8954 91 63 90.1046 63 89Z"
className="fill-utility-gray-300"
/>
<path
d="M93 89C93 87.8954 93.8954 87 95 87H115C116.105 87 117 87.8954 117 89C117 90.1046 116.105 91 115 91H95C93.8954 91 93 90.1046 93 89Z"
className="fill-utility-gray-300"
/>
<path
d="M123 89C123 87.8954 123.895 87 125 87H145C146.105 87 147 87.8954 147 89C147 90.1046 146.105 91 145 91H125C123.895 91 123 90.1046 123 89Z"
className="fill-utility-gray-300"
/>
</g>
<defs>
<filter id="credit-card-shadow-md" x="0.5" y="15.5" width="179" height="127" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="credit-card-shadow-md-effect1" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="credit-card-shadow-md-effect1" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="credit-card-shadow-md-effect2" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="credit-card-shadow-md-effect1" result="credit-card-shadow-md-effect2" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="credit-card-shadow-md-effect3" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="credit-card-shadow-md-effect2" result="credit-card-shadow-md-effect3" />
<feBlend mode="normal" in="SourceGraphic" in2="credit-card-shadow-md-effect3" result="shape" />
</filter>
<linearGradient id="credit-card-gradient-md" x1="25.8058" y1="100.982" x2="23.3193" y2="22.2707" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute bottom-3 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
export const lg = ({
className,
svgClassName,
childrenClassName,
children = <AlertCircle className="size-7" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-41.75 w-55", className)}>
<svg viewBox="0 0 220 167" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="110" cy="80" r="80" className="fill-utility-gray-100" />
<circle cx="18" cy="12" r="8" className="fill-utility-gray-100" />
<circle cx="198" cy="142" r="6" className="fill-utility-gray-100" />
<circle cx="25" cy="138" r="10" className="fill-utility-gray-100" />
<circle cx="210" cy="46" r="10" className="fill-utility-gray-100" />
<circle cx="191" cy="11" r="7" className="fill-utility-gray-100" />
<g filter="url(#credit-card-shadow-lg)">
<path
d="M27 28C27 24.6863 29.6863 22 33 22H187C190.314 22 193 24.6863 193 28V120C193 123.314 190.314 126 187 126H33C29.6863 126 27 123.314 27 120V28Z"
fill="url(#credit-card-gradient-lg)"
/>
<path
d="M187 21.75C190.452 21.75 193.25 24.5482 193.25 28V120C193.25 123.452 190.452 126.25 187 126.25H33C29.5482 126.25 26.75 123.452 26.75 120V28C26.75 24.5482 29.5482 21.75 33 21.75H187Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path
d="M41.0698 48.186C41.0698 47.0815 41.9653 46.186 43.0698 46.186H68.0931C69.1977 46.186 70.0931 47.0815 70.0931 48.186V65.9535C70.0931 67.058 69.1977 67.9535 68.0931 67.9535H43.0698C41.9653 67.9535 41.0698 67.058 41.0698 65.9535V48.186Z"
className="fill-utility-gray-200"
/>
<circle cx="166.837" cy="53.4419" r="12.093" className="fill-utility-gray-300" />
<circle cx="152.325" cy="53.4419" r="12.093" className="fill-utility-gray-200" />
<path
d="M41.0698 110.279C41.0698 108.943 42.1527 107.86 43.4884 107.86H67.6745C69.0102 107.86 70.0931 108.943 70.0931 110.279C70.0931 111.615 69.0102 112.698 67.6745 112.698H43.4884C42.1527 112.698 41.0698 111.615 41.0698 110.279Z"
className="fill-utility-gray-300"
/>
<path
d="M77.3489 110.279C77.3489 108.943 78.4317 107.86 79.7675 107.86H103.954C105.289 107.86 106.372 108.943 106.372 110.279C106.372 111.615 105.289 112.698 103.954 112.698H79.7675C78.4317 112.698 77.3489 111.615 77.3489 110.279Z"
className="fill-utility-gray-300"
/>
<path
d="M113.628 110.279C113.628 108.943 114.711 107.86 116.047 107.86H140.233C141.568 107.86 142.651 108.943 142.651 110.279C142.651 111.615 141.568 112.698 140.233 112.698H116.047C114.711 112.698 113.628 111.615 113.628 110.279Z"
className="fill-utility-gray-300"
/>
<path
d="M149.907 110.279C149.907 108.943 150.99 107.86 152.326 107.86H176.512C177.847 107.86 178.93 108.943 178.93 110.279C178.93 111.615 177.847 112.698 176.512 112.698H152.326C150.99 112.698 149.907 111.615 149.907 110.279Z"
className="fill-utility-gray-300"
/>
</g>
<defs>
<filter id="credit-card-shadow-lg" x="6.5" y="21.5" width="207" height="145" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="credit-card-shadow-lg-effect1" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="credit-card-shadow-lg-effect1" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="credit-card-shadow-lg-effect2" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="credit-card-shadow-lg-effect1" result="credit-card-shadow-lg-effect2" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="credit-card-shadow-lg-effect3" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="credit-card-shadow-lg-effect2" result="credit-card-shadow-lg-effect3" />
<feBlend mode="normal" in="SourceGraphic" in2="credit-card-shadow-lg-effect3" result="shape" />
</filter>
<linearGradient id="credit-card-gradient-lg" x1="32.7809" y1="124.769" x2="29.758" y2="29.5842" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute bottom-5 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
const sizes = {
sm,
md,
lg,
};

538
src/components/shared-assets/illustrations/documents.tsx Normal file
View File

@@ -0,0 +1,538 @@
import type { HTMLAttributes } from "react";
import { UploadCloud02 } from "@untitledui/icons";
import { cx } from "@/utils/cx";
interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
size?: "sm" | "md" | "lg";
svgClassName?: string;
childrenClassName?: string;
}
export const DocumentsIllustration = ({ size = "lg", ...otherProps }: IllustrationProps) => {
const Pattern = sizes[size];
return <Pattern {...otherProps} />;
};
export const sm = ({
className,
svgClassName,
childrenClassName,
children = <UploadCloud02 className="size-6" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-30 w-40.25", className)}>
<svg viewBox="0 0 161 120" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="27" cy="11" r="5" className="fill-utility-gray-100" />
<circle cx="24" cy="109" r="7" className="fill-utility-gray-100" />
<circle cx="151" cy="35" r="7" className="fill-utility-gray-100" />
<circle cx="140" cy="8" r="4" className="fill-utility-gray-100" />
<circle cx="82" cy="52" r="52" className="fill-utility-gray-100" />
<g filter="url(#documents-shadow-01-sm)">
<path
d="M47.7267 79.1102L80.9652 63.6108C82.634 62.8326 83.356 60.8489 82.5778 59.1801L62.9485 17.0849L49.6564 12.2469L22.4612 24.9282C20.7924 25.7064 20.0704 27.6901 20.8486 29.359L43.296 77.4975C44.0741 79.1663 46.0578 79.8883 47.7267 79.1102Z"
fill="url(#documents-gradient-01-sm)"
/>
<path
d="M82.8045 59.0745C83.6409 60.8685 82.8648 63.0009 81.071 63.8374L47.8323 79.3368C46.0384 80.1733 43.906 79.3971 43.0694 77.6033L20.622 29.4646L20.5484 29.2952C19.8352 27.5384 20.6177 25.5121 22.3555 24.7017L49.6448 11.9765L63.1313 16.8852L82.8045 59.0745Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path d="M49.6569 12.2471L62.949 17.085L53.884 21.3121L49.6569 12.2471Z" className="fill-utility-gray-200" />
</g>
<g filter="url(#documents-shadow-02-sm)">
<path
d="M63.6162 67.7831H100.291C102.132 67.7831 103.625 66.2904 103.625 64.4491V18.0022L93.6227 8H63.6162C61.7748 8 60.2821 9.49271 60.2821 11.3341V64.4491C60.2821 66.2904 61.7748 67.7831 63.6162 67.7831Z"
fill="url(#documents-gradient-02-sm)"
/>
<path
d="M103.875 64.4492C103.875 66.4285 102.27 68.0332 100.291 68.0332H63.6161C61.6368 68.0332 60.0322 66.4285 60.0321 64.4492V11.334L60.037 11.1494C60.1331 9.25583 61.6986 7.75004 63.6161 7.75H93.7264L103.875 17.8984V64.4492Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path d="M93.6226 8L103.625 18.0022H93.6226V8Z" className="fill-utility-gray-200" />
</g>
<g filter="url(#documents-shadow-03-sm)">
<path
d="M82.4745 63.5909L115.713 79.0903C117.382 79.8685 119.366 79.1465 120.144 77.4777L139.773 35.3825L134.935 22.0903L107.74 9.40903C106.071 8.63085 104.087 9.35286 103.309 11.0217L80.8619 59.1602C80.0837 60.8291 80.8057 62.8128 82.4745 63.5909Z"
fill="url(#documents-gradient-03-sm)"
/>
<path
d="M120.37 77.5835C119.534 79.3773 117.401 80.1535 115.607 79.317L82.3688 63.8176C80.5749 62.981 79.7988 60.8486 80.6352 59.0547L103.083 10.916L103.165 10.7507C104.053 9.0752 106.108 8.37211 107.846 9.18243L135.135 21.9076L140.044 35.3941L120.37 77.5835Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path d="M134.936 22.0903L139.774 35.3825L130.708 31.1554L134.936 22.0903Z" className="fill-utility-gray-200" />
</g>
<defs>
<filter
id="documents-shadow-01-sm"
x="-0.560448"
y="8.0199"
width="104.547"
height="112.499"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_1949" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_1949" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_1949" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1182_1949" result="effect2_dropShadow_1182_1949" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_1949" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect2_dropShadow_1182_1949" result="effect3_dropShadow_1182_1949" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_1949" result="shape" />
</filter>
<filter
id="documents-shadow-02-sm"
x="39.7821"
y="7.5"
width="84.3428"
height="100.783"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_1949" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_1949" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_1949" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1182_1949" result="effect2_dropShadow_1182_1949" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_1949" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect2_dropShadow_1182_1949" result="effect3_dropShadow_1182_1949" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_1949" result="shape" />
</filter>
<filter
id="documents-shadow-03-sm"
x="59.4529"
y="8"
width="104.547"
height="112.499"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_1949" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_1949" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_1949" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1182_1949" result="effect2_dropShadow_1182_1949" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_1949" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect2_dropShadow_1182_1949" result="effect3_dropShadow_1182_1949" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_1949" result="shape" />
</filter>
<linearGradient id="documents-gradient-01-sm" x1="45.7739" y1="79.2399" x2="19.2854" y2="31.4527" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="documents-gradient-02-sm" x1="61.7915" y1="67.0755" x2="57.9806" y2="12.571" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="documents-gradient-03-sm" x1="81.1199" y1="62.1785" x2="100.701" y2="11.17" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute inset-x-13 bottom-2 z-10 flex size-12 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
export const md = ({
className,
svgClassName,
childrenClassName,
children = <UploadCloud02 className="size-7" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-34.25 w-46.25", className)}>
<svg viewBox="0 0 185 137" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="95" cy="64" r="64" className="fill-utility-gray-100" />
<circle cx="29" cy="12" r="6" className="fill-utility-gray-100" />
<circle cx="26" cy="112" r="8" className="fill-utility-gray-100" />
<circle cx="173" cy="96" r="8" className="fill-utility-gray-100" />
<circle cx="158" cy="9" r="5" className="fill-utility-gray-100" />
<g filter="url(#documents-shadow-01-md)">
<path
d="M53.9372 95.3137L93.8147 76.7185C95.8169 75.7848 96.6831 73.4049 95.7495 71.4028L72.1994 20.8995L56.2523 15.0953L23.6252 30.3095C21.6231 31.2431 20.7569 33.6231 21.6905 35.6252L48.6215 93.3789C49.5551 95.3811 51.935 96.2473 53.9372 95.3137Z"
fill="url(#documents-gradient-01-md)"
/>
<path
d="M95.9762 71.2975C96.9679 73.4247 96.0477 75.9536 93.9206 76.9455L54.043 95.5407C51.9159 96.5326 49.3872 95.612 48.3951 93.485L21.4639 35.7309C20.4719 33.6036 21.3923 31.0749 23.5196 30.0829L56.2405 14.8249L72.3823 20.7001L95.9762 71.2975Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path d="M56.2523 15.0952L72.1994 20.8995L61.3237 25.9709L56.2523 15.0952Z" className="fill-utility-gray-200" />
</g>
<g filter="url(#documents-shadow-02-md)">
<path
d="M73 81.7241H117C119.209 81.7241 121 79.9333 121 77.7241V22L109 10H73C70.7909 10 69 11.7909 69 14V77.7241C69 79.9333 70.7909 81.7241 73 81.7241Z"
fill="url(#documents-gradient-02-md)"
/>
<path
d="M121.25 77.7246C121.25 80.0716 119.347 81.9746 117 81.9746H73C70.6529 81.9746 68.7503 80.0716 68.75 77.7246V14C68.75 11.6528 70.6528 9.75 73 9.75H109.104L121.25 21.8965V77.7246Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path d="M109 10L121 22H109V10Z" className="fill-utility-gray-200" />
</g>
<g filter="url(#documents-shadow-03-md)">
<path
d="M95.6253 76.6946L135.503 95.2898C137.505 96.2234 139.885 95.3572 140.819 93.3551L164.369 42.8518L158.564 26.9047L125.937 11.6905C123.935 10.7569 121.555 11.6231 120.622 13.6252L93.6906 71.3789C92.7569 73.3811 93.6232 75.761 95.6253 76.6946Z"
fill="url(#documents-gradient-03-md)"
/>
<path
d="M141.045 93.4611C140.053 95.5881 137.524 96.5087 135.397 95.5168L95.5195 76.9216C93.3923 75.9297 92.4721 73.4009 93.4638 71.2737L120.395 13.5196C121.387 11.3923 123.916 10.4719 126.043 11.4639L158.764 26.7219L164.639 42.8637L141.045 93.4611Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path d="M158.564 26.9048L164.369 42.8519L153.493 37.7805L158.564 26.9048Z" className="fill-utility-gray-200" />
</g>
<defs>
<filter
id="documents-shadow-01-md"
x="0"
y="10.0238"
width="117.44"
height="126.98"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2009" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2009" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2009" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1182_2009" result="effect2_dropShadow_1182_2009" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2009" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect2_dropShadow_1182_2009" result="effect3_dropShadow_1182_2009" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2009" result="shape" />
</filter>
<filter
id="documents-shadow-02-md"
x="48.5"
y="9.5"
width="93"
height="112.724"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2009" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2009" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2009" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1182_2009" result="effect2_dropShadow_1182_2009" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2009" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect2_dropShadow_1182_2009" result="effect3_dropShadow_1182_2009" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2009" result="shape" />
</filter>
<filter
id="documents-shadow-03-md"
x="72.0001"
y="10"
width="117.44"
height="126.98"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2009" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2009" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2009" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1182_2009" result="effect2_dropShadow_1182_2009" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2009" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect2_dropShadow_1182_2009" result="effect3_dropShadow_1182_2009" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2009" result="shape" />
</filter>
<linearGradient id="documents-gradient-01-md" x1="51.5944" y1="95.4694" x2="19.8151" y2="38.1371" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="documents-gradient-02-md" x1="70.8109" y1="80.8751" x2="66.2388" y2="15.484" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="documents-gradient-03-md" x1="94.0001" y1="75" x2="117.492" y2="13.8032" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute bottom-3 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
export const lg = ({
className,
svgClassName,
childrenClassName,
children = <UploadCloud02 className="size-7" />,
...otherProps
}: Omit<IllustrationProps, "size">) => {
return (
<div {...otherProps} className={cx("relative h-41.5 w-57.5", className)}>
<svg viewBox="0 0 230 166" fill="none" className={cx("size-full stroke-inherit text-inherit", svgClassName)}>
<circle cx="118" cy="80" r="80" className="fill-utility-gray-100" />
<circle cx="34" cy="20" r="8" className="fill-utility-gray-100" />
<circle cx="206" cy="126" r="6" className="fill-utility-gray-100" />
<circle cx="33" cy="138" r="10" className="fill-utility-gray-100" />
<circle cx="218" cy="38" r="10" className="fill-utility-gray-100" />
<circle cx="199" cy="11" r="7" className="fill-utility-gray-100" />
<g filter="url(#documents-shadow-01-lg)">
<path
d="M64.0781 124.214L116.529 99.7552C119.163 98.5272 120.302 95.3969 119.074 92.7634L88.0986 26.3361L67.1232 18.7017L24.2085 38.7132C21.5751 39.9412 20.4357 43.0715 21.6637 45.7049L57.0863 121.669C58.3143 124.302 61.4446 125.442 64.0781 124.214Z"
fill="url(#documents-gradient-01-lg)"
/>
<path
d="M119.301 92.6576C120.587 95.4162 119.394 98.6959 116.635 99.9823L64.1844 124.44C61.4258 125.727 58.1461 124.533 56.8597 121.775L21.4374 45.811C20.151 43.0524 21.3447 39.7727 24.1033 38.4864L67.1114 18.4314L67.2087 18.4668L88.1843 26.1006L88.2816 26.136L119.301 92.6576Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path d="M67.123 18.7017L88.0984 26.3361L73.7935 33.0066L67.123 18.7017Z" className="fill-utility-gray-200" />
</g>
<g filter="url(#documents-shadow-02-lg)">
<path
d="M89.1516 106.339H147.025C149.931 106.339 152.286 103.984 152.286 101.078V27.7837L136.503 12H89.1516C86.2459 12 83.8904 14.3555 83.8904 17.2612V101.078C83.8904 103.984 86.2459 106.339 89.1516 106.339Z"
fill="url(#documents-gradient-02-lg)"
/>
<path
d="M152.537 101.078C152.537 104.122 150.069 106.59 147.025 106.59H89.1521C86.1083 106.59 83.6404 104.122 83.6404 101.078V17.2617C83.6404 14.2179 86.1083 11.75 89.1521 11.75H136.606L136.679 11.8232L152.464 27.6064L152.537 27.6797V101.078Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path d="M136.503 12L152.286 27.7837H136.503V12Z" className="fill-utility-gray-200" />
</g>
<g filter="url(#documents-shadow-03-lg)">
<path
d="M118.911 99.724L171.362 124.182C173.996 125.41 177.126 124.271 178.354 121.638L209.329 55.2103L201.695 34.2349L158.78 14.2235C156.147 12.9955 153.017 14.1348 151.789 16.7683L116.366 92.7322C115.138 95.3657 116.277 98.496 118.911 99.724Z"
fill="url(#documents-gradient-03-lg)"
/>
<path
d="M178.581 121.743C177.295 124.502 174.015 125.696 171.256 124.409L118.805 99.9512C116.047 98.6649 114.853 95.3851 116.139 92.6265L151.562 16.6631C152.848 13.9045 156.128 12.7108 158.886 13.9971L201.894 34.0521L201.93 34.1494L209.565 55.1245L209.6 55.2219L178.581 121.743Z"
className="stroke-border-secondary_alt"
strokeWidth="0.5"
/>
<path d="M201.695 34.2349L209.329 55.2102L195.024 48.5398L201.695 34.2349Z" className="fill-utility-gray-200" />
</g>
<defs>
<filter
id="documents-shadow-01-lg"
x="-0.559753"
y="12.0312"
width="141.857"
height="154.406"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2741" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2741" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2741" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1182_2741" result="effect2_dropShadow_1182_2741" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2741" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect2_dropShadow_1182_2741" result="effect3_dropShadow_1182_2741" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2741" result="shape" />
</filter>
<filter
id="documents-shadow-02-lg"
x="63.3904"
y="11.5"
width="109.396"
height="135.339"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2741" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2741" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2741" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1182_2741" result="effect2_dropShadow_1182_2741" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2741" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect2_dropShadow_1182_2741" result="effect3_dropShadow_1182_2741" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2741" result="shape" />
</filter>
<filter
id="documents-shadow-03-lg"
x="94.1425"
y="12"
width="141.857"
height="154.406"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="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" />
<feMorphology radius="1.5" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1182_2741" />
<feOffset dy="3" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1182_2741" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1182_2741" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1182_2741" result="effect2_dropShadow_1182_2741" />
<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" />
<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect3_dropShadow_1182_2741" />
<feOffset dy="20" />
<feGaussianBlur stdDeviation="12" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0" />
<feBlend mode="normal" in2="effect2_dropShadow_1182_2741" result="effect3_dropShadow_1182_2741" />
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1182_2741" result="shape" />
</filter>
<linearGradient id="documents-gradient-01-lg" x1="60.9966" y1="124.418" x2="19.197" y2="49.0089" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="documents-gradient-02-lg" x1="86.2723" y1="105.223" x2="80.2585" y2="19.2131" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
<linearGradient id="documents-gradient-03-lg" x1="116.773" y1="97.4951" x2="147.672" y2="17.0024" gradientUnits="userSpaceOnUse">
<stop stopColor="currentColor" className="text-utility-gray-100" />
<stop offset="1" stopColor="currentColor" className="text-utility-gray-50" />
</linearGradient>
</defs>
</svg>
{children && (
<span
className={cx(
"absolute bottom-5 left-1/2 z-10 flex size-14 -translate-x-1/2 items-center justify-center rounded-full bg-alpha-black/20 text-fg-white backdrop-blur-xs",
childrenClassName,
)}
>
{children}
</span>
)}
</div>
);
};
const sizes = {
sm,
md,
lg,
};

26
src/components/shared-assets/illustrations/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import type { HTMLAttributes } from "react";
import { BoxIllustration } from "./box";
import { CloudIllustration } from "./cloud";
import { CreditCardIllustration } from "./credit-card";
import { DocumentsIllustration } from "./documents";
const types = {
box: BoxIllustration,
cloud: CloudIllustration,
documents: DocumentsIllustration,
"credit-card": CreditCardIllustration,
};
export interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
size?: "sm" | "md" | "lg";
svgClassName?: string;
childrenClassName?: string;
}
export const Illustration = (props: IllustrationProps & { type: keyof typeof types }) => {
const { type } = props;
const Component = types[type];
return <Component {...props} />;
};