Ballistic Builder Brand
+ Ballistic Builder Brand
{/* Mapping through brand items and rendering brand component for each */}
{brandItems.map((brand) => (
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index c9f4bf9..bd837f4 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -11,9 +11,10 @@ import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline";
const navigation = [
{ name: "Home", href: "/", current: true },
- { name: "Builder", href: "/builder", current: false },
- { name: "Products", href: "#", current: false },
+ { name: "Builder", href: "/Builder", current: false },
+ { name: "Products", href: "/products", current: false },
{ name: "Completed Builds", href: "#", current: false },
+ { name: "Brands", href: "/Brands", current: false },
];
function classNames(...classes) {
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 21d5f4b..65d4fcd 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,40 +1,57 @@
-import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react"
-import {
- AbsoluteCenter,
- Button as ChakraButton,
- Span,
- Spinner,
-} from "@chakra-ui/react"
import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
-interface ButtonLoadingProps {
- loading?: boolean
- loadingText?: React.ReactNode
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
}
-export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
-
-export const Button = React.forwardRef(
- function Button(props, ref) {
- const { loading, disabled, loadingText, children, ...rest } = props
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
return (
-
- {loading && !loadingText ? (
- <>
-
-
- {children}
-
- ) : loading && loadingText ? (
- <>
-
+