"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; import { ChatIcon } from "@kineticui/icons"; export type FeatureRequest = { id: string; title: string; description?: string; votes: number; voted?: boolean; status?: "open" | "planned" | "in-progress" | "shipped"; comments?: number; createdAt?: number; }; export type FeatureVotingProps = { items: FeatureRequest[]; onVote: (id: string, voted: boolean) => void; onItemClick?: (item: FeatureRequest) => void; className?: string; }; const statusStyle = { open: "bg-surface-overlay text-muted", planned: "bg-info-soft text-info", "in-progress": "bg-warning-soft text-warning", shipped: "bg-success-soft text-success", }; /** Public roadmap board: upvote requests, sort by top or new, filter by status. */ export function FeatureVoting({ items, onVote, onItemClick, className }: FeatureVotingProps) { const [sort, setSort] = React.useState<"top" | "new">("top"); const [filter, setFilter] = React.useState("all"); const list = items .filter((i) => filter === "all" || (i.status ?? "open") === filter) .sort((a, b) => (sort === "top" ? b.votes - a.votes : (b.createdAt ?? 0) - (a.createdAt ?? 0))); return (

{(["top", "new"] as const).map((s) => ( ))}

onVote(it.id, !it.voted)} className={cn( "flex w-14 shrink-0 flex-col items-center justify-center gap-0.5 rounded-xl border transition-colors", it.voted ? "border-accent bg-accent-soft text-accent" : "border-border text-muted hover:border-border-strong hover:text-foreground", )} > {it.votes}

); }

Feature Voting

Installation

Exports