add components from shadcn and other ones used in the visnkmr.github.…

…io repo

components/icons.tsx

@@ -0,0 +1,74 @@
+import {
+    AlertTriangle,
+    ArrowRight,
+    Check,
+    ChevronLeft,
+    ChevronRight,
+    Command,
+    CreditCard,
+    File,
+    FileText,
+    HelpCircle,
+    Image,
+    Laptop,
+    Loader2,
+    LucideProps,
+    Moon,
+    MoreVertical,
+    Pizza,
+    Plus,
+    Settings,
+    SunMedium,
+    Trash,
+    Twitter,
+    User,
+    X,
+    type Icon as LucideIcon,
+    CreditCardIcon,
+  } from "lucide-react"
+
+  export type Icon = LucideIcon
+
+  export const Icons = {
+    logo: Command,
+    close: X,
+    spinner: Loader2,
+    chevronLeft: ChevronLeft,
+    chevronRight: ChevronRight,
+    trash: Trash,
+    post: FileText,
+    page: File,
+    media: Image,
+    settings: Settings,
+    billing: CreditCard,
+    ellipsis: MoreVertical,
+    add: Plus,
+    warning: AlertTriangle,
+    user: User,
+    arrowRight: ArrowRight,
+    help: HelpCircle,
+    pizza: Pizza,
+    payment: CreditCardIcon,
+    sun: SunMedium,
+    moon: Moon,
+    laptop: Laptop,
+    gitHub: ({ ...props }: LucideProps) => (
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        data-prefix="fab"
+        data-icon="github"
+        role="img"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 496 512"
+        {...props}
+      >
+        <path
+          fill="currentColor"
+          d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+        ></path>
+      </svg>
+    ),
+    twitter: Twitter,
+    check: Check,
+  }

components/ui/LargeHeading.tsx

@@ -0,0 +1,52 @@
+import { FC } from 'react';
+import { cn } from './lib/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+
+const headingVariants = cva(
+  'font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl mb-10 antialiased',
+  {
+    variants: {
+      size: {
+        default: 'font-bold font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl',
+        xlg: 'text-5xl md:text-6xl lg:text-7xl',
+        sm: 'text-2xl md:text-3xl lg:text-4xl',
+        lg: 'text-3xl md:text-3xl lg:text-4xl font-bold',
+      },
+      textColor: {
+        default: 'text-gray-800',
+      },
+      align: {
+        default: 'relative',
+        center: 'text-center',
+      },
+      lineHeight: {
+        '99': 'leading-99',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      textColor: 'default',
+      align: 'default',
+      lineHeight: '99',
+    },
+  }
+);
+
+interface LargeHeadingProps extends VariantProps<typeof headingVariants> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const LargeHeading: FC<LargeHeadingProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <h1 {...props} className={cn(headingVariants(props), className)}>
+      {children}
+    </h1>
+  );
+};
+
+export default LargeHeading;

components/ui/button.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+
+import { cn } from "./lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline text-primary",
+      },
+      size: {
+        default: "h-10 py-2 px-4",
+        sm: "h-9 px-3 rounded-md",
+        lg: "h-11 px-8 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "./lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }