Skip to content

Commit c6b3339

Browse files
edwardysunedwardysun
committed
Biz hackweek - Project Showcase
1 parent 50f98d7 commit c6b3339

File tree

2 files changed

+206
-0
lines changed

2 files changed

+206
-0
lines changed

‎apps/dashboard/src/lib/project-showcase-constants.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// TODO: Move to database later
2+
3+
export const PROJECT_SHOWCASE_DATA = [
4+
{
5+
id: 1,
6+
title: "AI-Powered Personal Assistant",
7+
description: "An advanced AI assistant that helps with task management, scheduling, and information retrieval.",
8+
image: "/placeholder.svg?height=200&width=300",
9+
industry: "Consumer Apps",
10+
},
11+
{
12+
id: 2,
13+
title: "Blockchain-based Supply Chain",
14+
description: "A decentralized supply chain management system built on blockchain technology for enhanced transparency and traceability.",
15+
image: "/placeholder.svg?height=200&width=300",
16+
industry: "Enterprise",
17+
},
18+
{
19+
id: 3,
20+
title: "Decentralized Finance Platform",
21+
description: "A comprehensive DeFi platform offering lending, borrowing, and yield farming services on multiple blockchains.",
22+
image: "/placeholder.svg?height=200&width=300",
23+
industry: "Decentralized Finance",
24+
},
25+
{
26+
id: 4,
27+
title: "NFT Marketplace",
28+
description: "A user-friendly marketplace for creating, buying, and selling unique digital assets across various blockchain networks.",
29+
image: "/placeholder.svg?height=200&width=300",
30+
industry: "Mints",
31+
},
32+
{
33+
id: 5,
34+
title: "E-commerce Platform",
35+
description: "A full-stack e-commerce solution with real-time inventory management.",
36+
image: "/placeholder.svg?height=200&width=300",
37+
industry: "Fashion",
38+
},
39+
{
40+
id: 6,
41+
title: "Weather App",
42+
description: "A responsive weather application with 5-day forecasts and location-based services.",
43+
image: "/placeholder.svg?height=200&width=300",
44+
industry: "Consumer Apps",
45+
},
46+
{
47+
id: 7,
48+
title: "Task Management System",
49+
description: "A collaborative task management tool with real-time updates and team features.",
50+
image: "/placeholder.svg?height=200&width=300",
51+
industry: "Enterprise",
52+
},
53+
{
54+
id: 8,
55+
title: "Portfolio Website",
56+
description: "A personal portfolio website showcasing projects and skills.",
57+
image: "/placeholder.svg?height=200&width=300",
58+
industry: "Consumer Apps",
59+
},
60+
{
61+
id: 9,
62+
title: "Social Media Analytics Dashboard",
63+
description: "A comprehensive dashboard for tracking and analyzing social media performance across multiple platforms.",
64+
image: "/placeholder.svg?height=200&width=300",
65+
industry: "Enterprise",
66+
},
67+
{
68+
id: 10,
69+
title: "Augmented Reality Game",
70+
description: "An innovative AR game that blends the real world with virtual elements for an immersive gaming experience.",
71+
image: "/placeholder.svg?height=200&width=300",
72+
industry: "Games",
73+
},
74+
]
75+
76+
export const PROJECT_SHOWCASE_INDUSTRIES = ["All", "Games", "Fashion", "Social", "Mints", "Decentralized Finance", "Education", "DAOs", "Real World Assets"]
77+
78+
export const PROJECT_SHOWCASE_ITEMS_PER_PAGE = 6

‎apps/dashboard/src/pages/project-showcase.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
"use client"
2+
3+
import { useState } from "react"
4+
import { Button } from "@/components/ui/button"
5+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
6+
import { Badge } from "@/components/ui/badge"
7+
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"
8+
import { ArrowRight } from "lucide-react"
9+
import Image from "next/image"
10+
import { PROJECT_SHOWCASE_DATA, PROJECT_SHOWCASE_INDUSTRIES, PROJECT_SHOWCASE_ITEMS_PER_PAGE } from "../lib/project-showcase-constants"
11+
12+
export default function ProjectShowcase() {
13+
const [selectedIndustry, setSelectedIndustry] = useState("All")
14+
const [currentPage, setCurrentPage] = useState(1)
15+
16+
const filteredProjects = selectedIndustry === "All"
17+
? PROJECT_SHOWCASE_DATA
18+
: PROJECT_SHOWCASE_DATA.filter(project => project.industry === selectedIndustry)
19+
20+
const totalPages = Math.ceil(filteredProjects.length / PROJECT_SHOWCASE_ITEMS_PER_PAGE)
21+
const paginatedProjects = filteredProjects.slice(
22+
(currentPage - 1) * PROJECT_SHOWCASE_ITEMS_PER_PAGE,
23+
currentPage * PROJECT_SHOWCASE_ITEMS_PER_PAGE
24+
)
25+
26+
return (
27+
<div className="min-h-screen bg-background">
28+
<header className="py-12 px-4 md:px-6 text-center">
29+
<h1 className="text-4xl font-bold mb-4">built on thirdweb</h1>
30+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
31+
Discover the latest web3 apps and games built on thirdweb.
32+
</p>
33+
<div className="flex justify-center gap-4">
34+
<Button size="lg">
35+
Start building
36+
<ArrowRight className="ml-2 h-4 w-4" />
37+
</Button>
38+
<Button size="lg" variant="outline">
39+
Contact Us
40+
</Button>
41+
</div>
42+
</header>
43+
<main className="container mx-auto px-4 md:px-6 py-12">
44+
<section>
45+
<div className="mb-8">
46+
<div className="flex flex-wrap justify-center gap-2 mb-8">
47+
{PROJECT_SHOWCASE_INDUSTRIES.map(industry => (
48+
<Button
49+
key={industry}
50+
variant={selectedIndustry === industry ? "default" : "outline"}
51+
onClick={() => {
52+
setSelectedIndustry(industry)
53+
setCurrentPage(1)
54+
}}
55+
>
56+
{industry}
57+
</Button>
58+
))}
59+
</div>
60+
</div>
61+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
62+
{paginatedProjects.map((project) => (
63+
<Card key={project.id} className="flex flex-col overflow-hidden transition-shadow hover:shadow-lg">
64+
<Image
65+
src={project.image}
66+
alt={project.title}
67+
width={300}
68+
height={200}
69+
className="object-cover w-full h-48"
70+
/>
71+
<CardHeader>
72+
<CardTitle>{project.title}</CardTitle>
73+
<CardDescription>{project.description}</CardDescription>
74+
</CardHeader>
75+
<CardContent className="flex-grow">
76+
<Badge variant="secondary">{project.industry}</Badge>
77+
</CardContent>
78+
</Card>
79+
))}
80+
</div>
81+
<div className="mt-8 flex flex-col items-center">
82+
<div className="text-sm text-muted-foreground mb-4">
83+
Showing {paginatedProjects.length} of {filteredProjects.length} projects in {selectedIndustry === "All" ? "all categories" : selectedIndustry}
84+
</div>
85+
<Pagination>
86+
<PaginationContent>
87+
<PaginationItem>
88+
<PaginationPrevious
89+
href="#"
90+
onClick={(e) => {
91+
e.preventDefault()
92+
setCurrentPage(prev => Math.max(prev - 1, 1))
93+
}}
94+
className={currentPage === 1 ? 'pointer-events-none opacity-50' : ''}
95+
/>
96+
</PaginationItem>
97+
{[...Array(totalPages)].map((_, i) => (
98+
<PaginationItem key={i}>
99+
<PaginationLink
100+
href="#"
101+
onClick={(e) => {
102+
e.preventDefault()
103+
setCurrentPage(i + 1)
104+
}}
105+
isActive={currentPage === i + 1}
106+
>
107+
{i + 1}
108+
</PaginationLink>
109+
</PaginationItem>
110+
))}
111+
<PaginationItem>
112+
<PaginationNext
113+
href="#"
114+
onClick={(e) => {
115+
e.preventDefault()
116+
setCurrentPage(prev => Math.min(prev + 1, totalPages))
117+
}}
118+
className={currentPage === totalPages ? 'pointer-events-none opacity-50' : ''}
119+
/>
120+
</PaginationItem>
121+
</PaginationContent>
122+
</Pagination>
123+
</div>
124+
</section>
125+
</main>
126+
</div>
127+
)
128+
}

0 commit comments

Comments
 (0)