From 63ad55edb512879884a31741725b2b4060c1cda7 Mon Sep 17 00:00:00 2001
From: Developer <developer@discord-automod.local>
Date: Tue, 28 Jul 2026 08:20:33 +0700
Subject: [PATCH] feat: add glass component system -- GlassCard, GlassPanel,
 GlassDivider

---
 .../frontend/src/components/glass/card.tsx    | 36 +++++++++++++++++++
 .../frontend/src/components/glass/divider.tsx |  9 +++++
 .../frontend/src/components/glass/index.ts    |  3 ++
 .../frontend/src/components/glass/panel.tsx   | 28 +++++++++++++++
 4 files changed, 76 insertions(+)
 create mode 100644 services/frontend/src/components/glass/card.tsx
 create mode 100644 services/frontend/src/components/glass/divider.tsx
 create mode 100644 services/frontend/src/components/glass/index.ts
 create mode 100644 services/frontend/src/components/glass/panel.tsx

diff --git a/services/frontend/src/components/glass/card.tsx b/services/frontend/src/components/glass/card.tsx
new file mode 100644
index 0000000..3efbe9b
--- /dev/null
+++ b/services/frontend/src/components/glass/card.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+
+type GlassVariant = "base" | "elevated" | "interactive" | "danger";
+
+interface GlassCardProps extends ComponentPropsWithoutRef<"div"> {
+  variant?: GlassVariant;
+}
+
+const variantStyles: Record<GlassVariant, string> = {
+  base: "glass rounded-[var(--radius-card)]",
+  elevated:
+    "glass-elevated rounded-[var(--radius-card)]",
+  interactive:
+    "glass rounded-[var(--radius-card)] transition-all duration-150 hover:scale-[1.01] hover:border-[var(--color-border-glow)] cursor-pointer",
+  danger:
+    "glass rounded-[var(--radius-card)] border-red-500/30",
+};
+
+export function GlassCard({
+  variant = "base",
+  className,
+  children,
+  ...props
+}: GlassCardProps) {
+  return (
+    <div
+      className={cn(variantStyles[variant], "p-5", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/services/frontend/src/components/glass/divider.tsx b/services/frontend/src/components/glass/divider.tsx
new file mode 100644
index 0000000..018a3c9
--- /dev/null
+++ b/services/frontend/src/components/glass/divider.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export function GlassDivider({ className }: { className?: string }) {
+  return (
+    <div className={cn("h-px bg-gradient-to-r from-transparent via-oklch(1 0 0 / 0.08) to-transparent", className)} />
+  );
+}
diff --git a/services/frontend/src/components/glass/index.ts b/services/frontend/src/components/glass/index.ts
new file mode 100644
index 0000000..19c5919
--- /dev/null
+++ b/services/frontend/src/components/glass/index.ts
@@ -0,0 +1,3 @@
+export { GlassCard } from "./card";
+export { GlassPanel } from "./panel";
+export { GlassDivider } from "./divider";
diff --git a/services/frontend/src/components/glass/panel.tsx b/services/frontend/src/components/glass/panel.tsx
new file mode 100644
index 0000000..f7323c2
--- /dev/null
+++ b/services/frontend/src/components/glass/panel.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+
+interface GlassPanelProps extends ComponentPropsWithoutRef<"div"> {
+  dense?: boolean;
+}
+
+export function GlassPanel({
+  dense = false,
+  className,
+  children,
+  ...props
+}: GlassPanelProps) {
+  return (
+    <div
+      className={cn(
+        "glass rounded-[var(--radius-panel)]",
+        dense ? "p-3" : "p-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}