Proposals

src/components/Chip.astro

@@ -0,0 +1,136 @@
+---
+export interface Props {
+  label?: string;
+  linkTo?: string;
+  variant?: "violet" | "blue" | "green" | "red" | "gray" | "yellow"
+}
+
+const { label, linkTo, variant = "violet" } = Astro.props;
+
+const variants = {
+  blue: {
+    text: "blue-100",
+    from: "from-blue-500/25",
+    to: "to-cyan-500/25",
+    border: "border-blue-400/50",
+    shadow: "shadow-blue-900/30",
+    hoverFrom: "hover:from-blue-500/35",
+    hoverTo: "hover:to-cyan-500/35",
+    hoverBorder: "hover:border-blue-300/70",
+    hoverShadow: "hover:shadow-blue-900/40",
+  },
+  violet: {
+    text: "violet-100",
+    from: "from-violet-500/25",
+    to: "to-fuchsia-500/25",
+    border: "border-violet-400/50",
+    shadow: "shadow-violet-900/30",
+    hoverFrom: "hover:from-violet-500/35",
+    hoverTo: "hover:to-fuchsia-500/35",
+    hoverBorder: "hover:border-violet-300/70",
+    hoverShadow: "hover:shadow-violet-900/40",
+  },
+  green: {
+    text: "green-100",
+    from: "from-green-500/25",
+    to: "to-emerald-500/25",
+    border: "border-green-400/50",
+    shadow: "shadow-green-900/30",
+    hoverFrom: "hover:from-green-500/35",
+    hoverTo: "hover:to-emerald-500/35",
+    hoverBorder: "hover:border-green-300/70",
+    hoverShadow: "hover:shadow-green-900/40",
+  },
+  red: {
+    text: "red-100",
+    from: "from-red-500/25",
+    to: "to-rose-500/25",
+    border: "border-red-400/50",
+    shadow: "shadow-red-900/30",
+    hoverFrom: "hover:from-red-500/35",
+    hoverTo: "hover:to-rose-500/35",
+    hoverBorder: "hover:border-red-300/70",
+    hoverShadow: "hover:shadow-red-900/40",
+  },
+  gray: {
+    text: "gray-100",
+    from: "from-gray-500/20",
+    to: "to-gray-500/20",
+    border: "border-gray-400/40",
+    shadow: "shadow-gray-900/30",
+    hoverFrom: "hover:from-gray-500/30",
+    hoverTo: "hover:to-gray-500/30",
+    hoverBorder: "hover:border-gray-300/60",
+    hoverShadow: "hover:shadow-gray-900/40",
+  },
+  yellow: {
+    text: "yellow-900",
+    from: "from-yellow-400/30",
+    to: "to-yellow-500/30",
+    border: "border-yellow-400/60",
+    shadow: "shadow-yellow-900/30",
+    hoverFrom: "hover:from-yellow-400/40",
+    hoverTo: "hover:to-yellow-500/40",
+    hoverBorder: "hover:border-yellow-300/80",
+    hoverShadow: "hover:shadow-yellow-900/40",
+  },
+};
+
+const v = variants[variant];
+
+---
+
+
+{linkTo ? (
+<a
+  href={linkTo}
+  target="_blank"
+  class:list={[
+    "inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium",
+    "bg-gradient-to-br border shadow-sm backdrop-blur-sm",
+    "select-none whitespace-nowrap transition cursor-pointer hover:-translate-y-px hover:shadow-md",
+
+    v.text && `text-${v.text}`,
+    v.from,
+    v.to,
+    v.border,
+    v.shadow,
+    v.hoverFrom,
+    v.hoverTo,
+    v.hoverBorder,
+    v.hoverShadow,
+  ]}
+>
+  <slot>{label}</slot>
+</a>
+) : (
+<span
+  class:list={[
+    "inline-flex items-center gap-1 px-3 py-1 rounded-full",
+    "text-sm font-medium",
+
+    v.text && `text-${v.text}`,
+    "bg-gradient-to-br",
+    v.from,
+    v.to,
+
+    "border",
+    v.border,
+    "shadow-sm",
+    v.shadow,
+    "backdrop-blur-sm",
+
+    "select-none whitespace-nowrap cursor-default",
+  ]}
+>
+  <slot>{label}</slot>
+</span>
+)}
+
+<style>
+@reference "tailwindcss";
+
+span {
+  line-height: 1;
+}
+</style>

src/components/ForumData.ts

@@ -0,0 +1,21 @@
+export interface Proposal {
+    id: number;
+    title: string;
+    url: string;
+    votes: number;
+    status: string;
+    forVersion: string | null;
+}
+
+export interface Topic {
+    id: number;
+    slug: string;
+    title: string;
+    vote_count: number;
+    post_stream: {
+        posts: Array<{
+            cooked: string;
+            username: string;
+        }>;
+    };
+}

src/components/ProposalItem.astro

@@ -0,0 +1,67 @@
+---
+import RoadmapItem from "src/pages/_index/RoadmapItem.astro";
+import Chip from "./Chip.astro";
+import type { Proposal } from "./ForumData";
+
+interface Props {
+    proposals: (Proposal | null)[];
+    forVersion?: string | null;
+}
+
+export const StatusVariant: Record<string,"violet" | "blue" | "green" | "red" | "yellow" | "gray"> = {
+    "open-for-discussion": "blue",
+    accepted: "green",
+    rejected: "red",
+    "more-info-needed": "yellow",
+    frozen: "gray",
+};
+
+const statusLabel: Record<string, string> = {
+    "open-for-discussion": "Open",
+    accepted: "Accepted",
+    rejected: "Rejected",
+    "more-info-needed": "More info needed",
+    frozen: "Frozen",
+};
+
+const { proposals, forVersion } = Astro.props;
+---
+
+<div class="card-list">
+    {
+        proposals
+            .filter(
+                (p): p is Proposal => p != null && p.forVersion === forVersion,
+            )
+            .map((p) => (
+                <RoadmapItem>
+                    <a href={p.url} target="_blank" class="block">
+                        <div class="flex flex-col gap-2">
+                            <div class="font-medium leading-tight">
+                                {p.title}
+                            </div>
+                            <div class="flex flex-wrap items-center gap-2">
+                                <span class="text-sm text-white/60">
+                                    {p.votes}
+                                     vote{p.votes === 1 ? "" : "s"}
+                                </span>
+                                <Chip
+                                    variant={StatusVariant[p.status]}
+                                    label={statusLabel[p.status]}
+                                />
+                            </div>
+                        </div>
+                    </a>
+                </RoadmapItem>
+            ))
+    }
+</div>
+
+<style>
+    @reference "tailwindcss";
+    @tailwind utilities;
+
+ .card-list {
+        @apply flex flex-col gap-3;
+    }
+</style>