continue re-design
This commit is contained in:
Developers Digest
@@ -0,0 +1,21 @@
|
||||
const GitHub = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12 0C5.37 0 0 5.50583 0 12.3035C0 17.7478 3.435 22.3463 8.205 23.9765C8.805 24.0842 9.03 23.715 9.03 23.3921C9.03 23.0999 9.015 22.131 9.015 21.1005C6 21.6696 5.22 20.347 4.98 19.6549C4.845 19.3012 4.26 18.2092 3.75 17.917C3.33 17.6863 2.73 17.1173 3.735 17.1019C4.68 17.0865 5.355 17.9939 5.58 18.363C6.66 20.2239 8.385 19.701 9.075 19.3781C9.18 18.5783 9.495 18.04 9.84 17.7325C7.17 17.4249 4.38 16.3637 4.38 11.6576C4.38 10.3196 4.845 9.21227 5.61 8.35102C5.49 8.04343 5.07 6.78232 5.73 5.09058C5.73 5.09058 6.735 4.76762 9.03 6.3517C9.99 6.07487 11.01 5.93645 12.03 5.93645C13.05 5.93645 14.07 6.07487 15.03 6.3517C17.325 4.75224 18.33 5.09058 18.33 5.09058C18.99 6.78232 18.57 8.04343 18.45 8.35102C19.215 9.21227 19.68 10.3042 19.68 11.6576C19.68 16.3791 16.875 17.4249 14.205 17.7325C14.64 18.1169 15.015 18.8552 15.015 20.0086C15.015 21.6542 15 22.9768 15 23.3921C15 23.715 15.225 24.0995 15.825 23.9765C18.2072 23.1519 20.2773 21.5822 21.7438 19.4882C23.2103 17.3942 23.9994 14.8814 24 12.3035C24 5.50583 18.63 0 12 0Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default GitHub;
|
||||
@@ -0,0 +1,22 @@
|
||||
const Logo = ({ ...props }) => (
|
||||
// <svg
|
||||
// width="32"
|
||||
// height="32"
|
||||
// viewBox="0 0 32 32"
|
||||
// fill="none"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// {...props}
|
||||
// >
|
||||
// <rect width="100%" height="100%" rx="16" fill="white" />
|
||||
// <path
|
||||
// fillRule="evenodd"
|
||||
// clipRule="evenodd"
|
||||
// d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
|
||||
// fill="black"
|
||||
// />
|
||||
// </svg>
|
||||
<span className="text-2xl" {...props}>
|
||||
🔥
|
||||
</span>
|
||||
);
|
||||
export default Logo;
|
||||
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ChevronDown, ChevronUp } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { cn } from "@/utils/cn";
|
||||
|
||||
interface AnimatedChevronProps {
|
||||
isOpen: boolean;
|
||||
className?: string;
|
||||
size?: "sm" | "md" | "lg";
|
||||
}
|
||||
|
||||
export function AnimatedChevron({
|
||||
isOpen,
|
||||
className,
|
||||
size = "md",
|
||||
}: AnimatedChevronProps) {
|
||||
const sizeClasses = {
|
||||
sm: "h-12 w-12",
|
||||
md: "h-16 w-16",
|
||||
lg: "h-20 w-20",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("flex items-center justify-center", sizeClasses[size])}>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{isOpen ? (
|
||||
<motion.div
|
||||
key="chevron-up"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<ChevronUp
|
||||
className={cn(
|
||||
sizeClasses[size],
|
||||
"text-black-alpha-40",
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="chevron-down"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
sizeClasses[size],
|
||||
"text-black-alpha-40",
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,962 @@
|
||||
"use client";
|
||||
|
||||
import type { Transition, Variants } from "framer-motion";
|
||||
import { motion, useAnimation } from "framer-motion";
|
||||
import { useCallback, useEffect } from "react";
|
||||
|
||||
const playIconVariants: Variants = {
|
||||
normal: {
|
||||
x: 0,
|
||||
rotate: 0,
|
||||
},
|
||||
animate: {
|
||||
x: [0, -1, 2, 0],
|
||||
rotate: [0, -10, 0, 0],
|
||||
transition: {
|
||||
duration: 0.5,
|
||||
times: [0, 0.2, 0.5, 1],
|
||||
stiffness: 260,
|
||||
damping: 20,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const defaultTransition: Transition = {
|
||||
duration: 0.6,
|
||||
opacity: { duration: 0.2 },
|
||||
};
|
||||
|
||||
const pathVariants: Variants = {
|
||||
normal: {
|
||||
pathLength: 1,
|
||||
opacity: 1,
|
||||
},
|
||||
animate: {
|
||||
opacity: [0, 1],
|
||||
pathLength: [0.5, 1],
|
||||
},
|
||||
};
|
||||
|
||||
// Higher-order component for icon animation
|
||||
const withIconAnimation = (IconComponent: React.ComponentType<any>) => {
|
||||
return ({
|
||||
isHovered = false,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
isHovered?: boolean;
|
||||
className?: string;
|
||||
}) => {
|
||||
const controls = useAnimation();
|
||||
|
||||
useEffect(() => {
|
||||
if (isHovered) {
|
||||
controls.start("animate");
|
||||
} else {
|
||||
controls.start("normal");
|
||||
}
|
||||
}, [isHovered, controls]);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<IconComponent controls={controls} {...props} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
// Higher-order component for icon animation
|
||||
const withChartIconAnimation = (IconComponent: React.ComponentType<any>) => {
|
||||
return ({
|
||||
isHovered = false,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
isHovered?: boolean;
|
||||
className?: string;
|
||||
}) => {
|
||||
const controls = useAnimation();
|
||||
|
||||
const handleHoverStart = async () => {
|
||||
await controls.start((i) => ({
|
||||
pathLength: 0,
|
||||
opacity: 0,
|
||||
transition: { delay: i * 0.1, duration: 0.3 },
|
||||
}));
|
||||
await controls.start((i) => ({
|
||||
pathLength: 1,
|
||||
opacity: 1,
|
||||
transition: { delay: i * 0.1, duration: 0.3 },
|
||||
}));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isHovered) {
|
||||
handleHoverStart();
|
||||
} else {
|
||||
handleHoverEnd();
|
||||
}
|
||||
}, [isHovered, handleHoverStart]);
|
||||
|
||||
const handleHoverEnd = () => {
|
||||
controls.start("normal");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<IconComponent
|
||||
onMouseEnter={handleHoverStart}
|
||||
onMouseLeave={handleHoverEnd}
|
||||
controls={controls}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
// Base icon components
|
||||
const HomeIconBase = ({ controls }: { controls: any }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<motion.path
|
||||
d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
|
||||
variants={pathVariants}
|
||||
transition={defaultTransition}
|
||||
animate={controls}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// Example of another icon with animation
|
||||
const PlayIconBase = ({ controls }: { controls: any }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<motion.path
|
||||
d="M5 3l14 9-14 9V3z"
|
||||
variants={playIconVariants}
|
||||
transition={defaultTransition}
|
||||
animate={controls}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SettingsGearIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
transition={{ type: "spring", stiffness: 50, damping: 10 }}
|
||||
variants={{
|
||||
normal: {
|
||||
rotate: 0,
|
||||
},
|
||||
animate: {
|
||||
rotate: 90,
|
||||
},
|
||||
}}
|
||||
animate={controls}
|
||||
>
|
||||
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</motion.svg>
|
||||
);
|
||||
};
|
||||
|
||||
const lineChartVariants2: Variants = {
|
||||
visible: { pathLength: 1, opacity: 1 },
|
||||
hidden: { pathLength: 0, opacity: 0 },
|
||||
};
|
||||
const ChartColumnIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<motion.path
|
||||
d="M13 17V9"
|
||||
variants={lineChartVariants2}
|
||||
transition={defaultTransition}
|
||||
animate={controls}
|
||||
initial="visible"
|
||||
custom={1}
|
||||
/>
|
||||
<motion.path
|
||||
d="M18 17V5"
|
||||
variants={lineChartVariants2}
|
||||
transition={defaultTransition}
|
||||
animate={controls}
|
||||
initial="visible"
|
||||
custom={2}
|
||||
/>
|
||||
<path d="M3 3v16a2 2 0 0 0 2 2h16" />
|
||||
<motion.path
|
||||
d="M8 17v-3"
|
||||
variants={lineChartVariants2}
|
||||
transition={defaultTransition}
|
||||
animate={controls}
|
||||
initial="visible"
|
||||
custom={0}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// const defaultTransition: Transition = {
|
||||
// duration: 0.9,
|
||||
// ease: 'easeInOut',
|
||||
// };
|
||||
|
||||
// const pathVariants: Variants = {
|
||||
// normal: {
|
||||
// rotate: 0,
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// },
|
||||
// hover: {
|
||||
// rotate: [0, 4, 2, -3, 1, 0],
|
||||
// x: [0, 0.7, -0.3, 0.5, 0.2, 0],
|
||||
// y: [0, -0.2, 0.3, -0.2, 0.4, 0],
|
||||
// },
|
||||
// };
|
||||
|
||||
const transition = (custom: number): Transition => ({
|
||||
duration: 0.25,
|
||||
delay: custom * 0.1,
|
||||
});
|
||||
|
||||
const variants: Variants = {
|
||||
default: {
|
||||
pathLength: 1,
|
||||
opacity: 1,
|
||||
},
|
||||
normal: (custom: number) => ({
|
||||
pathLength: 1,
|
||||
opacity: 1,
|
||||
transition: transition(custom),
|
||||
}),
|
||||
animate: (custom: number) => ({
|
||||
pathLength: 0.5,
|
||||
opacity: 1,
|
||||
transition: transition(custom),
|
||||
}),
|
||||
};
|
||||
|
||||
const ActivityLogsIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<motion.rect
|
||||
variants={variants}
|
||||
initial="normal"
|
||||
animate={controls}
|
||||
custom={0}
|
||||
x="3"
|
||||
y="3"
|
||||
width="3"
|
||||
height="3"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
/>
|
||||
<motion.path
|
||||
variants={variants}
|
||||
initial="normal"
|
||||
animate={controls}
|
||||
custom={0}
|
||||
d="M8 4.5 L21 4.5"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
|
||||
<motion.rect
|
||||
variants={variants}
|
||||
initial="normal"
|
||||
animate={controls}
|
||||
custom={1}
|
||||
x="3"
|
||||
y="10"
|
||||
width="3"
|
||||
height="3"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
/>
|
||||
<motion.path
|
||||
variants={variants}
|
||||
initial="normal"
|
||||
animate={controls}
|
||||
custom={1}
|
||||
d="M8 11.5 L21 11.5"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
|
||||
<motion.rect
|
||||
variants={variants}
|
||||
initial="normal"
|
||||
animate={controls}
|
||||
custom={2}
|
||||
x="3"
|
||||
y="17"
|
||||
width="3"
|
||||
height="3"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
/>
|
||||
<motion.path
|
||||
variants={variants}
|
||||
initial="normal"
|
||||
animate={controls}
|
||||
custom={2}
|
||||
d="M8 18.5 L21 18.5"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const defaultTransition2: Transition = {
|
||||
type: "spring",
|
||||
stiffness: 200,
|
||||
damping: 10,
|
||||
};
|
||||
|
||||
const pathVariants2: Variants = {
|
||||
normal: {
|
||||
rotate: 0,
|
||||
},
|
||||
animate: {
|
||||
rotate: -20,
|
||||
},
|
||||
};
|
||||
|
||||
const KeyOneBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<motion.svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
animate={controls}
|
||||
initial="normal"
|
||||
variants={pathVariants2}
|
||||
transition={defaultTransition2}
|
||||
>
|
||||
<path d="M10.7577 11.8281L18.6066 3.97919L20.0208 5.3934L18.6066 6.80761L21.0815 9.28249L19.6673 10.6967L17.1924 8.22183L15.7782 9.63604L17.8995 11.7574L16.4853 13.1716L14.364 11.0503L12.1719 13.2423C13.4581 15.1837 13.246 17.8251 11.5355 19.5355C9.58291 21.4882 6.41709 21.4882 4.46447 19.5355C2.51184 17.5829 2.51184 14.4171 4.46447 12.4645C6.17493 10.754 8.81633 10.5419 10.7577 11.8281ZM10.1213 18.1213C11.2929 16.9497 11.2929 15.0503 10.1213 13.8787C8.94975 12.7071 7.05025 12.7071 5.87868 13.8787C4.70711 15.0503 4.70711 16.9497 5.87868 18.1213C7.05025 19.2929 8.94975 19.2929 10.1213 18.1213Z" />
|
||||
</motion.svg>
|
||||
);
|
||||
};
|
||||
|
||||
const frameVariants: Variants = {
|
||||
normal: { opacity: 1 },
|
||||
animate: { opacity: 1 },
|
||||
};
|
||||
|
||||
const lineVariants: Variants = {
|
||||
normal: { pathLength: 1, opacity: 1 },
|
||||
animate: { pathLength: 0, opacity: 0 },
|
||||
};
|
||||
|
||||
const ScanTextIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<motion.path
|
||||
d="M3 7V5a2 2 0 0 1 2-2h2"
|
||||
variants={frameVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.path
|
||||
d="M17 3h2a2 2 0 0 1 2 2v2"
|
||||
variants={frameVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.path
|
||||
d="M21 17v2a2 2 0 0 1-2 2h-2"
|
||||
variants={frameVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.path
|
||||
d="M7 21H5a2 2 0 0 1-2-2v-2"
|
||||
variants={frameVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.path
|
||||
d="M7 8h8"
|
||||
variants={lineVariants}
|
||||
initial="animate"
|
||||
animate={controls}
|
||||
custom={0}
|
||||
/>
|
||||
<motion.path
|
||||
d="M7 12h10"
|
||||
variants={lineVariants}
|
||||
initial="animate"
|
||||
animate={controls}
|
||||
custom={1}
|
||||
/>
|
||||
<motion.path
|
||||
d="M7 16h6"
|
||||
variants={lineVariants}
|
||||
initial="animate"
|
||||
animate={controls}
|
||||
custom={2}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// Create animated versions of icons
|
||||
const HomeIcon = withIconAnimation(HomeIconBase);
|
||||
const PlayIcon = withIconAnimation(PlayIconBase);
|
||||
const SettingsGearIcon = withIconAnimation(SettingsGearIconBase);
|
||||
const ChartColumnIcon = withChartIconAnimation(ChartColumnIconBase);
|
||||
const ActivityLogsIcon = withIconAnimation(ActivityLogsIconBase);
|
||||
const ScanTextIcon = withIconAnimation(ScanTextIconBase);
|
||||
const KeyIcon = withIconAnimation(KeyOneBase);
|
||||
|
||||
// Logout icon with animation
|
||||
const LogOutIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||||
<motion.polyline
|
||||
points="16 17 21 12 16 7"
|
||||
variants={{
|
||||
normal: { x: 0 },
|
||||
animate: { x: [0, 3, 0] },
|
||||
}}
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.line
|
||||
x1="21"
|
||||
y1="12"
|
||||
x2="9"
|
||||
y2="12"
|
||||
variants={{
|
||||
normal: { x1: 21, x2: 9 },
|
||||
animate: { x1: [21, 24, 21], x2: [9, 12, 9] },
|
||||
}}
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
</motion.svg>
|
||||
);
|
||||
};
|
||||
|
||||
// External link icon with animation
|
||||
const ExternalLinkIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
<motion.polyline
|
||||
points="15 3 21 3 21 9"
|
||||
variants={{
|
||||
normal: { rotate: 0, scale: 1 },
|
||||
animate: { rotate: [0, -10, 0], scale: [1, 1.1, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.line
|
||||
x1="10"
|
||||
y1="14"
|
||||
x2="21"
|
||||
y2="3"
|
||||
variants={pathVariants}
|
||||
transition={defaultTransition}
|
||||
animate={controls}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// File text icon with animation
|
||||
const FileTextIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||
<motion.polyline
|
||||
points="14 2 14 8 20 8"
|
||||
variants={{
|
||||
normal: { pathLength: 1, opacity: 1 },
|
||||
animate: { pathLength: [1, 0, 1], opacity: [1, 0.5, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.line
|
||||
x1="16"
|
||||
y1="13"
|
||||
x2="8"
|
||||
y2="13"
|
||||
variants={lineVariants}
|
||||
initial="animate"
|
||||
animate={controls}
|
||||
custom={0}
|
||||
/>
|
||||
<motion.line
|
||||
x1="16"
|
||||
y1="17"
|
||||
x2="8"
|
||||
y2="17"
|
||||
variants={lineVariants}
|
||||
initial="animate"
|
||||
animate={controls}
|
||||
custom={1}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// Book open icon with animation
|
||||
const BookOpenIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<motion.path
|
||||
d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"
|
||||
variants={{
|
||||
normal: { rotate: 0 },
|
||||
animate: { rotate: [-2, 2, -2] },
|
||||
}}
|
||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.path
|
||||
d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
|
||||
variants={{
|
||||
normal: { rotate: 0 },
|
||||
animate: { rotate: [2, -2, 2] },
|
||||
}}
|
||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// Message square icon with animation
|
||||
const MessageSquareIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
<motion.circle
|
||||
cx="8"
|
||||
cy="10"
|
||||
r="1"
|
||||
fill="currentColor"
|
||||
variants={{
|
||||
normal: { scale: 1, opacity: 1 },
|
||||
animate: { scale: [1, 1.5, 1], opacity: [1, 0.5, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.4, delay: 0 }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.circle
|
||||
cx="12"
|
||||
cy="10"
|
||||
r="1"
|
||||
fill="currentColor"
|
||||
variants={{
|
||||
normal: { scale: 1, opacity: 1 },
|
||||
animate: { scale: [1, 1.5, 1], opacity: [1, 0.5, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.circle
|
||||
cx="16"
|
||||
cy="10"
|
||||
r="1"
|
||||
fill="currentColor"
|
||||
variants={{
|
||||
normal: { scale: 1, opacity: 1 },
|
||||
animate: { scale: [1, 1.5, 1], opacity: [1, 0.5, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.4, delay: 0.2 }}
|
||||
animate={controls}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const LogOutIcon = withIconAnimation(LogOutIconBase);
|
||||
const ExternalLinkIcon = withIconAnimation(ExternalLinkIconBase);
|
||||
const FileTextIcon = withIconAnimation(FileTextIconBase);
|
||||
const BookOpenIcon = withIconAnimation(BookOpenIconBase);
|
||||
const MessageSquareIcon = withIconAnimation(MessageSquareIconBase);
|
||||
|
||||
// Bell icon with animation
|
||||
const BellIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<motion.path
|
||||
d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"
|
||||
variants={{
|
||||
normal: { rotate: 0 },
|
||||
animate: { rotate: [-10, 10, -10, 10, 0] },
|
||||
}}
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
style={{ transformOrigin: "50% 20%" }}
|
||||
/>
|
||||
<motion.path
|
||||
d="M10.3 21a1.94 1.94 0 0 0 3.4 0"
|
||||
variants={{
|
||||
normal: { scale: 1 },
|
||||
animate: { scale: [1, 1.1, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
</motion.svg>
|
||||
);
|
||||
};
|
||||
|
||||
// Gift icon with animation
|
||||
const GiftIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
{/* Gift box bottom */}
|
||||
<polyline points="20 12 20 22 4 22 4 12" />
|
||||
<line x1="12" y1="22" x2="12" y2="12" />
|
||||
|
||||
{/* Gift lid with opening animation */}
|
||||
<motion.g
|
||||
variants={{
|
||||
normal: { y: 0, rotate: 0 },
|
||||
animate: { y: -3, rotate: -8 },
|
||||
}}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
animate={controls}
|
||||
style={{ transformOrigin: "2px 9px" }}
|
||||
>
|
||||
<rect x="2" y="7" width="20" height="5" />
|
||||
<line x1="12" y1="7" x2="12" y2="12" />
|
||||
|
||||
{/* Left bow */}
|
||||
<motion.path
|
||||
d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"
|
||||
variants={{
|
||||
normal: { scale: 1 },
|
||||
animate: { scale: [1, 1.1, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
/>
|
||||
|
||||
{/* Right bow */}
|
||||
<motion.path
|
||||
d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"
|
||||
variants={{
|
||||
normal: { scale: 1 },
|
||||
animate: { scale: [1, 1.1, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
/>
|
||||
</motion.g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// HelpCircle icon with animation
|
||||
const HelpCircleIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<motion.circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
variants={{
|
||||
normal: { rotate: 0 },
|
||||
animate: { rotate: 360 },
|
||||
}}
|
||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.path
|
||||
d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
|
||||
variants={{
|
||||
normal: { opacity: 1 },
|
||||
animate: { opacity: [1, 0.5, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.line
|
||||
x1="12"
|
||||
y1="17"
|
||||
x2="12.01"
|
||||
y2="17"
|
||||
variants={{
|
||||
normal: { scale: 1 },
|
||||
animate: { scale: [1, 1.5, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.4, ease: "easeInOut", delay: 0.2 }}
|
||||
animate={controls}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const BellIcon = withIconAnimation(BellIconBase);
|
||||
const GiftIcon = withIconAnimation(GiftIconBase);
|
||||
const HelpCircleIcon = withIconAnimation(HelpCircleIconBase);
|
||||
|
||||
// SquareArrowUp icon with animation (for Upgrade button)
|
||||
const SquareArrowUpIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect width="18" height="18" x="3" y="3" rx="2" />
|
||||
<motion.path
|
||||
d="m8 12 4-4 4 4"
|
||||
variants={{
|
||||
normal: { y: 0 },
|
||||
animate: { y: [-2, 0] },
|
||||
}}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.path
|
||||
d="M12 16V8"
|
||||
variants={{
|
||||
normal: { scaleY: 1 },
|
||||
animate: { scaleY: [0.8, 1] },
|
||||
}}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
animate={controls}
|
||||
style={{ transformOrigin: "50% 100%" }}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const SquareArrowUpIcon = withIconAnimation(SquareArrowUpIconBase);
|
||||
|
||||
// Code icon with animation
|
||||
const CodeIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<motion.polyline
|
||||
points="16 18 22 12 16 6"
|
||||
variants={{
|
||||
normal: { x: 0 },
|
||||
animate: { x: [0, 2, 0] },
|
||||
}}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
<motion.polyline
|
||||
points="8 6 2 12 8 18"
|
||||
variants={{
|
||||
normal: { x: 0 },
|
||||
animate: { x: [0, -2, 0] },
|
||||
}}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
animate={controls}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const CodeIcon = withIconAnimation(CodeIconBase);
|
||||
|
||||
// TestTube icon for Extract Playground (Lucide TestTube2 icon without bubble)
|
||||
const BeakerIconBase = ({ controls }: { controls: any }) => {
|
||||
return (
|
||||
<motion.svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
variants={{
|
||||
normal: { rotate: 0 },
|
||||
animate: { rotate: [-8, 8, -8] },
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
times: [0, 0.5, 1],
|
||||
}}
|
||||
animate={controls}
|
||||
>
|
||||
<path d="M21 7 6.82 21.18a2.83 2.83 0 0 1-3.99-.01v0a2.83 2.83 0 0 1 0-4L17 3" />
|
||||
<path d="m16 2 6 6" />
|
||||
</motion.svg>
|
||||
);
|
||||
};
|
||||
|
||||
const BeakerIcon = withIconAnimation(BeakerIconBase);
|
||||
|
||||
export {
|
||||
HomeIcon,
|
||||
PlayIcon,
|
||||
SettingsGearIcon,
|
||||
ChartColumnIcon,
|
||||
ActivityLogsIcon,
|
||||
KeyIcon,
|
||||
ScanTextIcon,
|
||||
LogOutIcon,
|
||||
ExternalLinkIcon,
|
||||
FileTextIcon,
|
||||
BookOpenIcon,
|
||||
MessageSquareIcon,
|
||||
BellIcon,
|
||||
GiftIcon,
|
||||
HelpCircleIcon,
|
||||
SquareArrowUpIcon,
|
||||
CodeIcon,
|
||||
BeakerIcon,
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
import { cx } from "class-variance-authority";
|
||||
|
||||
export function ArrowAnimated({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<SVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
className={cx("-mr-1 ml-1.5 stroke-[1.5px]", className)}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 10 10"
|
||||
aria-hidden="true"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
className="opacity-0 transition group-hover:opacity-100"
|
||||
d="M0 5h7"
|
||||
/>
|
||||
<path
|
||||
className="transition group-hover:translate-x-[3px]"
|
||||
d="M1 1l4 4-4 4"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
export default function Check() {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM12.8305 8.59995C13.0928 8.27937 13.0455 7.80685 12.7249 7.54455C12.4043 7.28226 11.9318 7.32951 11.6695 7.65009L8.81932 11.1337L7.90533 10.2197C7.61244 9.9268 7.13756 9.9268 6.84467 10.2197C6.55178 10.5126 6.55178 10.9875 6.84467 11.2804L8.34467 12.7804C8.4945 12.9302 8.70073 13.0096 8.91236 12.9991C9.12399 12.9885 9.32129 12.8889 9.45547 12.725L12.8305 8.59995Z"
|
||||
fill="#FA5D19"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { cn } from "@/utils/cn";
|
||||
|
||||
type Direction = "left" | "right";
|
||||
|
||||
interface ChevronSlideProps extends React.SVGAttributes<SVGElement> {
|
||||
direction?: Direction;
|
||||
size?: number; // pixel size for width/height
|
||||
}
|
||||
|
||||
export function ChevronSlide({
|
||||
direction = "right",
|
||||
size = 16,
|
||||
className,
|
||||
...props
|
||||
}: ChevronSlideProps) {
|
||||
const translateClass =
|
||||
direction === "right"
|
||||
? "group-hover:translate-x-8"
|
||||
: "group-hover:-translate-x-8";
|
||||
const orientationClass = direction === "right" ? "" : "rotate-180";
|
||||
|
||||
return (
|
||||
<svg
|
||||
className={cn(
|
||||
"transition-all",
|
||||
translateClass,
|
||||
orientationClass,
|
||||
className,
|
||||
)}
|
||||
fill="none"
|
||||
height={size}
|
||||
width={size}
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M8.5 13L11.5 10L8.5 7"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.25"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChevronSlide;
|
||||
@@ -0,0 +1,19 @@
|
||||
export default function CopiedIcon() {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.1875 10.974L8.075 13.8959L14.8125 6.10425"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.25"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
export default function CopyIcon() {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.83333 7.83325V4.66659C7.83333 4.20635 8.20643 3.83325 8.66667 3.83325H15.3333C15.7936 3.83325 16.1667 4.20635 16.1667 4.66659V11.3333C16.1667 11.7935 15.7936 12.1666 15.3333 12.1666H12.1667M11.3333 7.83325H4.66667C4.20643 7.83325 3.83333 8.20635 3.83333 8.66659V15.3333C3.83333 15.7935 4.20643 16.1666 4.66667 16.1666H11.3333C11.7936 16.1666 12.1667 15.7935 12.1667 15.3333V8.66659C12.1667 8.20635 11.7936 7.83325 11.3333 7.83325Z"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.25"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
interface CurveProps extends React.SVGAttributes<SVGSVGElement> {
|
||||
fill?: string;
|
||||
}
|
||||
|
||||
export default function Curve({
|
||||
fill = "var(--border-faint)",
|
||||
...props
|
||||
}: CurveProps) {
|
||||
return (
|
||||
<svg
|
||||
fill="none"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
width="11"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M11 1L11 11L10 11L10 7C10 3.68629 7.31371 1 4 1L-4.37114e-08 1L0 -4.80825e-07L11 4.37114e-07L11 1Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
"use client";
|
||||
|
||||
import type { Variants } from "motion/react";
|
||||
import { motion, useAnimation } from "motion/react";
|
||||
import type { HTMLAttributes } from "react";
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { cn } from "@/utils/cn";
|
||||
|
||||
export interface FingerprintIconHandle {
|
||||
startAnimation: () => void;
|
||||
stopAnimation: () => void;
|
||||
}
|
||||
|
||||
interface FingerprintIconProps extends HTMLAttributes<HTMLDivElement> {
|
||||
size?: number;
|
||||
autoAnimate?: boolean;
|
||||
animationDelay?: number;
|
||||
}
|
||||
|
||||
const pathVariants: Variants = {
|
||||
normal: { pathLength: 1, opacity: 1 },
|
||||
animate: {
|
||||
opacity: [0, 0, 1, 1, 1],
|
||||
pathLength: [0.1, 0.3, 0.5, 0.7, 0.9, 1],
|
||||
transition: {
|
||||
opacity: { duration: 0.5 },
|
||||
pathLength: {
|
||||
duration: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const FingerprintIcon = forwardRef<FingerprintIconHandle, FingerprintIconProps>(
|
||||
(
|
||||
{
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
className,
|
||||
size = 28,
|
||||
autoAnimate = true,
|
||||
animationDelay = 0,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const controls = useAnimation();
|
||||
const isControlledRef = useRef(false);
|
||||
|
||||
useImperativeHandle(ref, () => {
|
||||
isControlledRef.current = true;
|
||||
|
||||
return {
|
||||
startAnimation: () => controls.start("animate"),
|
||||
stopAnimation: () => controls.start("normal"),
|
||||
};
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (autoAnimate && !isControlledRef.current) {
|
||||
const timer = setTimeout(() => {
|
||||
controls.start("animate");
|
||||
}, animationDelay);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [autoAnimate, animationDelay, controls]);
|
||||
|
||||
const handleMouseEnter = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!isControlledRef.current) {
|
||||
controls.start("animate");
|
||||
}
|
||||
onMouseEnter?.(e);
|
||||
},
|
||||
[controls, onMouseEnter],
|
||||
);
|
||||
|
||||
const handleMouseLeave = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!isControlledRef.current) {
|
||||
controls.start("normal");
|
||||
}
|
||||
onMouseLeave?.(e);
|
||||
},
|
||||
[controls, onMouseLeave],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(className)}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
{...props}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"
|
||||
strokeOpacity={0.4}
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
<motion.path
|
||||
d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"
|
||||
variants={pathVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M14 13.12c0 2.38 0 6.38-1 8.88"
|
||||
strokeOpacity={0.4}
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
<motion.path
|
||||
d="M14 13.12c0 2.38 0 6.38-1 8.88"
|
||||
variants={pathVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M17.29 21.02c.12-.6.43-2.3.5-3.02"
|
||||
strokeOpacity={0.4}
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
<motion.path
|
||||
d="M17.29 21.02c.12-.6.43-2.3.5-3.02"
|
||||
variants={pathVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M2 12a10 10 0 0 1 18-6"
|
||||
strokeOpacity={0.4}
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
<motion.path
|
||||
d="M2 12a10 10 0 0 1 18-6"
|
||||
variants={pathVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
|
||||
<path d="M2 16h.01" strokeOpacity={0.4} strokeWidth="2" fill="none" />
|
||||
<motion.path
|
||||
d="M2 16h.01"
|
||||
variants={pathVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M21.8 16c.2-2 .131-5.354 0-6"
|
||||
strokeOpacity={0.4}
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
<motion.path
|
||||
d="M21.8 16c.2-2 .131-5.354 0-6"
|
||||
variants={pathVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"
|
||||
strokeOpacity={0.4}
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
<motion.path
|
||||
d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"
|
||||
variants={pathVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M8.65 22c.21-.66.45-1.32.57-2"
|
||||
strokeOpacity={0.4}
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
<motion.path
|
||||
d="M8.65 22c.21-.66.45-1.32.57-2"
|
||||
variants={pathVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M9 6.8a6 6 0 0 1 9 5.2v2"
|
||||
strokeOpacity={0.4}
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
<motion.path
|
||||
d="M9 6.8a6 6 0 0 1 9 5.2v2"
|
||||
variants={pathVariants}
|
||||
animate={controls}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
FingerprintIcon.displayName = "FingerprintIcon";
|
||||
|
||||
export { FingerprintIcon };
|
||||
@@ -0,0 +1,18 @@
|
||||
import * as React from "react";
|
||||
|
||||
function IconOpenai(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
width="1em"
|
||||
{...props}
|
||||
>
|
||||
<title>OpenAI</title>
|
||||
<path d="M22.282 9.821a5.985 5.985 0 00-.516-4.91 6.046 6.046 0 00-6.51-2.9A6.065 6.065 0 004.981 4.18a5.985 5.985 0 00-3.998 2.9 6.046 6.046 0 00.743 7.097 5.98 5.98 0 00.51 4.911 6.051 6.051 0 006.515 2.9A5.985 5.985 0 0013.26 24a6.056 6.056 0 005.772-4.206 5.99 5.99 0 003.997-2.9 6.056 6.056 0 00-.747-7.073zM13.26 22.43a4.476 4.476 0 01-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 00.392-.681v-6.737l2.02 1.168a.071.071 0 01.038.052v5.583a4.504 4.504 0 01-4.494 4.494zM3.6 18.304a4.47 4.47 0 01-.535-3.014l.142.085 4.783 2.759a.771.771 0 00.78 0l5.843-3.369v2.332a.08.08 0 01-.033.062L9.74 19.95a4.5 4.5 0 01-6.14-1.646zM2.34 7.896a4.485 4.485 0 012.366-1.973V11.6a.766.766 0 00.388.676l5.815 3.355-2.02 1.168a.076.076 0 01-.071 0l-4.83-2.786A4.504 4.504 0 012.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 01.071 0l4.83 2.791a4.494 4.494 0 01-.676 8.105v-5.678a.79.79 0 00-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 00-.785 0L9.409 9.23V6.897a.066.066 0 01.028-.061l4.83-2.787a4.5 4.5 0 016.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 01-.038-.057V6.075a4.5 4.5 0 017.375-3.453l-.142.08-4.778 2.758a.795.795 0 00-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default IconOpenai;
|
||||
@@ -0,0 +1,20 @@
|
||||
import { JSXElementConstructor } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export const SourceIcon = ({ id }: { id: string }) => {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="">
|
||||
{id && (
|
||||
<Image
|
||||
alt={id}
|
||||
width={36}
|
||||
height={36}
|
||||
className="h-10 w-10 aspect-square"
|
||||
src={`/icons/${id}.svg`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
|
||||
const SymbolColored = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="50"
|
||||
height="72"
|
||||
viewBox="0 0 50 72"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M41.7154 23.1929C38.9531 24.0129 36.8707 25.8677 35.3457 27.8826C35.0182 28.3151 34.3358 27.9901 34.4658 27.4601C37.3856 15.4534 33.5283 5.47401 21.5039 0.561817C20.894 0.311833 20.259 0.859299 20.419 1.49926C25.8887 23.4604 2.88236 21.608 5.78971 46.504C5.83971 46.9314 5.35973 47.2239 5.00975 46.9739C3.9198 46.1915 2.70237 44.5591 1.86741 43.4116C1.62242 43.0742 1.09245 43.1692 0.979951 43.5716C0.314984 45.9765 0 48.2413 0 50.4912C0 59.2407 4.49727 66.9427 11.3044 71.4074C11.6944 71.6624 12.1944 71.2974 12.0619 70.8499C11.7119 69.675 11.5144 68.4351 11.4994 67.1527C11.4994 66.3652 11.5494 65.5603 11.6719 64.8103C11.9569 62.9254 12.6119 61.1306 13.7118 59.4957C17.4841 53.8335 25.0462 48.3638 23.8388 40.9368C23.7613 40.4668 24.3163 40.1569 24.6663 40.4793C29.9935 45.3465 31.0485 51.8936 30.1735 57.7658C30.0985 58.2757 30.7385 58.5482 31.061 58.1482C31.8759 57.1283 32.8709 56.2334 33.9533 55.5609C34.2233 55.3934 34.5833 55.5209 34.6858 55.8209C35.2882 57.5733 36.1832 59.2182 37.0281 60.8631C38.0381 62.8404 38.5756 65.0978 38.4906 67.4877C38.4481 68.6501 38.2556 69.775 37.9331 70.8449C37.7956 71.2974 38.2906 71.6749 38.6881 71.4149C45.5002 66.9502 50 59.2482 50 50.4937C50 47.4514 49.4675 44.4691 48.4601 41.6743C46.3477 35.8121 40.988 31.4099 42.3429 23.7704C42.4079 23.4054 42.0704 23.0879 41.7154 23.1929Z"
|
||||
fill="#FA5D19"
|
||||
style={{ fill: "#FA5D19", fillOpacity: 1 }}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default SymbolColored;
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
|
||||
const SymbolWhite = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="50"
|
||||
height="72"
|
||||
viewBox="0 0 50 72"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M41.7154 23.1929C38.9531 24.0129 36.8707 25.8677 35.3457 27.8826C35.0182 28.3151 34.3358 27.9901 34.4658 27.4601C37.3856 15.4534 33.5283 5.47401 21.5039 0.561817C20.894 0.311833 20.259 0.859299 20.419 1.49926C25.8887 23.4604 2.88236 21.608 5.78971 46.504C5.83971 46.9314 5.35973 47.2239 5.00975 46.9739C3.9198 46.1915 2.70237 44.5591 1.86741 43.4116C1.62242 43.0742 1.09245 43.1692 0.979951 43.5716C0.314984 45.9765 0 48.2413 0 50.4912C0 59.2407 4.49727 66.9427 11.3044 71.4074C11.6944 71.6624 12.1944 71.2974 12.0619 70.8499C11.7119 69.675 11.5144 68.4351 11.4994 67.1527C11.4994 66.3652 11.5494 65.5603 11.6719 64.8103C11.9569 62.9254 12.6119 61.1306 13.7118 59.4957C17.4841 53.8335 25.0462 48.3638 23.8388 40.9368C23.7613 40.4668 24.3163 40.1569 24.6663 40.4793C29.9935 45.3465 31.0485 51.8936 30.1735 57.7658C30.0985 58.2757 30.7385 58.5482 31.061 58.1482C31.8759 57.1283 32.8709 56.2334 33.9533 55.5609C34.2233 55.3934 34.5833 55.5209 34.6858 55.8209C35.2882 57.5733 36.1832 59.2182 37.0281 60.8631C38.0381 62.8404 38.5756 65.0978 38.4906 67.4877C38.4481 68.6501 38.2556 69.775 37.9331 70.8449C37.7956 71.2974 38.2906 71.6749 38.6881 71.4149C45.5002 66.9502 50 59.2482 50 50.4937C50 47.4514 49.4675 44.4691 48.4601 41.6743C46.3477 35.8121 40.988 31.4099 42.3429 23.7704C42.4079 23.4054 42.0704 23.0879 41.7154 23.1929Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default SymbolWhite;
|
||||
@@ -0,0 +1,62 @@
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
export const TremorPlaceholder = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg className={props.className} fill="none" viewBox="0 0 92 92" {...props}>
|
||||
<g clipPath="url(#clip0_10096_2462)">
|
||||
<mask
|
||||
id="mask0_10096_2462"
|
||||
width={92}
|
||||
height={92}
|
||||
x={0}
|
||||
y={0}
|
||||
maskUnits="userSpaceOnUse"
|
||||
style={{
|
||||
maskType: "luminance",
|
||||
}}
|
||||
>
|
||||
<path fill="white" d="M92 0H0V92H92V0Z" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_10096_2462)">
|
||||
<path
|
||||
fill="#DEDEDE"
|
||||
d="M1.09521 20.809L19.7581 3.28516H72.2419L90.9047 20.809H1.09521Z"
|
||||
/>
|
||||
<path fill="#C9C9C9" d="M2 20H89V88.5H2V20Z" />
|
||||
<path
|
||||
stroke="#8C8C8C"
|
||||
strokeWidth={3.28571}
|
||||
d="M17.8761 2.97375L3.49687 17.8023C2.30794 19.0283 1.64307 20.6691 1.64307 22.377V85.5C1.64307 87.7091 3.43392 89.5 5.64306 89.5H86.3574C88.5665 89.5 90.3574 87.7091 90.3574 85.5V22.8208C90.3574 20.8283 89.5817 18.9141 88.1945 17.4837L74.1244 2.97375C73.2992 2.12284 72.1646 1.64258 70.9793 1.64258H21.0211C19.8358 1.64258 18.7012 2.12284 17.8761 2.97375Z"
|
||||
/>
|
||||
<path
|
||||
stroke="#8C8C8C"
|
||||
strokeWidth={3.28571}
|
||||
d="M2.19043 19.7129H90.3571"
|
||||
/>
|
||||
<path
|
||||
fill="#7D7D7D"
|
||||
fillOpacity={0.8}
|
||||
d="M37.7855 3.28516H54.214L56.9521 19.7137V34.7564C56.9521 36.7315 55.3509 38.3328 53.3757 38.3328H38.6238C36.6486 38.3328 35.0474 36.7315 35.0474 34.7564V19.7137L37.7855 3.28516Z"
|
||||
/>
|
||||
<path
|
||||
fill="white"
|
||||
d="M48.2744 63.3867H14.2329C12.9363 63.3867 11.8853 64.3853 11.8853 65.617V77.8837C11.8853 79.1155 12.9363 80.114 14.2329 80.114H48.2744C49.571 80.114 50.6221 79.1155 50.6221 77.8837V65.617C50.6221 64.3853 49.571 63.3867 48.2744 63.3867Z"
|
||||
/>
|
||||
<path
|
||||
stroke="black"
|
||||
strokeOpacity={0.07}
|
||||
strokeWidth={1.09524}
|
||||
d="M48.1495 62.9473H14.3583C12.7495 62.9473 11.4453 64.179 11.4453 65.6985V77.8037C11.4453 79.3232 12.7495 80.5549 14.3583 80.5549H48.1495C49.7583 80.5549 51.0625 79.3232 51.0625 77.8037V65.6985C51.0625 64.179 49.7583 62.9473 48.1495 62.9473Z"
|
||||
/>
|
||||
<path
|
||||
fill="#0F172A"
|
||||
d="M17.7102 75.4604C16.7747 75.4604 15.9759 74.9874 15.9759 73.7891V71.382H15.1034V70.1627H16.0284V68.7647L17.4474 68.2392V70.1627H18.5932V71.382H17.4474V73.4422C17.4474 73.9047 17.6787 74.136 18.1727 74.136C18.3304 74.136 18.4775 74.1045 18.5932 74.0729V75.3448C18.4565 75.3868 18.0781 75.4604 17.7102 75.4604ZM19.5597 75.3027V70.1627H21.0103V70.909C21.2625 70.3414 21.7355 69.9946 22.3872 69.9946C22.4923 69.9946 22.7026 70.0156 22.7656 70.0261V71.5187C22.5975 71.4766 22.4293 71.4661 22.2296 71.4661C21.6725 71.4661 21.1574 71.834 21.0313 72.3281V75.3027H19.5597ZM25.8567 75.4604C24.3746 75.4604 23.1553 74.4723 23.1553 72.6959C23.1553 71.0772 24.322 69.9946 25.7936 69.9946C27.4229 69.9946 28.3478 71.1298 28.3478 72.717C28.3478 72.8431 28.3373 73.0638 28.3268 73.1479H24.6899C24.7215 73.8522 25.3732 74.2411 26.0143 74.2411C26.7081 74.2411 27.2967 74.0519 27.9694 73.6104V74.8823C27.4964 75.1871 26.8868 75.4604 25.8567 75.4604ZM24.7215 72.1599H26.8658C26.8342 71.6764 26.4979 71.2139 25.7936 71.2139C25.1524 71.2139 24.753 71.6974 24.7215 72.1599ZM35.2192 69.9946C36.1862 69.9946 37.0586 70.6568 37.0586 71.8761V75.3027H35.587V72.244C35.587 71.6869 35.2822 71.34 34.7882 71.34C34.4203 71.34 34.126 71.5502 33.9158 71.8445V71.8761V75.3027H32.4442V72.244C32.4442 71.6869 32.1499 71.34 31.6558 71.34C31.2669 71.34 30.9726 71.5607 30.7624 71.8761V75.3027H29.2908V70.1627H30.7414V70.5727C31.0252 70.2468 31.4561 69.9946 32.1078 69.9946C32.707 69.9946 33.2641 70.2468 33.5899 70.7303C33.8527 70.4255 34.3677 69.9946 35.2192 69.9946ZM40.6916 75.4604C39.0309 75.4604 37.8957 74.2621 37.8957 72.717C37.8957 71.1823 39.0309 69.9946 40.6916 69.9946C42.3524 69.9946 43.4981 71.1823 43.4981 72.717C43.4981 74.2621 42.3524 75.4604 40.6916 75.4604ZM40.6916 74.0729C41.4064 74.0729 41.974 73.5684 41.974 72.717C41.974 71.8866 41.4064 71.3715 40.6916 71.3715C39.9874 71.3715 39.4198 71.8866 39.4198 72.717C39.4198 73.5684 39.9874 74.0729 40.6916 74.0729ZM44.4418 75.3027V70.1627H45.8923V70.909C46.1446 70.3414 46.6176 69.9946 47.2693 69.9946C47.3744 69.9946 47.5846 70.0156 47.6477 70.0261V71.5187C47.4795 71.4766 47.3113 71.4661 47.1116 71.4661C46.5545 71.4661 46.0395 71.834 45.9133 72.3281V75.3027H44.4418Z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_10096_2462">
|
||||
<rect width={92} height={92} fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from "react";
|
||||
|
||||
const WordmarkColored = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="172"
|
||||
height="40"
|
||||
viewBox="0 0 172 40"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M23.3606 12.8281C21.8137 13.2873 20.6476 14.3261 19.7936 15.4544C19.6102 15.6966 19.228 15.5146 19.3008 15.2178C20.936 8.49401 18.7759 2.90556 12.0422 0.154735C11.7006 0.0147436 11.345 0.321324 11.4346 0.679702C14.4977 12.9779 1.61412 11.9406 3.24224 25.8823C3.27024 26.1217 3.00145 26.2855 2.80546 26.1455C2.19509 25.7073 1.51332 24.7932 1.04575 24.1506C0.908555 23.9616 0.611769 24.0148 0.548773 24.2402C0.176391 25.5869 0 26.8553 0 28.1152C0 33.0149 2.51847 37.328 6.33048 39.8283C6.54887 39.9711 6.82886 39.7667 6.75466 39.5161C6.55867 38.8581 6.44808 38.1638 6.43968 37.4456C6.43968 37.0046 6.46768 36.5539 6.53627 36.1339C6.69587 35.0784 7.06265 34.0732 7.67862 33.1577C9.79111 29.9869 14.0259 26.9239 13.3497 22.7647C13.3063 22.5015 13.6171 22.328 13.8131 22.5085C16.7964 25.2342 17.3871 28.9005 16.8972 32.1889C16.8552 32.4745 17.2135 32.6271 17.3941 32.4031C17.8505 31.832 18.4077 31.3308 19.0138 30.9542C19.165 30.8604 19.3666 30.9318 19.424 31.0998C19.7614 32.0811 20.2626 33.0023 20.7358 33.9234C21.3013 35.0308 21.6023 36.2949 21.5547 37.6332C21.5309 38.2842 21.4231 38.9141 21.2425 39.5133C21.1655 39.7667 21.4427 39.9781 21.6653 39.8325C25.4801 37.3322 28 33.0191 28 28.1166C28 26.4129 27.7018 24.7428 27.1376 23.1777C25.9547 19.8949 22.9533 17.4297 23.712 13.1515C23.7484 12.9471 23.5594 12.7693 23.3606 12.8281Z"
|
||||
fill="#FA5D19"
|
||||
/>
|
||||
<path
|
||||
d="M41 34.0521V10.9618H55.7586V14.3264H44.7969V21.0226H53.8436V24.2882H44.7969V34.0521H41Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M59.9569 14.7882C58.7352 14.7882 57.7777 13.8976 57.7777 12.6441C57.7777 11.3906 58.7352 10.5 59.9569 10.5C61.1785 10.5 62.136 11.3906 62.136 12.6441C62.136 13.8976 61.1785 14.7882 59.9569 14.7882ZM58.1409 34.0521V17.1632H61.7068V34.0521H58.1409Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M73.5885 17.1632H74.3809V20.4948H72.796C69.6264 20.4948 68.6029 22.9687 68.6029 25.5747V34.0521H65.0371V17.1632H68.2067L68.6029 19.7031C69.4613 18.2847 70.815 17.1632 73.5885 17.1632Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M83.632 34.25C78.3163 34.25 74.9816 30.8194 74.9816 25.6406C74.9816 20.4288 78.3163 16.9653 83.3019 16.9653C88.1884 16.9653 91.457 20.066 91.5561 25.0139C91.5561 25.4427 91.5231 25.9045 91.457 26.3663H78.7125V26.5972C78.8116 29.467 80.6275 31.3472 83.4339 31.3472C85.613 31.3472 87.1979 30.2587 87.6931 28.3785H91.2589C90.6646 31.7101 87.8252 34.25 83.632 34.25ZM78.8446 23.7604H87.8582C87.561 21.2535 85.8112 19.8351 83.3349 19.8351C81.0567 19.8351 79.1087 21.3524 78.8446 23.7604Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M102.033 34.25C96.9151 34.25 93.6465 30.9184 93.6465 25.6406C93.6465 20.4288 97.0142 16.9653 102.132 16.9653C106.49 16.9653 109.197 19.3733 109.891 23.1997H106.16C105.698 21.2205 104.278 20 102.066 20C99.1933 20 97.3113 22.309 97.3113 25.6406C97.3113 28.9392 99.1933 31.2153 102.066 31.2153C104.245 31.2153 105.698 29.9618 106.127 28.0156H109.891C109.23 31.842 106.358 34.25 102.033 34.25Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M121.006 17.1632H121.799V20.4948H120.214C117.044 20.4948 116.021 22.9687 116.021 25.5747V34.0521H112.455V17.1632H115.625L116.021 19.7031C116.879 18.2847 118.233 17.1632 121.006 17.1632Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M130.614 16.9653C135.104 16.9653 137.679 19.1094 137.679 23.1007V34.0521H134.576L134.279 31.6441C133.123 33.1615 131.505 34.25 128.831 34.25C125.133 34.25 122.657 32.4358 122.657 29.3021C122.657 25.8385 125.166 23.8924 129.92 23.8924H134.147V22.8698C134.147 20.9896 132.793 19.8351 130.449 19.8351C128.336 19.8351 126.916 20.8247 126.652 22.309H123.152C123.515 19.0104 126.355 16.9653 130.614 16.9653ZM129.425 31.4792C132.397 31.4792 134.114 29.7309 134.147 27.125V26.5312H129.722C127.51 26.5312 126.289 27.3559 126.289 29.0712C126.289 30.4896 127.477 31.4792 129.425 31.4792Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M144.653 34.0521L139.139 17.1632H142.903L146.766 30.0937L150.629 17.1632H153.897L157.595 30.0937L161.59 17.1632H165.222L159.609 34.0521H155.779L152.214 22.5729L148.516 34.0521H144.653Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M166.934 34.0521V10.9618H170.5V34.0521H166.934Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default WordmarkColored;
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
|
||||
const WordmarkWhite = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="172"
|
||||
height="40"
|
||||
viewBox="0 0 172 40"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M23.3606 12.8281C21.8137 13.2873 20.6476 14.3261 19.7936 15.4544C19.6102 15.6966 19.228 15.5146 19.3008 15.2178C20.936 8.49401 18.7759 2.90556 12.0422 0.154735C11.7006 0.0147436 11.345 0.321324 11.4346 0.679702C14.4977 12.9779 1.61412 11.9406 3.24224 25.8823C3.27024 26.1217 3.00145 26.2855 2.80546 26.1455C2.19509 25.7073 1.51332 24.7932 1.04575 24.1506C0.908555 23.9616 0.611769 24.0148 0.548773 24.2402C0.176391 25.5869 0 26.8553 0 28.1152C0 33.0149 2.51847 37.328 6.33048 39.8283C6.54887 39.9711 6.82886 39.7667 6.75466 39.5161C6.55867 38.8581 6.44808 38.1638 6.43968 37.4456C6.43968 37.0046 6.46768 36.5539 6.53627 36.1339C6.69587 35.0784 7.06265 34.0732 7.67862 33.1577C9.79111 29.9869 14.0259 26.9239 13.3497 22.7647C13.3063 22.5015 13.6171 22.328 13.8131 22.5085C16.7964 25.2342 17.3871 28.9005 16.8972 32.1889C16.8552 32.4745 17.2135 32.6271 17.3941 32.4031C17.8505 31.832 18.4077 31.3308 19.0138 30.9542C19.165 30.8604 19.3666 30.9318 19.424 31.0998C19.7614 32.0811 20.2626 33.0023 20.7358 33.9234C21.3013 35.0308 21.6023 36.2949 21.5547 37.6332C21.5309 38.2842 21.4231 38.9141 21.2425 39.5133C21.1655 39.7667 21.4427 39.9781 21.6653 39.8325C25.4801 37.3322 28 33.0191 28 28.1166C28 26.4129 27.7018 24.7428 27.1376 23.1777C25.9547 19.8949 22.9533 17.4297 23.712 13.1515C23.7484 12.9471 23.5594 12.7693 23.3606 12.8281Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M41 34.0521V10.9618H55.7586V14.3264H44.7969V21.0226H53.8436V24.2882H44.7969V34.0521H41Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M59.9569 14.7882C58.7352 14.7882 57.7777 13.8976 57.7777 12.6441C57.7777 11.3906 58.7352 10.5 59.9569 10.5C61.1785 10.5 62.136 11.3906 62.136 12.6441C62.136 13.8976 61.1785 14.7882 59.9569 14.7882ZM58.1409 34.0521V17.1632H61.7068V34.0521H58.1409Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M73.5885 17.1632H74.3809V20.4948H72.796C69.6264 20.4948 68.6029 22.9687 68.6029 25.5747V34.0521H65.0371V17.1632H68.2067L68.6029 19.7031C69.4613 18.2847 70.815 17.1632 73.5885 17.1632Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M83.632 34.25C78.3163 34.25 74.9816 30.8194 74.9816 25.6406C74.9816 20.4288 78.3163 16.9653 83.3019 16.9653C88.1884 16.9653 91.457 20.066 91.5561 25.0139C91.5561 25.4427 91.5231 25.9045 91.457 26.3663H78.7125V26.5972C78.8116 29.467 80.6275 31.3472 83.4339 31.3472C85.613 31.3472 87.1979 30.2587 87.6931 28.3785H91.2589C90.6646 31.7101 87.8252 34.25 83.632 34.25ZM78.8446 23.7604H87.8582C87.561 21.2535 85.8112 19.8351 83.3349 19.8351C81.0567 19.8351 79.1087 21.3524 78.8446 23.7604Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M102.033 34.25C96.9151 34.25 93.6465 30.9184 93.6465 25.6406C93.6465 20.4288 97.0142 16.9653 102.132 16.9653C106.49 16.9653 109.197 19.3733 109.891 23.1997H106.16C105.698 21.2205 104.278 20 102.066 20C99.1933 20 97.3113 22.309 97.3113 25.6406C97.3113 28.9392 99.1933 31.2153 102.066 31.2153C104.245 31.2153 105.698 29.9618 106.127 28.0156H109.891C109.23 31.842 106.358 34.25 102.033 34.25Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M121.006 17.1632H121.799V20.4948H120.214C117.044 20.4948 116.021 22.9687 116.021 25.5747V34.0521H112.455V17.1632H115.625L116.021 19.7031C116.879 18.2847 118.233 17.1632 121.006 17.1632Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M130.614 16.9653C135.104 16.9653 137.679 19.1094 137.679 23.1007V34.0521H134.576L134.279 31.6441C133.123 33.1615 131.505 34.25 128.831 34.25C125.133 34.25 122.657 32.4358 122.657 29.3021C122.657 25.8385 125.166 23.8924 129.92 23.8924H134.147V22.8698C134.147 20.9896 132.793 19.8351 130.449 19.8351C128.336 19.8351 126.916 20.8247 126.652 22.309H123.152C123.515 19.0104 126.355 16.9653 130.614 16.9653ZM129.425 31.4792C132.397 31.4792 134.114 29.7309 134.147 27.125V26.5312H129.722C127.51 26.5312 126.289 27.3559 126.289 29.0712C126.289 30.4896 127.477 31.4792 129.425 31.4792Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M144.653 34.0521L139.139 17.1632H142.903L146.766 30.0937L150.629 17.1632H153.897L157.595 30.0937L161.59 17.1632H165.222L159.609 34.0521H155.779L152.214 22.5729L148.516 34.0521H144.653Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path d="M166.934 34.0521V10.9618H170.5V34.0521H166.934Z" fill="white" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default WordmarkWhite;
|
||||
Reference in New Issue
Block a user