feat: complete frontend UI - comparison views, profile, explore, layout
This commit is contained in:
Christopher Mayor
216
src/app/(main)/explore/page.tsx
Normal file
216
src/app/(main)/explore/page.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Search, Eye, BarChart3, Filter, X, Loader2 } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
const allComparisons = [
|
||||
{
|
||||
id: "1",
|
||||
title: "React vs Vue vs Svelte",
|
||||
description: "Frontend framework comparison for modern web development",
|
||||
items: ["React", "Vue", "Svelte"],
|
||||
tags: ["Tech", "JavaScript"],
|
||||
author: "Alex Johnson",
|
||||
overallScore: 8.5,
|
||||
views: 1247,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "GPT-4 vs Claude vs Gemini",
|
||||
description: "Comparing top AI language models for reasoning tasks",
|
||||
items: ["GPT-4", "Claude 3", "Gemini Pro"],
|
||||
tags: ["AI", "Products"],
|
||||
author: "Sarah Chen",
|
||||
overallScore: 8.8,
|
||||
views: 3891,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Notion vs Obsidian vs Roam",
|
||||
description: "Knowledge management tools for productivity",
|
||||
items: ["Notion", "Obsidian", "Roam Research"],
|
||||
tags: ["Productivity", "Tools"],
|
||||
author: "Mike Peters",
|
||||
overallScore: 7.5,
|
||||
views: 892,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "AWS vs GCP vs Azure",
|
||||
description: "Cloud platform comparison for enterprise infrastructure",
|
||||
items: ["AWS", "Google Cloud", "Microsoft Azure"],
|
||||
tags: ["Tech", "Cloud"],
|
||||
author: "Emma Wilson",
|
||||
overallScore: 9.0,
|
||||
views: 2156,
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "iPhone 15 Pro vs Samsung S24 Ultra",
|
||||
description: "Flagship smartphone comparison with camera and performance benchmarks",
|
||||
items: ["iPhone 15 Pro", "Samsung S24 Ultra"],
|
||||
tags: ["Products", "Mobile"],
|
||||
author: "James Lee",
|
||||
overallScore: 8.2,
|
||||
views: 3421,
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Python vs Rust vs Go",
|
||||
description: "Systems programming languages compared for performance and productivity",
|
||||
items: ["Python", "Rust", "Go"],
|
||||
tags: ["Tech", "Programming"],
|
||||
author: "Anna Kim",
|
||||
overallScore: 8.4,
|
||||
views: 1873,
|
||||
},
|
||||
]
|
||||
|
||||
const categories = ["All", "Tech", "Products", "AI", "Cloud", "Productivity"]
|
||||
|
||||
export default function ExplorePage() {
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [selectedCategory, setSelectedCategory] = useState("All")
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const filteredComparisons = allComparisons.filter((comparison) => {
|
||||
const matchesSearch =
|
||||
searchQuery === "" ||
|
||||
comparison.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
comparison.items.some((item) =>
|
||||
item.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
const matchesCategory =
|
||||
selectedCategory === "All" ||
|
||||
comparison.tags.some((tag) => tag.toLowerCase() === selectedCategory.toLowerCase())
|
||||
return matchesSearch && matchesCategory
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-4 sm:p-6 space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold">Explore Comparisons</h1>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search comparisons..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((category) => (
|
||||
<Button
|
||||
key={category}
|
||||
variant={selectedCategory === category ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className="rounded-full"
|
||||
>
|
||||
{category}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="size-8 animate-spin text-primary" />
|
||||
</div>
|
||||
) : filteredComparisons.length > 0 ? (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredComparisons.map((comparison) => (
|
||||
<Link key={comparison.id} href={`/compare/${comparison.id}`}>
|
||||
<Card className="h-full transition-all hover:border-primary hover:shadow-md">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<CardTitle className="text-base line-clamp-1 flex-1">
|
||||
{comparison.title}
|
||||
</CardTitle>
|
||||
</div>
|
||||
<CardDescription className="text-sm line-clamp-2">
|
||||
{comparison.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{comparison.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Avatar className="size-6">
|
||||
<AvatarFallback className="text-[10px]">
|
||||
{comparison.author.split(" ").map((n) => n[0]).join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-xs">{comparison.author}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{comparison.items.join(" vs ")}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="flex items-center gap-1 text-muted-foreground">
|
||||
<Eye className="size-3.5" />
|
||||
{comparison.views.toLocaleString()}
|
||||
</span>
|
||||
<span className="font-semibold text-foreground bg-primary/10 px-2 py-0.5 rounded">
|
||||
{comparison.overallScore}/10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card className="p-8 text-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="size-12 rounded-full bg-muted flex items-center justify-center">
|
||||
<Search className="size-6 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">No comparisons found</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Try adjusting your search or filters
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setSearchQuery("")
|
||||
setSelectedCategory("All")
|
||||
}}
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button variant="outline" className="gap-2">
|
||||
Load More
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user