698 lines
38 KiB
TypeScript
698 lines
38 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import Image from "next/image"
|
||
import { useRouter } from "next/navigation"
|
||
import { AnimatePresence, motion } from "motion/react"
|
||
import { useSession } from "@/lib/auth-client"
|
||
import type { GameSettingCategory } from "@/lib/db/schema/performanceEntries"
|
||
import {
|
||
ThumbsUpIcon,
|
||
ThumbsDownIcon,
|
||
FlagIcon,
|
||
TrashIcon,
|
||
ChevronLeftIcon,
|
||
ChevronRightIcon,
|
||
ShieldCheckIcon,
|
||
XIcon,
|
||
UserIcon,
|
||
ShareIcon,
|
||
PencilIcon,
|
||
} from "lucide-react"
|
||
import { TiptapRenderer } from "@/components/tiptap-renderer"
|
||
|
||
interface Preset {
|
||
id: string
|
||
gameId?: string
|
||
hardwareSlug: string
|
||
hardwareName: string
|
||
upvotes: number
|
||
downvotes: number
|
||
settingsJson: GameSettingCategory[] | null
|
||
settingsCount: number
|
||
fpsAvg: number | null
|
||
fpsLow: number | null
|
||
fpsHigh: number | null
|
||
fpsOnePercentLow: number | null
|
||
upscalerType: string | null
|
||
upscalerVersion: string | null
|
||
frameGenMethod: string | null
|
||
protonVersion: string | null
|
||
osVersion: string | null
|
||
launchOptions: string | null
|
||
loadTimeSsd: number | null
|
||
loadTimeSd: number | null
|
||
tdpWatts: number | null
|
||
youtubeVideoId: string | null
|
||
screenshots: Array<{ id: string; url: string; width: number; height: number }> | null
|
||
hardwareWattHours: number | null
|
||
hardwareDeviceType: string | null
|
||
customSystem: boolean
|
||
userNotes: string | null
|
||
userId: string
|
||
userName: string | null
|
||
userImage: string | null
|
||
verifiedAt: string | null
|
||
isPinned: boolean
|
||
pinnedAt: string | null
|
||
createdAt: string
|
||
}
|
||
|
||
interface PresetDetailModalProps {
|
||
preset: Preset
|
||
gameId: string
|
||
onClose: () => void
|
||
onDelete: (presetId: string) => void
|
||
onReport: (
|
||
presetId: string,
|
||
reason: "inaccurate" | "spam" | "inappropriate" | "other",
|
||
details?: string,
|
||
) => void
|
||
hasReported: boolean
|
||
}
|
||
|
||
function formatDate(value: string | null): string {
|
||
if (!value) return "—"
|
||
return new Date(value).toLocaleDateString()
|
||
}
|
||
|
||
function formatValue(value: string | number | boolean): string {
|
||
if (typeof value === "boolean") return value ? "On" : "Off"
|
||
return String(value)
|
||
}
|
||
|
||
export function PresetDetailModal({
|
||
preset,
|
||
gameId,
|
||
onClose,
|
||
onDelete,
|
||
onReport,
|
||
hasReported,
|
||
}: PresetDetailModalProps) {
|
||
const router = useRouter()
|
||
const { data: session } = useSession()
|
||
|
||
const [activeCategoryIndex, setActiveCategoryIndex] = useState(0)
|
||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
||
const [showReportForm, setShowReportForm] = useState(false)
|
||
const [reportReason, setReportReason] = useState<
|
||
"inaccurate" | "spam" | "inappropriate" | "other"
|
||
>("inaccurate")
|
||
const [reportDetails, setReportDetails] = useState("")
|
||
const [copied, setCopied] = useState(false)
|
||
|
||
const [userVote, setUserVote] = useState<"up" | "down" | null>(null)
|
||
const [localUpvotes, setLocalUpvotes] = useState(preset.upvotes)
|
||
const [localDownvotes, setLocalDownvotes] = useState(preset.downvotes)
|
||
const [mobileTab, setMobileTab] = useState<"details" | "settings">("settings")
|
||
|
||
const isOwner = session?.user?.id === preset.userId
|
||
const isAdmin = session?.user?.role === "admin"
|
||
const isAuthenticated = !!session?.user
|
||
|
||
const handleShare = () => {
|
||
const url = `${window.location.origin}/game/${gameId}?preset=${preset.id}`
|
||
navigator.clipboard.writeText(url)
|
||
setCopied(true)
|
||
setTimeout(() => setCopied(false), 2000)
|
||
}
|
||
|
||
const categories = preset.settingsJson ?? []
|
||
const hasCategories = categories.length > 0
|
||
const currentCategory = hasCategories ? categories[activeCategoryIndex] : null
|
||
|
||
const goPrevCategory = () => {
|
||
setActiveCategoryIndex((prev) => (prev > 0 ? prev - 1 : categories.length - 1))
|
||
}
|
||
|
||
const goNextCategory = () => {
|
||
setActiveCategoryIndex((prev) => (prev < categories.length - 1 ? prev + 1 : 0))
|
||
}
|
||
|
||
const handleUpvote = async () => {
|
||
if (!isAuthenticated || userVote === "up") return
|
||
try {
|
||
const res = await fetch(`/api/performance/${preset.id}/upvote`, { method: "POST" })
|
||
if (res.ok) {
|
||
if (userVote === "down") setLocalDownvotes((d) => d - 1)
|
||
setLocalUpvotes((u) => u + 1)
|
||
setUserVote("up")
|
||
}
|
||
} catch (err) {
|
||
console.error("Failed to upvote:", err)
|
||
}
|
||
}
|
||
|
||
const handleDownvote = async () => {
|
||
if (!isAuthenticated || userVote === "down") return
|
||
try {
|
||
const res = await fetch(`/api/performance/${preset.id}/downvote`, { method: "POST" })
|
||
if (res.ok) {
|
||
if (userVote === "up") setLocalUpvotes((u) => u - 1)
|
||
setLocalDownvotes((d) => d + 1)
|
||
setUserVote("down")
|
||
}
|
||
} catch (err) {
|
||
console.error("Failed to downvote:", err)
|
||
}
|
||
}
|
||
|
||
const handleReportSubmit = () => {
|
||
onReport(
|
||
preset.id,
|
||
reportReason,
|
||
reportDetails.trim() || undefined,
|
||
)
|
||
setShowReportForm(false)
|
||
setReportDetails("")
|
||
}
|
||
|
||
const handleTogglePin = async () => {
|
||
const method = preset.isPinned ? "DELETE" : "POST"
|
||
try {
|
||
const res = await fetch(`/api/performance/${preset.id}/pin`, { method })
|
||
if (res.ok) {
|
||
router.refresh()
|
||
}
|
||
} catch (err) {
|
||
console.error("Failed to toggle pin:", err)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<AnimatePresence>
|
||
<>
|
||
{/* Backdrop */}
|
||
<motion.div
|
||
key="backdrop"
|
||
className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
onClick={onClose}
|
||
/>
|
||
|
||
{/* Modal container */}
|
||
<motion.div
|
||
key="modal"
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
onClick={onClose}
|
||
>
|
||
{/* Modal card */}
|
||
<motion.div
|
||
className="relative w-full max-w-4xl h-[90vh] md:max-h-[90vh] overflow-hidden rounded-xl border border-border bg-background flex flex-col"
|
||
initial={{ y: "100%", opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
exit={{ y: "100%", opacity: 0 }}
|
||
transition={{
|
||
type: "spring",
|
||
damping: 30,
|
||
stiffness: 300,
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-start justify-between p-5 border-b border-border shrink-0">
|
||
<div className="flex items-center gap-3 min-w-0">
|
||
<h2 className="text-base font-semibold text-text truncate">
|
||
{preset.hardwareName}
|
||
</h2>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer shrink-0"
|
||
aria-label="Close"
|
||
>
|
||
<XIcon className="h-4 w-4 text-text/50" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Mobile tabs */}
|
||
<div className="flex md:hidden shrink-0 border-b border-border">
|
||
<button
|
||
onClick={() => setMobileTab("details")}
|
||
className={`flex-1 py-2.5 text-sm font-medium transition-colors cursor-pointer ${
|
||
mobileTab === "details"
|
||
? "text-primary border-b-2 border-primary"
|
||
: "text-text/50 hover:text-text/70"
|
||
}`}
|
||
>
|
||
Details
|
||
</button>
|
||
<button
|
||
onClick={() => setMobileTab("settings")}
|
||
className={`flex-1 py-2.5 text-sm font-medium transition-colors cursor-pointer ${
|
||
mobileTab === "settings"
|
||
? "text-primary border-b-2 border-primary"
|
||
: "text-text/50 hover:text-text/70"
|
||
}`}
|
||
>
|
||
Settings
|
||
</button>
|
||
</div>
|
||
|
||
{/* Two-column body */}
|
||
<div className="flex flex-col md:flex-row overflow-hidden flex-1">
|
||
{/* Left panel */}
|
||
<div className={`w-full md:w-1/3 md:min-w-60 flex-col gap-3 md:gap-4 p-4 md:p-5 border-b md:border-b-0 md:border-r border-border overflow-y-auto ${
|
||
mobileTab === "details" ? "flex" : "hidden md:flex"
|
||
}`}>
|
||
{/* User info */}
|
||
<div className="flex items-center gap-3">
|
||
<div className="h-10 w-10 rounded-full bg-text/10 overflow-hidden flex items-center justify-center shrink-0">
|
||
{preset.userImage ? (
|
||
<Image
|
||
src={preset.userImage}
|
||
alt={preset.userName || "User"}
|
||
width={40}
|
||
height={40}
|
||
className="object-cover"
|
||
/>
|
||
) : (
|
||
<UserIcon className="h-5 w-5 text-text/50" />
|
||
)}
|
||
</div>
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-medium text-sm text-text truncate">
|
||
{preset.userName || "Anonymous"}
|
||
</span>
|
||
{preset.verifiedAt && (
|
||
<span
|
||
className="inline-flex items-center gap-0.5 text-green-400"
|
||
title="Verified"
|
||
>
|
||
<ShieldCheckIcon className="h-3.5 w-3.5" />
|
||
</span>
|
||
)}
|
||
</div>
|
||
<span className="text-xs text-text/50">
|
||
{formatDate(preset.createdAt)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="h-px bg-border" />
|
||
|
||
{/* Actions */}
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{isAdmin && (
|
||
<button
|
||
onClick={handleTogglePin}
|
||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border border-yellow-500/20 hover:bg-yellow-500/10 text-yellow-400 transition-colors cursor-pointer"
|
||
>
|
||
📌 {preset.isPinned ? 'Unpin' : 'Pin'}
|
||
</button>
|
||
)}
|
||
{(isOwner || isAdmin) && (
|
||
<>
|
||
{!showDeleteConfirm ? (
|
||
<button
|
||
onClick={() => setShowDeleteConfirm(true)}
|
||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer"
|
||
>
|
||
<TrashIcon className="h-4 w-4" />
|
||
Delete
|
||
</button>
|
||
) : (
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs text-text/50">
|
||
Are you sure?
|
||
</span>
|
||
<button
|
||
onClick={() => {
|
||
onDelete(preset.id)
|
||
setShowDeleteConfirm(false)
|
||
}}
|
||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer"
|
||
>
|
||
Confirm
|
||
</button>
|
||
<button
|
||
onClick={() => setShowDeleteConfirm(false)}
|
||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{(isOwner || isAdmin) && (
|
||
<button
|
||
onClick={() => router.push(`/game/${gameId}/submit?edit=${preset.id}`)}
|
||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer"
|
||
>
|
||
<PencilIcon className="h-4 w-4" />
|
||
Edit
|
||
</button>
|
||
)}
|
||
|
||
<button
|
||
onClick={handleShare}
|
||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer"
|
||
>
|
||
<ShareIcon className="h-4 w-4" />
|
||
{copied ? "Link copied!" : "Share"}
|
||
</button>
|
||
|
||
{session && !hasReported && (
|
||
<>
|
||
{!showReportForm ? (
|
||
<button
|
||
onClick={() => setShowReportForm(true)}
|
||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
|
||
>
|
||
<FlagIcon className="h-4 w-4" />
|
||
Report
|
||
</button>
|
||
) : (
|
||
<div className="flex flex-col gap-2 w-full">
|
||
<select
|
||
value={reportReason}
|
||
onChange={(e) =>
|
||
setReportReason(
|
||
e.target.value as typeof reportReason,
|
||
)
|
||
}
|
||
className="text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full max-w-xs"
|
||
>
|
||
<option value="inaccurate">
|
||
Inaccurate data
|
||
</option>
|
||
<option value="spam">
|
||
Spam
|
||
</option>
|
||
<option value="inappropriate">
|
||
Inappropriate
|
||
</option>
|
||
<option value="other">
|
||
Other
|
||
</option>
|
||
</select>
|
||
<textarea
|
||
value={reportDetails}
|
||
onChange={(e) =>
|
||
setReportDetails(e.target.value)
|
||
}
|
||
placeholder="Additional details (optional)"
|
||
rows={3}
|
||
className="text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full resize-none"
|
||
/>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={handleReportSubmit}
|
||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer"
|
||
>
|
||
Submit Report
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setShowReportForm(false)
|
||
setReportDetails("")
|
||
}}
|
||
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{hasReported && (
|
||
<span className="inline-flex items-center gap-1.5 text-sm text-text/50">
|
||
<FlagIcon className="h-4 w-4" />
|
||
Reported
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="h-px bg-border" />
|
||
|
||
{/* Vote buttons */}
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
onClick={handleUpvote}
|
||
disabled={!isAuthenticated || userVote === "up"}
|
||
className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer ${
|
||
userVote === "up"
|
||
? "bg-green-500/10 border-green-500/30 text-green-400"
|
||
: "border-border text-text/70 hover:bg-text/5"
|
||
} ${!isAuthenticated ? "opacity-50 cursor-not-allowed" : ""}`}
|
||
title={!isAuthenticated ? "Sign in to vote" : undefined}
|
||
>
|
||
<ThumbsUpIcon className="h-4 w-4" />
|
||
{localUpvotes}
|
||
</button>
|
||
<button
|
||
onClick={handleDownvote}
|
||
disabled={!isAuthenticated || userVote === "down"}
|
||
className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer ${
|
||
userVote === "down"
|
||
? "bg-red-500/10 border-red-500/30 text-red-400"
|
||
: "border-border text-text/70 hover:bg-text/5"
|
||
} ${!isAuthenticated ? "opacity-50 cursor-not-allowed" : ""}`}
|
||
title={!isAuthenticated ? "Sign in to vote" : undefined}
|
||
>
|
||
<ThumbsDownIcon className="h-4 w-4" />
|
||
{localDownvotes}
|
||
</button>
|
||
</div>
|
||
|
||
{/* FPS */}
|
||
{preset.fpsAvg !== null && (
|
||
<div className="flex flex-col gap-1">
|
||
<span className="text-xs text-text/50 uppercase tracking-wider">
|
||
Avg FPS
|
||
</span>
|
||
<div className="text-sm text-text">
|
||
<span className="font-semibold tabular-nums">
|
||
{preset.fpsAvg}
|
||
</span>
|
||
{preset.fpsLow !== null && preset.fpsHigh !== null && (
|
||
<span className="text-text/50 ml-1">
|
||
({Math.round(preset.fpsLow)}–{Math.round(preset.fpsHigh)})
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{preset.fpsOnePercentLow !== null && (
|
||
<div className="flex flex-col gap-1">
|
||
<span className="text-[10px] text-text/50 uppercase tracking-wider">1% Low FPS</span>
|
||
<span className="text-sm font-semibold tabular-nums text-text">
|
||
{preset.fpsOnePercentLow} fps
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="h-px bg-border" />
|
||
|
||
{/* Metadata */}
|
||
<div className="flex flex-col gap-3">
|
||
<MetaItem label="Proton" value={preset.protonVersion} />
|
||
<MetaItem label="OS" value={preset.osVersion} />
|
||
{preset.tdpWatts !== null && (
|
||
<MetaItem label="TDP" value={`${Math.round(preset.tdpWatts)}W`} />
|
||
)}
|
||
{preset.hardwareWattHours !== null && preset.hardwareDeviceType === "handheld" && (
|
||
<MetaItem label="Battery" value={`${Math.round(preset.hardwareWattHours)}Wh`} />
|
||
)}
|
||
{preset.tdpWatts !== null && preset.hardwareWattHours !== null && preset.hardwareDeviceType === "handheld" && (
|
||
<MetaItem label="Est. Battery" value={`~${(preset.hardwareWattHours / preset.tdpWatts).toFixed(1)}h`} />
|
||
)}
|
||
<MetaItem
|
||
label="Upscaler"
|
||
value={
|
||
preset.upscalerType && preset.upscalerType !== "none"
|
||
? `${preset.upscalerType.toUpperCase()}${preset.upscalerVersion ? ` ${preset.upscalerVersion}` : ""}`
|
||
: null
|
||
}
|
||
/>
|
||
<MetaItem
|
||
label="Frame Gen"
|
||
value={
|
||
preset.frameGenMethod && preset.frameGenMethod !== "none"
|
||
? preset.frameGenMethod === "fsr_fg"
|
||
? "FSR FG"
|
||
: preset.frameGenMethod === "dlss_fg"
|
||
? "DLSS FG"
|
||
: preset.frameGenMethod
|
||
: null
|
||
}
|
||
/>
|
||
<MetaItem label="Launch Options" value={preset.launchOptions} />
|
||
{preset.loadTimeSsd !== null && (
|
||
<MetaItem label="Load Time (SSD)" value={`${preset.loadTimeSsd}s`} />
|
||
)}
|
||
{preset.loadTimeSd !== null && (
|
||
<MetaItem label="Load Time (SD)" value={`${preset.loadTimeSd}s`} />
|
||
)}
|
||
|
||
{preset.customSystem && (
|
||
<MetaItem label="Custom System" value="Yes" />
|
||
)}
|
||
</div>
|
||
|
||
<div className="h-px bg-border" />
|
||
|
||
{/* Screenshots */}
|
||
{preset.screenshots && preset.screenshots.length > 0 && (
|
||
<div className="flex flex-col gap-1">
|
||
<span className="text-[10px] text-text/50 uppercase tracking-wider">Screenshots</span>
|
||
<div className="flex gap-2">
|
||
{preset.screenshots.map((ss) => (
|
||
<a key={ss.id} href={ss.url} target="_blank" rel="noopener noreferrer" className="block">
|
||
<img
|
||
src={ss.url}
|
||
alt="Screenshot"
|
||
className="w-20 h-12 object-cover rounded border border-border hover:border-primary/50 transition-colors"
|
||
loading="lazy"
|
||
/>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Right panel */}
|
||
<div className={`flex-1 overflow-y-auto p-5 ${
|
||
mobileTab === "settings" ? "block" : "hidden md:block"
|
||
}`}>
|
||
{/* YouTube Video */}
|
||
{preset.youtubeVideoId && (
|
||
<div className="mb-4">
|
||
<div className="relative w-full" style={{ paddingBottom: "56.25%" }}>
|
||
<iframe
|
||
src={`https://www.youtube-nocookie.com/embed/${preset.youtubeVideoId}`}
|
||
className="absolute inset-0 w-full h-full rounded-lg"
|
||
allow="accelerometer; autoplay; encrypted-media; picture-in-picture"
|
||
sandbox="allow-scripts allow-same-origin allow-presentation"
|
||
allowFullScreen
|
||
loading="lazy"
|
||
title="Gameplay Video"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{hasCategories ? (
|
||
<AnimatePresence mode="wait">
|
||
<motion.div
|
||
key={currentCategory?.category ?? "empty"}
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
transition={{ duration: 0.15 }}
|
||
className="flex flex-col gap-4"
|
||
>
|
||
{/* Category navigation */}
|
||
<div className="flex items-center justify-between">
|
||
<button
|
||
onClick={goPrevCategory}
|
||
className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer"
|
||
aria-label="Previous category"
|
||
>
|
||
<ChevronLeftIcon className="h-4 w-4 text-text/50" />
|
||
</button>
|
||
<span className="text-sm font-medium text-text/80">
|
||
{currentCategory?.category}{" "}
|
||
<span className="text-text/40">
|
||
({activeCategoryIndex + 1}/{categories.length})
|
||
</span>
|
||
</span>
|
||
<button
|
||
onClick={goNextCategory}
|
||
className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer"
|
||
aria-label="Next category"
|
||
>
|
||
<ChevronRightIcon className="h-4 w-4 text-text/50" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Settings table */}
|
||
<div className="rounded-lg border border-border overflow-hidden">
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-text/3">
|
||
<tr>
|
||
<th className="text-left px-2 py-1.5 md:px-3 md:py-2 text-xs font-medium uppercase tracking-wider text-text/50">
|
||
Setting
|
||
</th>
|
||
<th className="text-right px-2 py-1.5 md:px-3 md:py-2 text-xs font-medium uppercase tracking-wider text-text/50">
|
||
Value
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{currentCategory?.settings.map((setting, sIdx) => (
|
||
<tr
|
||
key={sIdx}
|
||
className="border-t border-border"
|
||
>
|
||
<td className="px-2 py-1.5 md:px-3 md:py-2 text-text/70">
|
||
{setting.title}
|
||
</td>
|
||
<td className="px-2 py-1.5 md:px-3 md:py-2 text-right font-medium text-text">
|
||
{formatValue(setting.value)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</motion.div>
|
||
</AnimatePresence>
|
||
) : (
|
||
<div className="flex flex-col items-center justify-center py-16 gap-3 rounded-lg border border-border bg-text/2">
|
||
<p className="text-sm text-text/40">
|
||
No settings data
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Notes */}
|
||
{preset.userNotes && (
|
||
<div className="mt-4 pt-4 border-t border-border">
|
||
<h3 className="text-sm font-medium text-text/80 mb-2">
|
||
Notes
|
||
</h3>
|
||
<TiptapRenderer content={preset.userNotes} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</>
|
||
</AnimatePresence>
|
||
)
|
||
}
|
||
|
||
function MetaItem({
|
||
label,
|
||
value,
|
||
className,
|
||
}: {
|
||
label: string
|
||
value: string | null
|
||
className?: string
|
||
}) {
|
||
return (
|
||
<div className={`flex flex-col gap-1 ${className || ""}`}>
|
||
<span className="text-[10px] text-text/50 uppercase tracking-wider">
|
||
{label}
|
||
</span>
|
||
<span className="text-sm text-text/80 wrap-break-words">
|
||
{value ?? "—"}
|
||
</span>
|
||
</div>
|
||
)
|
||
}
|