[V0_FILE]typescriptreact:file="page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Hero } from "@/components/hero" import { FeaturedPrompts } from "@/components/featured-prompts" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/navigation.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Menu, Search, Wallet } from "lucide-react" import Link from "next/link" import { useState } from "react" export function Navigation() { const [isConnected, setIsConnected] = useState(false) return (

PromptMarket

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import Link from "next/link" import { Github, Twitter, DiscIcon as Discord } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/hero.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import Link from "next/link" export function Hero() { return (

Buy and Sell AI Prompts Securely on the Blockchain

Discover high-quality AI prompts, sell your own creations, and join a thriving community of prompt engineers.

) } [V0_FILE]typescriptreact:file="components/featured-prompts.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { StarIcon } from "lucide-react" const featuredPrompts = [ { id: 1, title: "Creative Story Generator", description: "Generate engaging short stories with complex characters and plot twists.", price: "0.1 ETH", category: "Creative Writing", rating: 4.8, }, { id: 2, title: "SEO Content Optimizer", description: "Create SEO-optimized content that ranks well on search engines.", price: "0.08 ETH", category: "Marketing", rating: 4.9, }, { id: 3, title: "Code Refactoring Assistant", description: "Improve your code quality with smart refactoring suggestions.", price: "0.15 ETH", category: "Programming", rating: 4.7, }, ] export function FeaturedPrompts() { return (

Featured Prompts

{featuredPrompts.map((prompt) => (

{prompt.title} {prompt.description}

{prompt.category}

{prompt.rating}

{prompt.price} ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Navigation } from "@/components/navigation" import { Hero } from "@/components/hero" import { FeaturedPrompts } from "@/components/featured-prompts" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/browse/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { StarIcon, Filter } from "lucide-react" import { useState } from "react" const prompts = [ { id: 1, title: "Creative Story Generator", description: "Generate engaging short stories with complex characters and plot twists.", price: 0.1, category: "Creative Writing", rating: 4.8, seller: "Alice.eth", }, // Add more prompts... ] export default function BrowsePage() { const [priceRange, setPriceRange] = useState([0, 1]) return (

{/* Filters Sidebar */}

Filters

Category

Price Range (ETH)

{priceRange[0]} ETH {priceRange[1]} ETH

Sort By

{/* Prompts Grid */}

{prompts.map((prompt) => ( {prompt.title} {prompt.category}

{prompt.description}

{prompt.rating}

Seller: {prompt.seller}

{prompt.price} ETH ))}

) } [V0_FILE]typescriptreact:file="app/sell/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Upload, DollarSign } from "lucide-react" export default function SellPage() { return (

New Prompt My Listings List a New Prompt

Title

Description

</div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Category</label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Select category" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="creative">Creative Writing</SelectItem>
                        <SelectItem value="coding">Coding</SelectItem>
                        <SelectItem value="marketing">Marketing</SelectItem>
                        <SelectItem value="business">Business</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Price (ETH)</label>
                    <div className="relative">
                      <DollarSign className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
                      <Input type="number" placeholder="0.00" className="pl-9" step="0.01" />
                    </div>
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Upload Prompt File</label>
                    <div className="border-2 border-dashed rounded-lg p-6 text-center">
                      <Upload className="h-8 w-8 mx-auto text-muted-foreground" />
                      <p className="mt-2 text-sm text-muted-foreground">
                        Drag and drop your prompt file here, or click to browse
                      </p>
                      <Input type="file" className="hidden" />
                    </div>
                  </div>

<Button className="w-full">Submit Prompt</Button>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="listings" className="mt-6">
              <div className="grid gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex justify-between items-center">
                      <span>Creative Story Generator</span>
                      <Badge>Active</Badge>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground mb-4">
                      Generate engaging short stories with complex characters and plot twists.
                    </p>
                    <div className="flex justify-between items-center">
                      <span className="font-bold">0.1 ETH</span>
                      <div className="space-x-2">
                        <Button variant="outline" size="sm">
                          Edit
                        </Button>
                        <Button variant="destructive" size="sm">
                          Remove
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </main>
      <Footer />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/governance/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Clock, Check, X } from "lucide-react"

export default function GovernancePage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Navigation />
      <main className="flex-1 container py-8">
        <div className="max-w-4xl mx-auto">
          <div className="mb-8">
            <h1 className="text-3xl font-bold mb-2">DAO Governance</h1>
            <p className="text-muted-foreground">
              Participate in governance decisions and help shape the future of the marketplace.
            </p>
          </div>

<Tabs defaultValue="proposals">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="proposals">Active Proposals</TabsTrigger>
              <TabsTrigger value="disputes">Dispute Resolution</TabsTrigger>
            </TabsList>

<TabsContent value="proposals" className="mt-6">
              <div className="grid gap-6">
                <Card>
                  <CardHeader>
                    <div className="flex justify-between items-start">
                      <div>
                        <CardTitle>Reduce Marketplace Fees</CardTitle>
                        <p className="text-sm text-muted-foreground mt-2">
                          Proposal to reduce marketplace fees from 2.5% to 2%.
                        </p>
                      </div>
                      <Badge className="flex items-center gap-1">
                        <Clock className="h-3 w-3" />2 days left
                      </Badge>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex justify-between text-sm">
                        <span>Current Votes</span>
                        <span>75% Yes / 25% No</span>
                      </div>
                      <Progress value={75} />
                      <div className="flex gap-2">
                        <Button className="flex-1" variant="outline">
                          <Check className="mr-2 h-4 w-4" /> Vote Yes
                        </Button>
                        <Button className="flex-1" variant="outline">
                          <X className="mr-2 h-4 w-4" /> Vote No
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

<TabsContent value="disputes" className="mt-6">
              <div className="grid gap-6">
                <Card>
                  <CardHeader>
                    <div className="flex justify-between items-start">
                      <div>
                        <CardTitle>Dispute #123</CardTitle>
                        <p className="text-sm text-muted-foreground mt-2">
                          Buyer claims the prompt quality doesn't match the description.
                        </p>
                      </div>
                      <Badge variant="destructive">Active Dispute</Badge>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex justify-between text-sm">
                        <span>Resolution Votes</span>
                        <span>60% Refund / 40% Deny</span>
                      </div>
                      <Progress value={60} />
                    </div>
                  </CardContent>
                  <CardFooter className="flex gap-2">
                    <Button className="flex-1" variant="outline">
                      Vote Refund
                    </Button>
                    <Button className="flex-1" variant="outline">
                      Vote Deny
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </main>
      <Footer />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/profile/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { StarIcon, Wallet, History, Settings } from "lucide-react"

export default function ProfilePage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Navigation />
      <main className="flex-1 container py-8">
        <div className="max-w-4xl mx-auto">
          <div className="flex items-start gap-6 mb-8">
            <Avatar className="h-24 w-24">
              <AvatarImage src="/placeholder.svg" />
              <AvatarFallback>JD</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <h1 className="text-3xl font-bold">John.eth</h1>
              <p className="text-muted-foreground">Joined December 2023</p>
              <div className="flex items-center gap-2 mt-2">
                <StarIcon className="h-4 w-4 fill-yellow-500 text-yellow-500" />
                <span>4.9 Rating</span>
                <span className="text-muted-foreground">• 50 Reviews</span>
              </div>
            </div>
            <Button>Edit Profile</Button>
          </div>

<Tabs defaultValue="activity">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="activity">Activity</TabsTrigger>
              <TabsTrigger value="wallet">Wallet</TabsTrigger>
              <TabsTrigger value="settings">Settings</TabsTrigger>
            </TabsList>

<TabsContent value="activity" className="mt-6">
              <div className="grid gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <History className="h-5 w-5" />
                      Recent Activity
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {/* Activity Items */}
                      <div className="flex justify-between items-center py-2 border-b">
                        <div>
                          <p className="font-medium">Purchased "SEO Content Optimizer"</p>
                          <p className="text-sm text-muted-foreground">2 days ago</p>
                        </div>
                        <Badge>0.08 ETH</Badge>
                      </div>
                      <div className="flex justify-between items-center py-2 border-b">
                        <div>
                          <p className="font-medium">Sold "Creative Story Generator"</p>
                          <p className="text-sm text-muted-foreground">5 days ago</p>
                        </div>
                        <Badge>0.1 ETH</Badge>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

<TabsContent value="wallet" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Wallet className="h-5 w-5" />
                    Wallet Details
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    <div>
                      <p className="text-sm text-muted-foreground">Connected Wallet</p>
                      <p className="font-mono">0x1234...5678</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Balance</p>
                      <p className="text-2xl font-bold">2.5 ETH</p>
                    </div>
                    <Button className="w-full">Withdraw Funds</Button>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="settings" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Settings className="h-5 w-5" />
                    Account Settings
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <label className="text-sm font-medium">Display Name</label>
                      <input type="text" className="w-full mt-1 px-3 py-2 border rounded-md" defaultValue="John.eth" />
                    </div>
                    <div>
                      <label className="text-sm font-medium">Email Notifications</label>
                      <div className="mt-2 space-y-2">
                        <label className="flex items-center gap-2">
                          <input type="checkbox" defaultChecked />
                          <span>New prompt purchases</span>
                        </label>
                        <label className="flex items-center gap-2">
                          <input type="checkbox" defaultChecked />
                          <span>New reviews</span>
                        </label>
                      </div>
                    </div>
                    <Button>Save Changes</Button>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </main>
      <Footer />
    </div>
  )
}

[V0_FILE]typescript:file="lib/colors.ts" isFixed="true" isEdit="true" isQuickEdit="true"
export const colors = {
  primary: {
    50: "#f5f3ff",
    100: "#ede9fe",
    200: "#ddd6fe",
    300: "#c4b5fd",
    400: "#a78bfa",
    500: "#8b5cf6",
    600: "#7c3aed",
    700: "#6d28d9",
    800: "#5b21b6",
    900: "#4c1d95",
    950: "#2e1065",
  },
}

[V0_FILE]typescript:file="tailwind.config.js" isFixed="true" isEdit="true" isQuickEdit="true"
import { colors } from "./lib/colors"

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: colors.primary[600],
          foreground: "hsl(var(--primary-foreground))",
          ...colors.primary,
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import type React from "react" // Import React

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "AI Prompt Marketplace",
  description: "Buy and sell AI prompts securely on the blockchain",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 262.1 83.3% 57.8%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }

[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }

[V0_FILE]typescript:file="lib/utils.ts"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This