chore: 2.2

2026-10-18 01:20:29 +00:00 · 2026-01-30 18:22:16 +08:00
parent 549d94fe85
commit d35d704ce1
15 changed files with 739 additions and 275 deletions
@@ -1,52 +0,0 @@
-import { useState } from "react";
-import { ChevronDown, ChevronUp } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-export interface CollapsibleInfoboxProps {
-  title: string;
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-  className?: string;
-}
-
-export function CollapsibleInfobox({
-  title,
-  children,
-  defaultOpen = false,
-  className = "",
-}: CollapsibleInfoboxProps) {
-  const [open, setOpen] = useState(defaultOpen);
-  return (
-    <div
-      className={`bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4 ${className}`}
-    >
-      <div
-        className="flex items-center justify-between cursor-pointer"
-        onClick={() => setOpen((v) => !v)}
-      >
-        <span className="text-lg font-semibold text-blue-800 dark:text-blue-200">
-          {title}
-        </span>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="w-9 p-0"
-          tabIndex={-1}
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            setOpen((v) => !v);
-          }}
-        >
-          {open ? (
-            <ChevronUp className="h-4 w-4" />
-          ) : (
-            <ChevronDown className="h-4 w-4" />
-          )}
-          <span className="sr-only">Toggle {title}</span>
-        </Button>
-      </div>
-      {open && <div className="mt-2">{children}</div>}
-    </div>
-  );
-}
@@ -0,0 +1,110 @@
+"use client";
+
+import Image from "next/image";
+
+interface DiscordBannerPermanentProps {
+  inviteLink: string;
+  serverName?: string;
+  description?: string;
+  ctaText?: string;
+}
+
+export function DiscordBannerPermanent({
+  inviteLink,
+  serverName = "Avalon",
+  description = "Looking for somewhere more... interesting? Avalon's an enchanted collective of botmakers who refuse to be boring 🌿 Come play with us~ (18+ only, darling)",
+  ctaText = "Join Server",
+}: DiscordBannerPermanentProps) {
+  return (
+    <div className="relative rounded-lg overflow-hidden shadow-lg mb-4 bg-[#36393f]">
+      {/* Background Image */}
+      <div className="absolute inset-0">
+        <Image
+          src="/avalon/bg.webp"
+          alt="Background"
+          fill
+          className="object-cover opacity-20"
+        />
+      </div>
+
+      {/* Content */}
+      <div className="relative p-3 sm:p-4">
+        {/* Chat Message Style */}
+        <div className="flex gap-3 mb-2">
+          {/* Morgana Avatar */}
+          <div className="flex-shrink-0 pt-0.5">
+            <Image
+              src="/avalon/morgana-thumb.webp"
+              alt="Morgana"
+              width={40}
+              height={40}
+              className="rounded-full w-10 h-10"
+            />
+          </div>
+
+          {/* Message Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-baseline gap-2 mb-0.5">
+              <span className="text-white font-medium text-[15px]">Morgana</span>
+              <span className="text-[#a3a6aa] text-[11px] font-medium">Today at {new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })}</span>
+            </div>
+            <div className="text-[#dcddde] text-[15px] leading-[1.375rem] mb-2">
+              {description}
+            </div>
+
+            {/* Server Invite Embed */}
+            <div className="bg-[#2f3136] rounded border-l-4 border-[#5865F2] overflow-hidden max-w-[432px]">
+              <div className="p-4 pb-3">
+                <div className="text-[#00b0f4] text-xs font-semibold uppercase mb-2">
+                  You&apos;ve been invited to join a server
+                </div>
+                <div className="flex items-center gap-4">
+                  <Image
+                    src="/avalon/avalon-pfp.webp"
+                    alt="Avalon"
+                    width={50}
+                    height={50}
+                    className="rounded-2xl w-[50px] h-[50px] flex-shrink-0"
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-white font-semibold text-base mb-0.5">{serverName}</div>
+                    <div className="text-[#b9bbbe] text-sm space-y-0.5">
+                      <div className="font-medium">67 members</div>
+                      <a
+                        href="https://from-avalon.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-[#00aff4] hover:underline text-xs inline-block"
+                      >
+                        from-avalon.com
+                      </a>
+                    </div>
+                  </div>
+                  <a
+                    href={inviteLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-[#248046] hover:bg-[#1a6334] text-white px-4 py-2 text-sm rounded font-medium transition-colors flex-shrink-0"
+                  >
+                    {ctaText}
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Trash Panda Icon - Bottom Right */}
+        <div className="absolute bottom-1.5 right-1.5">
+          <Image
+            src="/avalon/trashpanda.webp"
+            alt=""
+            width={20}
+            height={20}
+            className="rounded-full w-5 h-5 ring-1 ring-black/20 opacity-60 hover:opacity-100 transition-opacity"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className = "", sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={`z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className = "", inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={`relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${
+      inset ? "pl-8" : ""
+    } ${className}`}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem };