mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-12 02:38:15 +00:00
chore: initial Untitled UI Vite scaffold with FontAwesome Pro
This commit is contained in:
113
src/components/shared-assets/background-patterns/circle.tsx
Normal file
113
src/components/shared-assets/background-patterns/circle.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import type { SVGProps } from "react";
|
||||
import { cx } from "@/utils/cx";
|
||||
|
||||
export const Circle = (props: Omit<SVGProps<SVGSVGElement>, "size"> & { size?: "sm" | "md" | "lg" }) => {
|
||||
const { size = "lg", className } = props;
|
||||
const Pattern = sizes[size];
|
||||
|
||||
return <Pattern className={className} />;
|
||||
};
|
||||
|
||||
const lg = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="768" height="768" viewBox="0 0 768 768" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
|
||||
<mask id="mask0_4933_392997" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
|
||||
<rect width="768" height="768" fill="url(#paint0_radial_4933_392997)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_4933_392997)">
|
||||
<circle cx="384" cy="384" r="47.5" stroke="currentColor" />
|
||||
<circle cx="384" cy="384" r="95.5" stroke="currentColor" />
|
||||
<circle cx="384" cy="384" r="143.5" stroke="currentColor" />
|
||||
<circle cx="384" cy="384" r="191.5" stroke="currentColor" />
|
||||
<circle cx="384" cy="384" r="239.5" stroke="currentColor" />
|
||||
<circle cx="384" cy="384" r="287.5" stroke="currentColor" />
|
||||
<circle cx="384" cy="384" r="335.5" stroke="currentColor" />
|
||||
<circle cx="384" cy="384" r="383.5" stroke="currentColor" />
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_4933_392997"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(384 384) rotate(90) scale(384 384)"
|
||||
>
|
||||
<stop />
|
||||
<stop offset="1" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const md = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="480" height="480" viewBox="0 0 480 480" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
|
||||
<mask id="mask0_4933_393068" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="480" height="480">
|
||||
<rect width="480" height="480" fill="url(#paint0_radial_4933_393068)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_4933_393068)">
|
||||
<circle cx="240" cy="240" r="47.5" stroke="currentColor" />
|
||||
<circle cx="240" cy="240" r="79.5" stroke="currentColor" />
|
||||
<circle cx="240" cy="240" r="111.5" stroke="currentColor" />
|
||||
<circle cx="240" cy="240" r="143.5" stroke="currentColor" />
|
||||
<circle cx="240" cy="240" r="143.5" stroke="currentColor" />
|
||||
<circle cx="240" cy="240" r="175.5" stroke="currentColor" />
|
||||
<circle cx="240" cy="240" r="207.5" stroke="currentColor" />
|
||||
<circle cx="240" cy="240" r="239.5" stroke="currentColor" />
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_4933_393068"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(240 240) rotate(90) scale(240 240)"
|
||||
>
|
||||
<stop />
|
||||
<stop offset="1" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const sm = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="336" height="336" viewBox="0 0 336 336" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
|
||||
<mask id="mask0_4947_375931" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="336" height="336">
|
||||
<rect width="336" height="336" fill="url(#paint0_radial_4947_375931)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_4947_375931)">
|
||||
<circle cx="168" cy="168" r="47.5" stroke="currentColor" />
|
||||
<circle cx="168" cy="168" r="47.5" stroke="currentColor" />
|
||||
<circle cx="168" cy="168" r="71.5" stroke="currentColor" />
|
||||
<circle cx="168" cy="168" r="95.5" stroke="currentColor" />
|
||||
<circle cx="168" cy="168" r="119.5" stroke="currentColor" />
|
||||
<circle cx="168" cy="168" r="143.5" stroke="currentColor" />
|
||||
<circle cx="168" cy="168" r="167.5" stroke="currentColor" />
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_4947_375931"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(168 168) rotate(90) scale(168 168)"
|
||||
>
|
||||
<stop />
|
||||
<stop offset="1" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm,
|
||||
md,
|
||||
lg,
|
||||
};
|
||||
2520
src/components/shared-assets/background-patterns/grid-check.tsx
Normal file
2520
src/components/shared-assets/background-patterns/grid-check.tsx
Normal file
File diff suppressed because it is too large
Load Diff
231
src/components/shared-assets/background-patterns/grid.tsx
Normal file
231
src/components/shared-assets/background-patterns/grid.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
import type { SVGProps } from "react";
|
||||
import { cx } from "@/utils/cx";
|
||||
|
||||
export const Grid = (props: Omit<SVGProps<SVGSVGElement>, "size"> & { size?: "sm" | "md" | "lg" }) => {
|
||||
const { size = "lg", className } = props;
|
||||
const Pattern = sizes[size];
|
||||
|
||||
return <Pattern className={className} />;
|
||||
};
|
||||
|
||||
const lg = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="768" height="768" viewBox="0 0 768 768" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
|
||||
<mask id="mask0_4933_393109" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
|
||||
<rect width="768" height="768" fill="url(#paint0_radial_4933_393109)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_4933_393109)">
|
||||
<g clipPath="url(#clip0_4933_393109)">
|
||||
<g clipPath="url(#clip1_4933_393109)">
|
||||
<line x1="0.5" x2="0.5" y2="768" stroke="currentColor" />
|
||||
<line x1="48.5" x2="48.5" y2="768" stroke="currentColor" />
|
||||
<line x1="96.5" x2="96.5" y2="768" stroke="currentColor" />
|
||||
<line x1="144.5" x2="144.5" y2="768" stroke="currentColor" />
|
||||
<line x1="192.5" x2="192.5" y2="768" stroke="currentColor" />
|
||||
<line x1="240.5" x2="240.5" y2="768" stroke="currentColor" />
|
||||
<line x1="288.5" x2="288.5" y2="768" stroke="currentColor" />
|
||||
<line x1="336.5" x2="336.5" y2="768" stroke="currentColor" />
|
||||
<line x1="384.5" x2="384.5" y2="768" stroke="currentColor" />
|
||||
<line x1="432.5" x2="432.5" y2="768" stroke="currentColor" />
|
||||
<line x1="480.5" x2="480.5" y2="768" stroke="currentColor" />
|
||||
<line x1="528.5" x2="528.5" y2="768" stroke="currentColor" />
|
||||
<line x1="576.5" x2="576.5" y2="768" stroke="currentColor" />
|
||||
<line x1="624.5" x2="624.5" y2="768" stroke="currentColor" />
|
||||
<line x1="672.5" x2="672.5" y2="768" stroke="currentColor" />
|
||||
<line x1="720.5" x2="720.5" y2="768" stroke="currentColor" />
|
||||
</g>
|
||||
<rect x="0.5" y="0.5" width="767" height="767" stroke="currentColor" />
|
||||
<g clipPath="url(#clip2_4933_393109)">
|
||||
<line y1="47.5" x2="768" y2="47.5" stroke="currentColor" />
|
||||
<line y1="95.5" x2="768" y2="95.5" stroke="currentColor" />
|
||||
<line y1="143.5" x2="768" y2="143.5" stroke="currentColor" />
|
||||
<line y1="191.5" x2="768" y2="191.5" stroke="currentColor" />
|
||||
<line y1="239.5" x2="768" y2="239.5" stroke="currentColor" />
|
||||
<line y1="287.5" x2="768" y2="287.5" stroke="currentColor" />
|
||||
<line y1="335.5" x2="768" y2="335.5" stroke="currentColor" />
|
||||
<line y1="383.5" x2="768" y2="383.5" stroke="currentColor" />
|
||||
<line y1="431.5" x2="768" y2="431.5" stroke="currentColor" />
|
||||
<line y1="479.5" x2="768" y2="479.5" stroke="currentColor" />
|
||||
<line y1="527.5" x2="768" y2="527.5" stroke="currentColor" />
|
||||
<line y1="575.5" x2="768" y2="575.5" stroke="currentColor" />
|
||||
<line y1="623.5" x2="768" y2="623.5" stroke="currentColor" />
|
||||
<line y1="671.5" x2="768" y2="671.5" stroke="currentColor" />
|
||||
<line y1="719.5" x2="768" y2="719.5" stroke="currentColor" />
|
||||
<line y1="767.5" x2="768" y2="767.5" stroke="currentColor" />
|
||||
</g>
|
||||
<rect x="0.5" y="0.5" width="767" height="767" stroke="currentColor" />
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_4933_393109"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(384 384) rotate(90) scale(384 384)"
|
||||
>
|
||||
<stop />
|
||||
<stop offset="1" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_4933_393109">
|
||||
<rect width="768" height="768" fill="white" />
|
||||
</clipPath>
|
||||
<clipPath id="clip1_4933_393109">
|
||||
<rect width="768" height="768" fill="white" />
|
||||
</clipPath>
|
||||
<clipPath id="clip2_4933_393109">
|
||||
<rect width="768" height="768" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const md = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="480" height="480" viewBox="0 0 480 480" {...props} fill="none" className={cx("text-border-secondary", props.className)}>
|
||||
<mask id="mask0_4933_393121" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="480" height="480">
|
||||
<rect width="480" height="480" fill="url(#paint0_radial_4933_393121)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_4933_393121)">
|
||||
<g clipPath="url(#clip0_4933_393121)">
|
||||
<g clipPath="url(#clip1_4933_393121)">
|
||||
<line x1="0.5" x2="0.5" y2="480" stroke="currentColor" />
|
||||
<line x1="32.5" x2="32.5" y2="480" stroke="currentColor" />
|
||||
<line x1="64.5" x2="64.5" y2="480" stroke="currentColor" />
|
||||
<line x1="96.5" x2="96.5" y2="480" stroke="currentColor" />
|
||||
<line x1="128.5" x2="128.5" y2="480" stroke="currentColor" />
|
||||
<line x1="160.5" x2="160.5" y2="480" stroke="currentColor" />
|
||||
<line x1="192.5" x2="192.5" y2="480" stroke="currentColor" />
|
||||
<line x1="224.5" x2="224.5" y2="480" stroke="currentColor" />
|
||||
<line x1="256.5" x2="256.5" y2="480" stroke="currentColor" />
|
||||
<line x1="288.5" x2="288.5" y2="480" stroke="currentColor" />
|
||||
<line x1="320.5" x2="320.5" y2="480" stroke="currentColor" />
|
||||
<line x1="352.5" x2="352.5" y2="480" stroke="currentColor" />
|
||||
<line x1="384.5" x2="384.5" y2="480" stroke="currentColor" />
|
||||
<line x1="416.5" x2="416.5" y2="480" stroke="currentColor" />
|
||||
<line x1="448.5" x2="448.5" y2="480" stroke="currentColor" />
|
||||
</g>
|
||||
<rect x="0.5" y="0.5" width="479" height="479" stroke="currentColor" />
|
||||
<g clipPath="url(#clip2_4933_393121)">
|
||||
<line y1="31.5" x2="480" y2="31.5" stroke="currentColor" />
|
||||
<line y1="63.5" x2="480" y2="63.5" stroke="currentColor" />
|
||||
<line y1="95.5" x2="480" y2="95.5" stroke="currentColor" />
|
||||
<line y1="127.5" x2="480" y2="127.5" stroke="currentColor" />
|
||||
<line y1="159.5" x2="480" y2="159.5" stroke="currentColor" />
|
||||
<line y1="191.5" x2="480" y2="191.5" stroke="currentColor" />
|
||||
<line y1="223.5" x2="480" y2="223.5" stroke="currentColor" />
|
||||
<line y1="255.5" x2="480" y2="255.5" stroke="currentColor" />
|
||||
<line y1="287.5" x2="480" y2="287.5" stroke="currentColor" />
|
||||
<line y1="319.5" x2="480" y2="319.5" stroke="currentColor" />
|
||||
<line y1="351.5" x2="480" y2="351.5" stroke="currentColor" />
|
||||
<line y1="383.5" x2="480" y2="383.5" stroke="currentColor" />
|
||||
<line y1="415.5" x2="480" y2="415.5" stroke="currentColor" />
|
||||
<line y1="447.5" x2="480" y2="447.5" stroke="currentColor" />
|
||||
<line y1="479.5" x2="480" y2="479.5" stroke="currentColor" />
|
||||
</g>
|
||||
<rect x="0.5" y="0.5" width="479" height="479" stroke="currentColor" />
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_4933_393121"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(240 240) rotate(90) scale(240 240)"
|
||||
>
|
||||
<stop />
|
||||
<stop offset="1" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_4933_393121">
|
||||
<rect width="480" height="480" fill="white" />
|
||||
</clipPath>
|
||||
<clipPath id="clip1_4933_393121">
|
||||
<rect width="480" height="480" fill="white" />
|
||||
</clipPath>
|
||||
<clipPath id="clip2_4933_393121">
|
||||
<rect width="480" height="480" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const sm = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="336" height="336" viewBox="0 0 336 336" {...props} fill="none" className={cx("text-border-secondary", props.className)}>
|
||||
<mask id="mask0_4947_375939" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="336" height="336">
|
||||
<rect width="336" height="336" fill="url(#paint0_radial_4947_375939)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_4947_375939)">
|
||||
<g clipPath="url(#clip0_4947_375939)">
|
||||
<g clipPath="url(#clip1_4947_375939)">
|
||||
<line x1="0.5" x2="0.5" y2="336" stroke="currentColor" />
|
||||
<line x1="24.5" x2="24.5" y2="336" stroke="currentColor" />
|
||||
<line x1="48.5" x2="48.5" y2="336" stroke="currentColor" />
|
||||
<line x1="72.5" x2="72.5" y2="336" stroke="currentColor" />
|
||||
<line x1="96.5" x2="96.5" y2="336" stroke="currentColor" />
|
||||
<line x1="120.5" x2="120.5" y2="336" stroke="currentColor" />
|
||||
<line x1="144.5" x2="144.5" y2="336" stroke="currentColor" />
|
||||
<line x1="168.5" x2="168.5" y2="336" stroke="currentColor" />
|
||||
<line x1="192.5" x2="192.5" y2="336" stroke="currentColor" />
|
||||
<line x1="216.5" x2="216.5" y2="336" stroke="currentColor" />
|
||||
<line x1="240.5" x2="240.5" y2="336" stroke="currentColor" />
|
||||
<line x1="264.5" x2="264.5" y2="336" stroke="currentColor" />
|
||||
<line x1="288.5" x2="288.5" y2="336" stroke="currentColor" />
|
||||
<line x1="312.5" x2="312.5" y2="336" stroke="currentColor" />
|
||||
</g>
|
||||
<rect x="0.5" y="0.5" width="335" height="335" stroke="currentColor" />
|
||||
<g clipPath="url(#clip2_4947_375939)">
|
||||
<line y1="23.5" x2="336" y2="23.5" stroke="currentColor" />
|
||||
<line y1="47.5" x2="336" y2="47.5" stroke="currentColor" />
|
||||
<line y1="71.5" x2="336" y2="71.5" stroke="currentColor" />
|
||||
<line y1="95.5" x2="336" y2="95.5" stroke="currentColor" />
|
||||
<line y1="119.5" x2="336" y2="119.5" stroke="currentColor" />
|
||||
<line y1="143.5" x2="336" y2="143.5" stroke="currentColor" />
|
||||
<line y1="167.5" x2="336" y2="167.5" stroke="currentColor" />
|
||||
<line y1="191.5" x2="336" y2="191.5" stroke="currentColor" />
|
||||
<line y1="215.5" x2="336" y2="215.5" stroke="currentColor" />
|
||||
<line y1="239.5" x2="336" y2="239.5" stroke="currentColor" />
|
||||
<line y1="263.5" x2="336" y2="263.5" stroke="currentColor" />
|
||||
<line y1="287.5" x2="336" y2="287.5" stroke="currentColor" />
|
||||
<line y1="311.5" x2="336" y2="311.5" stroke="currentColor" />
|
||||
<line y1="335.5" x2="336" y2="335.5" stroke="currentColor" />
|
||||
</g>
|
||||
<rect x="0.5" y="0.5" width="335" height="335" stroke="currentColor" />
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_4947_375939"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(168 168) rotate(90) scale(168 168)"
|
||||
>
|
||||
<stop />
|
||||
<stop offset="1" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_4947_375939">
|
||||
<rect width="336" height="336" fill="white" />
|
||||
</clipPath>
|
||||
<clipPath id="clip1_4947_375939">
|
||||
<rect width="336" height="336" fill="white" />
|
||||
</clipPath>
|
||||
<clipPath id="clip2_4947_375939">
|
||||
<rect width="336" height="336" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm,
|
||||
md,
|
||||
lg,
|
||||
};
|
||||
25
src/components/shared-assets/background-patterns/index.tsx
Normal file
25
src/components/shared-assets/background-patterns/index.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import type { SVGProps } from "react";
|
||||
import { cx } from "@/utils/cx";
|
||||
import { Circle } from "./circle";
|
||||
import { Grid } from "./grid";
|
||||
import { GridCheck } from "./grid-check";
|
||||
import { Square } from "./square";
|
||||
|
||||
const patterns = {
|
||||
circle: Circle,
|
||||
square: Square,
|
||||
grid: Grid,
|
||||
"grid-check": GridCheck,
|
||||
};
|
||||
|
||||
export interface BackgroundPatternProps extends Omit<SVGProps<SVGSVGElement>, "size"> {
|
||||
size?: "sm" | "md" | "lg";
|
||||
pattern: keyof typeof patterns;
|
||||
}
|
||||
|
||||
export const BackgroundPattern = (props: BackgroundPatternProps) => {
|
||||
const { pattern } = props;
|
||||
const Pattern = patterns[pattern];
|
||||
|
||||
return <Pattern {...props} size={props.size as "sm" | "md"} className={cx("pointer-events-none", props.className)} />;
|
||||
};
|
||||
180
src/components/shared-assets/background-patterns/square.tsx
Normal file
180
src/components/shared-assets/background-patterns/square.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import type { SVGProps } from "react";
|
||||
import { cx } from "@/utils/cx";
|
||||
|
||||
export const Square = (props: Omit<SVGProps<SVGSVGElement>, "size"> & { size?: "sm" | "md" | "lg" }) => {
|
||||
const { size = "lg", className } = props;
|
||||
const Pattern = sizes[size];
|
||||
|
||||
return <Pattern className={className} />;
|
||||
};
|
||||
|
||||
const lg = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="910" height="910" viewBox="0 0 910 910" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
|
||||
<mask id="mask0_16747_25726" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="-4" y="-4" width="918" height="918">
|
||||
<path
|
||||
d="M1.31903 182.741C-1.0717 171.957 5.73229 161.277 16.5162 158.886L727.26 1.31801C738.044 -1.07271 748.724 5.73127 751.114 16.5151L908.682 727.259C911.073 738.042 904.269 748.723 893.485 751.113L182.742 908.681C171.958 911.072 161.278 904.268 158.887 893.484L1.31903 182.741Z"
|
||||
fill="url(#paint0_radial_16747_25726)"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16747_25726)">
|
||||
<path
|
||||
d="M417.382 414.687L472.055 402.566C482.569 400.235 492.982 406.869 495.313 417.383L507.434 472.056C509.765 482.57 503.131 492.983 492.617 495.314L437.944 507.435C427.43 509.766 417.017 503.132 414.686 492.618L402.565 437.945C400.234 427.431 406.868 417.018 417.382 414.687Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M360.132 378.213L508.529 345.314C519.043 342.983 529.457 349.617 531.788 360.131L564.686 508.528C567.017 519.043 560.383 529.456 549.869 531.787L401.472 564.686C390.958 567.017 380.545 560.383 378.214 549.868L345.315 401.471C342.984 390.957 349.618 380.544 360.132 378.213Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M302.88 341.74L545.002 288.063C555.516 285.732 565.929 292.366 568.26 302.881L621.937 545.002C624.268 555.516 617.634 565.929 607.12 568.26L364.998 621.937C354.484 624.268 344.071 617.634 341.74 607.12L288.063 364.999C285.732 354.484 292.366 344.071 302.88 341.74Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M245.628 305.267L581.474 230.812C591.988 228.481 602.401 235.114 604.732 245.629L679.188 581.475C681.519 591.989 674.885 602.402 664.37 604.733L328.525 679.188C318.01 681.519 307.597 674.885 305.266 664.371L230.811 328.525C228.48 318.011 235.114 307.598 245.628 305.267Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M188.378 268.794L617.949 173.561C628.463 171.23 638.876 177.864 641.207 188.378L736.44 617.948C738.771 628.462 732.137 638.876 721.623 641.206L292.053 736.44C281.539 738.771 271.125 732.137 268.795 721.623L173.561 292.052C171.23 281.538 177.864 271.125 188.378 268.794Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M131.126 232.321L654.421 116.309C664.935 113.978 675.348 120.612 677.679 131.126L793.691 654.421C796.022 664.935 789.388 675.348 778.874 677.679L255.579 793.691C245.065 796.022 234.652 789.388 232.321 778.874L116.309 255.579C113.978 245.065 120.612 234.652 131.126 232.321Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M73.8744 195.848L690.893 59.058C701.408 56.727 711.821 63.3609 714.152 73.8752L850.942 690.894C853.273 701.409 846.639 711.822 836.124 714.153L219.105 850.942C208.591 853.273 198.178 846.64 195.847 836.125L59.0572 219.106C56.7262 208.592 63.3601 198.179 73.8744 195.848Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M16.6244 159.374L727.368 1.80616C737.882 -0.524797 748.295 6.10908 750.626 16.6234L908.194 727.367C910.525 737.881 903.891 748.294 893.377 750.625L182.634 908.193C172.119 910.524 161.706 903.89 159.375 893.376L1.80718 182.633C-0.52378 172.118 6.1101 161.705 16.6244 159.374Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_16747_25726"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(455.001 455) rotate(77.5) scale(384 384)"
|
||||
>
|
||||
<stop />
|
||||
<stop offset="1" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const md = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="480" height="480" viewBox="0 0 480 480" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
|
||||
<mask id="mask0_4933_421799" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="480" height="480">
|
||||
<path
|
||||
d="M0 12C0 5.37257 5.37258 0 12 0H468C474.627 0 480 5.37258 480 12V468C480 474.627 474.627 480 468 480H12C5.37257 480 0 474.627 0 468V12Z"
|
||||
fill="url(#paint0_radial_4933_421799)"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_4933_421799)">
|
||||
<path
|
||||
d="M185.833 215.135C184.459 208.934 188.371 202.793 194.572 201.418L264.865 185.835C271.066 184.46 277.207 188.372 278.582 194.573L294.165 264.866C295.54 271.067 291.628 277.208 285.427 278.583L215.134 294.166C208.933 295.541 202.792 291.629 201.417 285.428L185.833 215.135Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M147.667 190.819C146.293 184.619 150.205 178.477 156.406 177.103L289.182 147.667C295.383 146.292 301.524 150.205 302.899 156.405L332.334 289.182C333.709 295.382 329.797 301.523 323.596 302.898L190.82 332.334C184.619 333.709 178.478 329.796 177.103 323.596L147.667 190.819Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M109.499 166.504C108.125 160.303 112.037 154.162 118.238 152.787L313.497 109.499C319.698 108.125 325.839 112.037 327.213 118.238L370.501 313.497C371.876 319.698 367.964 325.839 361.763 327.213L166.504 370.501C160.303 371.876 154.162 367.964 152.787 361.763L109.499 166.504Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M71.3315 142.188C69.9569 135.988 73.8691 129.847 80.0699 128.472L337.812 71.3319C344.013 69.9572 350.154 73.8695 351.528 80.0702L408.669 337.812C410.043 344.013 406.131 350.154 399.93 351.529L142.188 408.669C135.987 410.044 129.846 406.131 128.472 399.931L71.3315 142.188Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M33.1636 117.873C31.7889 111.672 35.7012 105.531 41.9019 104.156L362.127 33.1643C368.328 31.7896 374.469 35.7019 375.843 41.9027L446.836 362.128C448.21 368.328 444.298 374.47 438.097 375.844L117.872 446.836C111.671 448.211 105.53 444.299 104.156 438.098L33.1636 117.873Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M-5.00442 93.5575C-6.37909 87.3568 -2.4668 81.2157 3.73393 79.8411L386.442 -5.00326C392.643 -6.37793 398.784 -2.46564 400.158 3.73509L485.003 386.443C486.377 392.644 482.465 398.785 476.264 400.16L93.5564 485.004C87.3556 486.379 81.2146 482.466 79.8399 476.266L-5.00442 93.5575Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M-43.1704 69.2421C-44.5451 63.0414 -40.6328 56.9003 -34.4321 55.5256L410.759 -43.1708C416.96 -44.5455 423.101 -40.6332 424.475 -34.4325L523.172 410.758C524.546 416.959 520.634 423.1 514.433 424.475L69.2425 523.171C63.0418 524.546 56.9007 520.634 55.526 514.433L-43.1704 69.2421Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_4933_421799"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(240 240) rotate(90) scale(240 240)"
|
||||
>
|
||||
<stop />
|
||||
<stop offset="1" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const sm = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="336" height="336" viewBox="0 0 336 336" fill="none" {...props} className={cx("text-border-secondary", props.className)}>
|
||||
<mask id="mask0_4947_375930" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="336" height="336">
|
||||
<rect width="336" height="336" fill="url(#paint0_radial_4947_375930)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_4947_375930)">
|
||||
<path
|
||||
d="M113.833 143.135C112.459 136.934 116.371 130.793 122.572 129.418L192.865 113.835C199.066 112.46 205.207 116.372 206.582 122.573L222.165 192.866C223.54 199.067 219.628 205.208 213.427 206.583L143.134 222.166C136.933 223.541 130.792 219.629 129.417 213.428L113.833 143.135Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M85.2085 124.898C83.8338 118.697 87.7461 112.556 93.9468 111.181L211.102 85.2084C217.303 83.8337 223.444 87.746 224.819 93.9467L250.792 211.102C252.166 217.303 248.254 223.444 242.053 224.819L124.898 250.791C118.697 252.166 112.556 248.254 111.181 242.053L85.2085 124.898Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M56.5835 106.661C55.2088 100.46 59.1211 94.3188 65.3218 92.9441L229.34 56.5822C235.54 55.2076 241.681 59.1199 243.056 65.3206L279.418 229.338C280.793 235.539 276.88 241.68 270.68 243.055L106.662 279.417C100.461 280.791 94.32 276.879 92.9453 270.678L56.5835 106.661Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M27.9594 88.4235C26.5848 82.2228 30.4971 76.0817 36.6978 74.707L247.578 27.9561C253.778 26.5814 259.92 30.4937 261.294 36.6944L308.045 247.574C309.42 253.775 305.508 259.916 299.307 261.291L88.4269 308.042C82.2261 309.416 76.0851 305.504 74.7104 299.303L27.9594 88.4235Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M-0.665552 70.1864C-2.04022 63.9857 1.87207 57.8446 8.0728 56.47L265.815 -0.670085C272.016 -2.04475 278.157 1.86754 279.531 8.06826L336.671 265.81C338.046 272.011 334.134 278.152 327.933 279.527L70.191 336.667C63.9902 338.042 57.8492 334.129 56.4745 327.929L-0.665552 70.1864Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M-29.2906 51.9496C-30.6652 45.7489 -26.7529 39.6078 -20.5522 38.2332L284.052 -29.296C290.253 -30.6707 296.394 -26.7584 297.769 -20.5577L365.298 284.047C366.672 290.247 362.76 296.388 356.559 297.763L51.9551 365.292C45.7543 366.667 39.6133 362.755 38.2386 356.554L-29.2906 51.9496Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_4947_375930"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(168 168) rotate(90) scale(168 168)"
|
||||
>
|
||||
<stop />
|
||||
<stop offset="1" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm,
|
||||
md,
|
||||
lg,
|
||||
};
|
||||
257
src/components/shared-assets/illustrations/box.tsx
Normal file
257
src/components/shared-assets/illustrations/box.tsx
Normal 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
281
src/components/shared-assets/illustrations/cloud.tsx
Normal 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
303
src/components/shared-assets/illustrations/credit-card.tsx
Normal 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
538
src/components/shared-assets/illustrations/documents.tsx
Normal 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
26
src/components/shared-assets/illustrations/index.tsx
Normal 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} />;
|
||||
};
|
||||
83
src/components/shared-assets/qr-code.tsx
Normal file
83
src/components/shared-assets/qr-code.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import type { HTMLAttributes } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import QRCodeStyling, { type Options as QRCodeStylingOptions } from "qr-code-styling";
|
||||
import { cx } from "@/utils/cx";
|
||||
|
||||
const QRCodeFrameHandle = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
|
||||
<div {...props} className={cx("size-3 rounded-tl border-t-2 border-l-2 border-brand_alt", className)} />
|
||||
);
|
||||
|
||||
export const GradientScan = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
{...props}
|
||||
className={cx("absolute bottom-0 h-1/2 w-full border-t border-brand bg-brand-solid/10", className)}
|
||||
style={{
|
||||
maskImage: "radial-gradient(52.19% 100% at 50% 0%, #000 0%, rgba(0,0,0,0) 95.31%)",
|
||||
WebkitMaskImage: "radial-gradient(52.19% 100% at 50% 0%, #000 0%, rgba(0,0,0,0) 95.31%)",
|
||||
...props.style,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const styles = {
|
||||
md: { root: "p-2", qr: { width: 96, height: 96 } },
|
||||
lg: { root: "p-3", qr: { width: 128, height: 128 } },
|
||||
};
|
||||
|
||||
interface QRCodeProps {
|
||||
/**
|
||||
* The value to encode in the QR code.
|
||||
*/
|
||||
value: string;
|
||||
/**
|
||||
* Additional options to customize the QR code.
|
||||
*/
|
||||
options?: QRCodeStylingOptions;
|
||||
/**
|
||||
* The size of the QR code.
|
||||
*
|
||||
* @default "md"
|
||||
*/
|
||||
size?: "md" | "lg";
|
||||
/**
|
||||
* The class name to apply to the QR code.
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const QRCode = ({ size = "md", value, options, className }: QRCodeProps) => {
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
const [qrCode, setQrCode] = useState<QRCodeStyling | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
|
||||
const qrCode = new QRCodeStyling({
|
||||
width: styles[size].qr.width,
|
||||
height: styles[size].qr.height,
|
||||
data: value,
|
||||
type: "svg",
|
||||
...options,
|
||||
});
|
||||
|
||||
setQrCode(qrCode);
|
||||
qrCode.append(ref.current);
|
||||
}, [options, size, value]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!qrCode) return;
|
||||
|
||||
qrCode.update(options);
|
||||
}, [qrCode, value, options]);
|
||||
|
||||
return (
|
||||
<div className={cx("relative flex items-center justify-center", styles[size].root, className)}>
|
||||
<div ref={ref} />
|
||||
|
||||
<QRCodeFrameHandle className="absolute top-0 left-0" />
|
||||
<QRCodeFrameHandle className="absolute top-0 right-0 rotate-90" />
|
||||
<QRCodeFrameHandle className="absolute right-0 bottom-0 rotate-180" />
|
||||
<QRCodeFrameHandle className="absolute bottom-0 left-0 -rotate-90" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
10
src/components/shared-assets/section-divider.tsx
Normal file
10
src/components/shared-assets/section-divider.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import type { HTMLAttributes } from "react";
|
||||
import { cx } from "@/utils/cx";
|
||||
|
||||
export const SectionDivider = (props: HTMLAttributes<HTMLDivElement>) => {
|
||||
return (
|
||||
<div {...props} className={cx("mx-auto max-w-container px-4 md:px-8", props.className)}>
|
||||
<hr className="h-px w-full border-none bg-border-secondary" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user