130 lines
5.1 KiB
TypeScript
130 lines
5.1 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useAuth } from "@/contexts/auth-context"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Heart, ExternalLink } from "lucide-react"
|
|
|
|
// Favorite apps data - empty for production
|
|
const mockFavoriteApps: any[] = []
|
|
|
|
export function FavoritesPage() {
|
|
const { user } = useAuth()
|
|
const [sortBy, setSortBy] = useState("name")
|
|
const [filterDepartment, setFilterDepartment] = useState("all")
|
|
|
|
const handleUseApp = (app: any) => {
|
|
// Open app in new tab
|
|
window.open(app.url, "_blank")
|
|
console.log(`Opening app: ${app.name}`)
|
|
}
|
|
|
|
const filteredAndSortedApps = mockFavoriteApps
|
|
.filter((app) => filterDepartment === "all" || app.department === filterDepartment)
|
|
.sort((a, b) => {
|
|
switch (sortBy) {
|
|
case "name":
|
|
return a.name.localeCompare(b.name)
|
|
case "creator":
|
|
return a.creator.localeCompare(b.creator)
|
|
case "department":
|
|
return a.department.localeCompare(b.department)
|
|
default:
|
|
return 0
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Filter and Sort Controls */}
|
|
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
|
|
<div className="flex gap-3">
|
|
<Select value={sortBy} onValueChange={setSortBy}>
|
|
<SelectTrigger className="w-32">
|
|
<SelectValue placeholder="排序方式" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="name">名稱</SelectItem>
|
|
<SelectItem value="creator">開發者</SelectItem>
|
|
<SelectItem value="department">部門</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={filterDepartment} onValueChange={setFilterDepartment}>
|
|
<SelectTrigger className="w-32">
|
|
<SelectValue placeholder="部門篩選" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部部門</SelectItem>
|
|
<SelectItem value="HQBU">HQBU</SelectItem>
|
|
<SelectItem value="ITBU">ITBU</SelectItem>
|
|
<SelectItem value="MBU1">MBU1</SelectItem>
|
|
<SelectItem value="SBU">SBU</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="text-sm text-gray-500">共 {filteredAndSortedApps.length} 個收藏應用</div>
|
|
</div>
|
|
|
|
{/* Favorites Grid */}
|
|
{filteredAndSortedApps.length > 0 ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredAndSortedApps.map((app) => (
|
|
<Card key={app.id} className="h-full flex flex-col hover:shadow-lg transition-shadow">
|
|
<CardContent className="p-6 flex flex-col h-full">
|
|
{/* Header with heart icon */}
|
|
<div className="flex items-start justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-gray-900 flex-1 pr-2">{app.name}</h3>
|
|
<Heart className="w-5 h-5 text-red-500 fill-current flex-shrink-0" />
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p className="text-gray-600 text-sm mb-4 line-clamp-2 flex-grow">{app.description}</p>
|
|
|
|
{/* Developer and Department */}
|
|
<div className="flex items-center justify-between mb-4">
|
|
<span className="text-sm text-gray-700">開發者: {app.creator}</span>
|
|
<Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-200">
|
|
{app.department}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
<div className="flex flex-wrap gap-2 mb-6 flex-grow">
|
|
{app.tags.map((tag, index) => (
|
|
<Badge key={index} variant="secondary" className="text-xs">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
{/* Action Button */}
|
|
<div className="mt-auto flex-shrink-0">
|
|
<Button className="w-full bg-black hover:bg-gray-800 text-white" onClick={() => handleUseApp(app)}>
|
|
<ExternalLink className="w-4 h-4 mr-2" />
|
|
使用應用
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12">
|
|
<Heart className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-xl font-semibold text-gray-600 mb-2">暫無收藏應用</h3>
|
|
<p className="text-gray-500">
|
|
{filterDepartment !== "all"
|
|
? "該部門暫無收藏的應用，請嘗試其他篩選條件"
|
|
: "您還沒有收藏任何應用，快去探索並收藏您喜歡的 AI 應用吧！"}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|