Merge pull request #10 from Villarley/Ui-enhancement

UI enhancement
KaizeNodeLabs · Nov 4, 2024 · df2d9c3 · df2d9c3
2 parents 0926ac8 + ea970c2
commit df2d9c3
Show file tree

Hide file tree

Showing 7 changed files with 490 additions and 50 deletions.
diff --git a/frontend/app/components/ui/card.tsx b/frontend/app/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/frontend/app/components/ui/checkbox.tsx b/frontend/app/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 }
diff --git a/frontend/app/components/ui/hero-section.tsx b/frontend/app/components/ui/hero-section.tsx
@@ -1,56 +1,63 @@
+
 import { Button } from "@/app/components/ui/button";
 import { ArrowRight, Wallet } from "lucide-react";
+import Link from "next/link";
 import * as React from "react";
 
 export function HeroSection() {
-	return (
-		<div className="relative flex flex-col items-center justify-center min-h-[90vh] text-center px-4 overflow-hidden">
-			{/* Gradient Background */}
-			<div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-background" />
-
-			{/* Animated Grid Background */}
-			<div className="absolute inset-0 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
-
-			<div className="relative z-10">
-				<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary mb-8">
-					<span className="relative flex h-2 w-2">
-						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-						<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
-					</span>
-					Live on Stellar Network
-				</div>
-
-				<h1 className="text-4xl sm:text-6xl font-bold tracking-tight mb-8 bg-clip-text from-primary to-primary/70">
-					The Future of
-					<span className="block mt-2">Secure Trading</span>
-				</h1>
-
-				<p className="text-xl text-muted-foreground max-w-[600px] mb-12">
-					Experience trustless trading with built-in Stellar escrow protection.
-					Your gateway to secure, decentralized commerce.
-				</p>
-
-				<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-					<Button size="lg" className="group">
-						<Wallet className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" />
-						Connect Wallet
-					</Button>
-					<Button variant="outline" size="lg" className="group">
-						Explore Marketplace
-						<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
-					</Button>
-				</div>
-
-				{/* Live Stats Ticker */}
-				<div className="mt-16 flex gap-8 justify-center items-center text-sm text-muted-foreground">
-					<div className="flex items-center gap-2">
-						<span className="inline-block w-2 h-2 rounded-full bg-green-500"></span>
-						Network Status: Active
-					</div>
-					<div>24h Volume: $1.2M</div>
-					<div>Gas: 0.001 XLM</div>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="relative flex flex-col items-center justify-center min-h-[90vh] text-center px-4 overflow-hidden">
+      {/* Gradient Background */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-background" />
+
+      {/* Animated Grid Background */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
+
+      <div className="relative z-10">
+        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary mb-8">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
+          </span>
+          Live on Stellar Network
+        </div>
+
+        <h1 className="text-4xl sm:text-6xl font-bold tracking-tight mb-8 bg-clip-text from-primary to-primary/70">
+          The Future of
+          <span className="block mt-2">Secure Trading</span>
+        </h1>
+
+        <p className="text-xl text-muted-foreground max-w-[600px] mb-12">
+          Experience trustless trading with built-in Stellar escrow protection.
+          Your gateway to secure, decentralized commerce.
+        </p>
+
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <Button size="lg" className="group">
+            <Wallet className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" />
+            Connect Wallet
+          </Button>
+          <Link
+            href="/marketplace
+		  "
+          >
+            <Button variant="outline" size="lg" className="group">
+              Explore Marketplace
+              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+            </Button>
+          </Link>
+        </div>
+
+        {/* Live Stats Ticker */}
+        <div className="mt-16 flex gap-8 justify-center items-center text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-2 h-2 rounded-full bg-green-500"></span>
+            Network Status: Active
+          </div>
+          <div>24h Volume: $1.2M</div>
+          <div>Gas: 0.001 XLM</div>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/components/ui/input.tsx b/frontend/app/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/frontend/app/components/ui/sidebar.tsx b/frontend/app/components/ui/sidebar.tsx
@@ -0,0 +1,102 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+import { cn } from "@/lib/utils"; 
+import { X, Menu } from "lucide-react";
+
+interface SidebarContextType {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+export const SidebarProvider = ({ children }: { children: ReactNode }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleSidebar = () => setIsOpen(!isOpen);
+
+  return (
+    <SidebarContext.Provider value={{ isOpen, toggleSidebar }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+
+export const Sidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { isOpen } = useSidebar();
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transition-transform duration-300",
+          isOpen ? "translate-x-0" : "-translate-x-full",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
+
+export const SidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("px-4 py-2 border-b flex justify-between items-center", className)} {...props}>
+      {props.children}
+      <SidebarClose />
+    </div>
+  )
+);
+SidebarHeader.displayName = "SidebarHeader";
+
+export const SidebarContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex-1 overflow-y-auto p-4", className)} {...props} />
+  )
+);
+SidebarContent.displayName = "SidebarContent";
+
+export const SidebarTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return (
+      <button
+        ref={ref}
+        onClick={toggleSidebar}
+        className={cn("p-2", className)}
+        {...props}
+      >
+        <Menu size={30} className="text-black"/>
+        <span className="sr-only">Toggle Sidebar</span>
+      </button>
+    );
+  }
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+
+export const SidebarClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+    return (
+      <button
+        ref={ref}
+        onClick={toggleSidebar}
+        className={cn("absolute right-4 top-4 opacity-70 hover:opacity-100", className)}
+        {...props}
+      >
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close Sidebar</span>
+      </button>
+    );
+  }
+);
+SidebarClose.displayName = "SidebarClose";
+
+// export { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarTrigger, SidebarClose };
diff --git a/frontend/app/components/ui/slider.tsx b/frontend/app/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }