Skip to content

Commit

Permalink
ip templates ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@salvadorcamino
salvadorcamino committed Oct 17, 2024
1 parent 69ea06d commit 3f05d55
Show file tree
Hide file tree
Showing 18 changed files with 3,006 additions and 56 deletions.
50 changes: 50 additions & 0 deletions packages/nextjs/app/empty/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
"use client";

import type { NextPage } from "next";
import { useAccount } from "@starknet-react/core";
import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
import { useScaffoldReadContract } from "~~/hooks/scaffold-stark/useScaffoldReadContract";
import { useScaffoldWriteContract } from "~~/hooks/scaffold-stark/useScaffoldWriteContract";
import { notification } from "~~/utils/scaffold-stark";
import { useState } from "react";

import Image from 'next/image'
import Link from 'next/link'
import { ArrowLeft, Plus, LinkIcon, ArrowRight, DollarSign, Shield, Globe, Clock, File, Users, Activity } from 'lucide-react'







const trending: NextPage = () => {
const { address: connectedAddress, isConnected, isConnecting } = useAccount();


return (
<>


<div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8">

{!isConnected || isConnecting ? (
<CustomConnectButton />
) : (


<div className="max-w-6xl mx-auto">


</div>


)}


</div>
</>
);
};

export default trending;
30 changes: 15 additions & 15 deletions packages/nextjs/app/marketIP/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useState } from "react";

import Image from 'next/image'
import Link from 'next/link'
import { Shield, Award, Clock, User, DollarSign, Heart } from 'lucide-react'
import { Shield, Award, Clock, User, DollarSign, Heart, Share } from 'lucide-react'

interface IPPageProps {
params: {
Expand Down Expand Up @@ -73,17 +73,17 @@ const marketIP: NextPage = () => {
<div className="mb-6">
<Image src={ip.image} alt={ip.title} width={800} height={400} className="w-full h-96 object-cover rounded-lg" />
</div>
<div className="bg-base-100 p-6 rounded-lg shadow-md mb-6">
<div className="bg-base-300 p-6 rounded-lg shadow-md mb-6">
<h2 className="text-2xl font-semibold mb-4">Description</h2>
<p className="bg-base-100 mb-4">{ip.description}</p>
<p className="bg-base-300 mb-4">{ip.description}</p>
<h3 className="text-xl font-semibold mb-2">Key Features</h3>
<ul className="list-disc list-inside bg-base-100">
<ul className="list-disc list-inside bg-base-300">
{ip.features.map((feature, index) => (
<li key={index}>{feature}</li>
))}
</ul>
</div>
<div className="bg-base-100 p-6 rounded-lg shadow-md mb-6">
<div className="bg-base-300 p-6 rounded-lg shadow-md mb-6">
<h2 className="text-2xl font-semibold mb-4">Blockchain Benefits</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-start">
Expand Down Expand Up @@ -118,7 +118,7 @@ const marketIP: NextPage = () => {
</div>
</div>
<div className="md:col-span-1">
<div className="bg-base-100 p-6 rounded-lg shadow-md mb-6">
<div className="bg-base-300 p-6 rounded-lg shadow-md mb-6">
<div className="flex justify-between items-center mb-4">
<p className="">Current Price</p>
<p className="text-3xl font-bold text-blue-600">{ip.price} ETH</p>
Expand All @@ -131,35 +131,35 @@ const marketIP: NextPage = () => {
value={bidAmount}
onChange={(e) => setBidAmount(e.target.value)}
placeholder="Enter bid amount"
className="flex-grow p-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
className="flex-grow p-2 input rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<span className="bg-gray-100 p-2 border border-l-0 rounded-r-md">ETH</span>
<span className="bg-base-200 p-2 rounded-r-md">ETH</span>
</div>
<button type="submit" className="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
<button type="submit" className="w-full bg-primary font-bold py-2 px-4 rounded">
Place Bid
</button>
</form>
<button className="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded mb-4">
<button className="w-full bg-blue-700 hover:bg-blue-600 text-white font-bold py-4 px-4 rounded mb-4">
Buy Now
</button>
<button className="w-full border border-gray-300 bg-base-100 font-bold py-2 px-4 rounded flex items-center justify-center">
<Heart className="mr-2" /> Add to Favorites
<button className="w-full border border-gray-300 bg-base-300 font-bold py-2 px-4 rounded flex items-center justify-center">
<Share className="mr-2" /> Share IP
</button>
</div>
<div className="bg-base-100 p-6 rounded-lg shadow-md mb-6">
<div className="bg-base-300 p-6 rounded-lg shadow-md mb-6">
<h2 className="text-xl font-semibold mb-4">Creator Information</h2>
<p><strong>Creator:</strong> {ip.creator}</p>
<p><strong>Creation Date:</strong> {ip.creationDate}</p>
<p><strong>Last Updated:</strong> {ip.lastUpdated}</p>
<p><strong>License:</strong> {ip.license}</p>
</div>
<div className="bg-base-100 p-6 rounded-lg shadow-md mb-6">
<div className="bg-base-300 p-6 rounded-lg shadow-md mb-6">
<h2 className="text-xl font-semibold mb-4">IP Statistics</h2>
<p><strong>Views:</strong> {ip.views}</p>
<p><strong>Favorites:</strong> {ip.favorites}</p>
<p><strong>Active Bids:</strong> {ip.bids.length}</p>
</div>
<div className="bg-base-100 p-6 rounded-lg shadow-md">
<div className="bg-base-300 p-6 rounded-lg shadow-md">
<h2 className="text-xl font-semibold mb-4">Recent Bids</h2>
{ip.bids.map((bid, index) => (
<div key={index} className="flex justify-between items-center mb-2">
Expand Down
36 changes: 18 additions & 18 deletions packages/nextjs/app/marketplace/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,11 +183,11 @@ const marketplace: NextPage = () => {


<div className="max-w-7xl mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-8">IP Marketplace</h1>
<h1 className="text-3xl font-bold">IP Marketplace</h1>


<div>
<h2 className="mb-8">Categories</h2>
<h2 className="mb-8 text-2xl">Categories</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{categoriesIP.map((category) => (
<Link key={category.id} href={`/marketplace?category=${category.name}`} className="block">
Expand All @@ -201,10 +201,10 @@ const marketplace: NextPage = () => {
</div>

<div></div>
<hr className="mt-10 mb-5"></hr>



<h2 className="text-3xl font-bold mb-8">Listings</h2>
<h2 className="text-3xl font-bold mt-20 mb-8">Listings</h2>


{/* Search and Filters */}
Expand All @@ -214,7 +214,7 @@ const marketplace: NextPage = () => {
<input
type="text"
placeholder="Search for IP..."
className="w-full pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full pl-10 pr-4 py-2 input rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<Search className="absolute left-3 top-2.5 text-gray-400" />
</div>
Expand All @@ -224,7 +224,7 @@ const marketplace: NextPage = () => {
<select
value={categoryFilter}
onChange={(e) => setCategoryFilter(e.target.value)}
className="appearance-none bg-base-100 border rounded-md pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="appearance-none bg-base-100 input rounded-md pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
{categories.map((category) => (
<option key={category} value={category.toLowerCase()}>{category}</option>
Expand All @@ -236,7 +236,7 @@ const marketplace: NextPage = () => {
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
className="appearance-none bg-base-100 border rounded-md pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="appearance-none bg-base-100 input rounded-md pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="newest">Newest</option>
<option value="price-low-high">Price: Low to High</option>
Expand Down Expand Up @@ -267,15 +267,15 @@ const marketplace: NextPage = () => {
<p className="text-gray-600 mb-4">{listing.description}</p>
<div className="flex items-center mb-4">
<Image src={listing.creatorAvatar} alt={listing.creator} width={32} height={32} className="rounded-full mr-2" />
<span className="text-sm text-gray-500">{listing.creator}</span>
<span className="text-sm text-neutral">{listing.creator}</span>
</div>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center">
<Star className="w-5 h-5 text-yellow-400 mr-1" />
<span className="font-semibold">{listing.rating}</span>
<span className="text-gray-500 ml-1">({listing.reviews} reviews)</span>
<span className="text-neutral ml-1">({listing.reviews} reviews)</span>
</div>
<div className="flex items-center text-gray-500 space-x-4">
<div className="flex items-center text-neutral space-x-4">
<div className="flex items-center">
<Eye className="w-4 h-4 mr-1" />
<span>{listing.views}</span>
Expand All @@ -291,10 +291,10 @@ const marketplace: NextPage = () => {
{listing.price} {listing.currency}
</div>
<div className="flex space-x-2">
<button className="p-2 text-gray-500 hover:text-blue-500 focus:outline-none">
<button className="p-2 text-neutral hover:text-blue-500 focus:outline-none">
<Heart />
</button>
<button className="p-2 text-gray-500 hover:text-blue-500 focus:outline-none">
<button className="p-2 text-neutral hover:text-blue-500 focus:outline-none">
<Share2 />
</button>
<Link href={`/marketIP`} className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Expand All @@ -310,30 +310,30 @@ const marketplace: NextPage = () => {
{/* Pagination */}
<div className="mt-8 flex justify-center">
<nav className="inline-flex rounded-md shadow">
<a href="#" className="px-3 py-2 rounded-l-md border bg-base-100 text-gray-500 hover:bg-gray-50">
<a href="#" className="px-3 py-2 rounded-l-md border bg-base-100 text-neutral hover:bg-gray-50">
Previous
</a>
<a href="#" className="px-3 py-2 border-t border-b bg-base-100 text-blue-600 font-medium">
1
</a>
<a href="#" className="px-3 py-2 border-t border-b bg-base-100 text-gray-500 hover:bg-gray-50">
<a href="#" className="px-3 py-2 border-t border-b bg-base-100 text-neutral hover:bg-gray-50">
2
</a>
<a href="#" className="px-3 py-2 border-t border-b bg-base-100 text-gray-500 hover:bg-gray-50">
<a href="#" className="px-3 py-2 border-t border-b bg-base-100 text-neutral hover:bg-gray-50">
3
</a>
<a href="#" className="px-3 py-2 rounded-r-md border bg-base-100 text-gray-500 hover:bg-gray-50">
<a href="#" className="px-3 py-2 rounded-r-md border bg-base-100 text-neutral hover:bg-gray-50">
Next
</a>
</nav>
</div>


<div className="my-10"><hr></hr></div>
<div className="mt-20"></div>


<div>
<h1 className="text-4xl font-bold mb-8">Featured Collections</h1>
<h2 className="text-3xl font-bold mb-8">Featured Collections</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{collections.map((collection) => (
<Link key={collection.id} href={`/collections/${collection.id}`} className="block">
Expand Down
Loading

0 comments on commit 3f05d55

Please sign in to comment.