create button, textlink, add icons and font

src/components/ui/button.tsx

@@ -0,0 +1,48 @@
+import { Slot as SlotPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap rounded-[8px] px-4  text-[14px] leading-[130%] tracking-[0.01em] transition-colors hover:cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:*:fill-text-secondary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				primary:
+					"bg-fill-800 text-white hover:bg-fill-700 disabled:bg-fill-400",
+				secondary:
+					"bg-fill-100 text-text-light-900 hover:bg-fill-150 disabled:bg-fill-100 disabled:text-text-light-200",
+				tertiary:
+					"border border-fill-300 bg-transparent text-text-light-900 hover:bg-fill-100 disabled:text-text-light-200",
+				ghost:
+					" bg-transparent text-text-light-900 hover:bg-fill-100 disabled:text-text-light-200",
+			},
+		},
+		defaultVariants: {
+			variant: "primary",
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? SlotPrimitive.Slot : "button";
+
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

src/components/ui/text-link.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+import type { FC, ReactNode } from "react";
+
+interface TextLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+	children?: ReactNode;
+	className?: string;
+	disabled?: boolean;
+}
+
+export const TextLink: FC<TextLinkProps> = ({
+	children,
+	className,
+	disabled = false,
+	...props
+}) => {
+	return (
+		<a
+			data-disabled={disabled}
+			className={cn(
+				"text-feedback-info-900 data-[disabled=true]:opacity-50 font-[600] data-[disabled=false]:cursor-pointer data-[disabled=false]:hover:border-b-[2px] w-fit transition-all duration-75",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</a>
+	);
+};