From ea970c2750ff56ec93bc81a7bdbeccce92d769fc Mon Sep 17 00:00:00 2001
From: KevinLatino <latinokevin9@gmail.com>
Date: Sat, 2 Nov 2024 23:31:38 -0600
Subject: [PATCH] Feat: Ui-enhancement

---
 frontend/app/components/ui/card.tsx         |  76 ++++++++++++++
 frontend/app/components/ui/checkbox.tsx     |  30 ++++++
 frontend/app/components/ui/hero-section.tsx | 107 +++++++++++---------
 frontend/app/components/ui/input.tsx        |  25 +++++
 frontend/app/components/ui/sidebar.tsx      |   2 +-
 frontend/app/components/ui/slider.tsx       |  28 +++++
 frontend/app/marketplace/page.tsx           |  32 +++---
 7 files changed, 233 insertions(+), 67 deletions(-)
 create mode 100644 frontend/app/components/ui/card.tsx
 create mode 100644 frontend/app/components/ui/checkbox.tsx
 create mode 100644 frontend/app/components/ui/input.tsx
 create mode 100644 frontend/app/components/ui/slider.tsx

diff --git a/frontend/app/components/ui/card.tsx b/frontend/app/components/ui/card.tsx
new file mode 100644
index 0000000..7500a1c
--- /dev/null
+++ 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 }
\ No newline at end of file
diff --git a/frontend/app/components/ui/checkbox.tsx b/frontend/app/components/ui/checkbox.tsx
new file mode 100644
index 0000000..94d214f
--- /dev/null
+++ 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 }
\ No newline at end of file
diff --git a/frontend/app/components/ui/hero-section.tsx b/frontend/app/components/ui/hero-section.tsx
index ae33cec..9b80d35 100644
--- 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
new file mode 100644
index 0000000..7030e99
--- /dev/null
+++ 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 }
\ No newline at end of file
diff --git a/frontend/app/components/ui/sidebar.tsx b/frontend/app/components/ui/sidebar.tsx
index 8e08efe..206228b 100644
--- a/frontend/app/components/ui/sidebar.tsx
+++ b/frontend/app/components/ui/sidebar.tsx
@@ -73,7 +73,7 @@ export const SidebarTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHT
         className={cn("p-2", className)}
         {...props}
       >
-        <Menu size={30} className="text-purple-900"/>
+        <Menu size={30} className="text-black"/>
         <span className="sr-only">Toggle Sidebar</span>
       </button>
     );
diff --git a/frontend/app/components/ui/slider.tsx b/frontend/app/components/ui/slider.tsx
new file mode 100644
index 0000000..43e5919
--- /dev/null
+++ 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 }
\ No newline at end of file
diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index f0f9062..178d7d5 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -86,14 +86,14 @@ function SidebarComponent({ priceRange, setPriceRange, selectedCategories, handl
       <SidebarContent className="p-6">
         <div className="space-y-8">
           <div>
-            <h3 className="mb-3 text-lg font-medium">Price range</h3>
+            <h3 className="mb-2 text-lg font-medium">Price range</h3>
             <Slider
               min={0}
               max={1500}
               step={10}
               value={priceRange}
               onValueChange={setPriceRange}
-              className="mb-4"
+              className="mb-3"
             />
             <div className="flex justify-between text-lg">
               <span>${priceRange[0]}</span>
@@ -101,7 +101,7 @@ function SidebarComponent({ priceRange, setPriceRange, selectedCategories, handl
             </div>
           </div>
           <div>
-            <h3 className="mb-3 text-lg font-medium">Categories</h3>
+            <h3 className="mb-2 text-lg font-medium">Categories</h3>
             <div className="space-y-3">
               {["Electronics", "Furniture", "Appliances", "Sports"].map((category) => (
                 <div key={category} className="flex items-center">
@@ -125,21 +125,21 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
   return (
     <header className="flex items-center justify-between p-6 border-b">
       <SidebarTrigger>
-        <Button variant="outline" size="icon" className="text-purple-900">
-          <HamIcon size={50} />
+        <Button variant="outline" size="icon">
+          <HamIcon className="h-6 w-6" />
           <span className="sr-only">Toggle Sidebar</span>
         </Button>
       </SidebarTrigger>
-      <div className="flex items-center space-x-3">
+      <div className="flex items-center text-2xl space-x-3">
         <Input
           type="search"
           placeholder="Search products..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-80 text-lg"
+          className="w-[16rem] h-[3rem]"
         />
-        <Button size="icon" variant="ghost" className="text-purple-900">
-          <Search className="h-6 w-6" />
+        <Button size="icon" variant="ghost">
+          <Search className="h-5 w-5" />
           <span className="sr-only">Search</span>
         </Button>
       </div>
@@ -150,19 +150,19 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
 function ProductList({ products }: ProductListProps) {
   return (
     <main className="p-8">
-      <h1 className="text-3xl font-bold mb-8 text-purple-900">Products</h1>
+      <h1 className="text-3xl font-bold mb-8">Products</h1>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {products?.map((product) => (
-          <Card key={product.id}>
+          <Card key={product.id} className="p-6">
             <CardHeader>
-              <CardTitle className="text-purple-900 text-2xl">{product.name}</CardTitle>
+              <CardTitle className="text-xl font-semibold">{product.name}</CardTitle>
             </CardHeader>
             <CardContent>
-              <p className="text-gray-500 text-lg">{product.category}</p>
+              <p className="text-lg text-gray-500">{product.category}</p>
             </CardContent>
-            <CardFooter className="flex justify-between">
-              <span className="text-xl font-semibold text-purple-900">${product.price}</span>
-              <Button variant="outline" className="text-purple-900 text-[1.1rem]">Add to cart</Button>
+            <CardFooter className="flex justify-between items-center">
+              <span className="text-2xl font-bold">${product.price}</span>
+              <Button className="text-[16px] py-2 px-4">Add to Cart</Button>
             </CardFooter>
           </Card>
         ))}