mirror of
https://github.com/severian-dev/sucker.severian.dev.git
synced 2026-02-25 02:11:58 +00:00
chore: 2.2
This commit is contained in:
Severian
528
src/app/page.tsx
528
src/app/page.tsx
@@ -20,18 +20,18 @@ import {
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Png } from "@/lib/png";
|
||||
import {
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
Copy,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Menu,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
CollapsibleContent,
|
||||
Collapsible,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { CollapsibleInfobox } from "@/components/ui/collapsible-infobox";
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { DiscordBannerPermanent } from "@/components/ui/discord-banner-permanent";
|
||||
import Script from "next/script";
|
||||
|
||||
interface CardDataV2 {
|
||||
@@ -66,7 +66,6 @@ interface Card {
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const [isInstructionsOpen, setIsInstructionsOpen] = useState(false);
|
||||
const [cards, setCards] = useState<Card[]>([]);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [selectedCardIndex, setSelectedCardIndex] = useState<number | null>(
|
||||
@@ -82,6 +81,9 @@ export default function Home() {
|
||||
const [altGreetingIndexById, setAltGreetingIndexById] = useState<
|
||||
Record<string, number>
|
||||
>({});
|
||||
const [mirrorsDialogOpen, setMirrorsDialogOpen] = useState(false);
|
||||
const [changelogDialogOpen, setChangelogDialogOpen] = useState(false);
|
||||
const [howToUseDialogOpen, setHowToUseDialogOpen] = useState(false);
|
||||
|
||||
const [proxyUrl, setProxyUrl] = useState(
|
||||
"https://sucker.severian.dev/api/proxy"
|
||||
@@ -364,222 +366,94 @@ export default function Home() {
|
||||
gtag('config', 'G-YVD6QFSR71');`}
|
||||
</Script>
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Sucker v2.1</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Just some notes this time
|
||||
</p>
|
||||
{/* Mobile Layout */}
|
||||
<div className="sm:hidden mb-4">
|
||||
{/* Row 1: Title on left, Hamburger on right */}
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Sucker v2.2</h1>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Consider joining Avalon!
|
||||
</p>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setHowToUseDialogOpen(true)}>
|
||||
How to Use
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setMirrorsDialogOpen(true)}>
|
||||
Mirrors
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setChangelogDialogOpen(true)}>
|
||||
Changelog
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{/* Row 2: Full-width Refresh button */}
|
||||
<Button
|
||||
onClick={fetchCards}
|
||||
variant="outline"
|
||||
disabled={isRefreshing}
|
||||
className="w-full"
|
||||
>
|
||||
{isRefreshing ? "Refreshing..." : "Refresh"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
{/* Collapsible infoboxes */}
|
||||
{[
|
||||
{
|
||||
title: "(Dec 2025) A note about fetching avatars",
|
||||
content: (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The platform you suck from has implemented limited visibility
|
||||
of metadata for certain content with a particular 'obscenity
|
||||
rating'. This means that in some cases, the Fetch Avatar flow
|
||||
here will show a 404 - character not found error at the end.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sometimes (but not always), the avatar URL can still be
|
||||
fetched after a day or two since the bot was published.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
As of this moment, can't really find a fix for it, so you'll
|
||||
have to download the image yourself and just add the image to
|
||||
the card someplace else.
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title:
|
||||
"(Oct 2025) V2 charcard format, multi-turn support for scripts/lorebooks, alternate greetings.",
|
||||
content: (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sucker now tracks changes to character descriptions and
|
||||
scenarios across multiple messages. Cards with multiple versions
|
||||
show a version badge and offer a "Download Changes" button to
|
||||
get the change history.
|
||||
<br />
|
||||
Alternate greetings are also supported. Sucker will provide you
|
||||
with a conversation ID that you can use to start off a new chat
|
||||
when capturing alternate greetings, send it as first message
|
||||
instead of the character name.
|
||||
<br />
|
||||
Directions are updated below. Make sure you read 'em.
|
||||
</p>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "List of mirrors",
|
||||
content: (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Sucker goes down sometimes on severian.dev because I use the
|
||||
server for other stuff. Here's a full list of existing sucker
|
||||
instances (thanks to those who signed up for it!):
|
||||
</p>
|
||||
<ul className="text-sm flex flex-col sm:flex-row list-none">
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://sucker.severian.dev"
|
||||
>
|
||||
severian.dev
|
||||
</a>
|
||||
</li>
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://sucker.trashpanda.land"
|
||||
>
|
||||
trashpanda.land
|
||||
</a>
|
||||
</li>
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://sucker.hitani.me"
|
||||
>
|
||||
hitani.me
|
||||
</a>
|
||||
</li>
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://succ.portalnexus.link"
|
||||
>
|
||||
portalnexus.link
|
||||
</a>
|
||||
</li>
|
||||
<li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
|
||||
<a
|
||||
className="text-yellow-600"
|
||||
href="https://sucker.lemuria.dev"
|
||||
>
|
||||
lemuria.dev
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<br />
|
||||
If you're interested in hosting your own sucker instance, lmk
|
||||
via Discord: @lyseverian, I've made the GH repo private for
|
||||
now. Or send me a message if there's anything you think that
|
||||
could be added here, open to suggestions.
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
},
|
||||
].map((infobox, idx) => (
|
||||
<CollapsibleInfobox
|
||||
key={infobox.title}
|
||||
title={infobox.title}
|
||||
defaultOpen={false}
|
||||
>
|
||||
{infobox.content}
|
||||
</CollapsibleInfobox>
|
||||
))}
|
||||
|
||||
<Collapsible
|
||||
open={isInstructionsOpen}
|
||||
onOpenChange={setIsInstructionsOpen}
|
||||
className="w-full mb-8"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-semibold">How to Use</h2>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="w-9 p-0">
|
||||
{isInstructionsOpen ? (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
)}
|
||||
<span className="sr-only">Toggle instructions</span>
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
{/* Desktop Layout */}
|
||||
<div className="hidden sm:flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Sucker v2.2</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Consider joining Avalon!
|
||||
</p>
|
||||
</div>
|
||||
<CollapsibleContent className="mt-4">
|
||||
<div className="prose dark:prose-invert max-w-none">
|
||||
<p className="mb-2">
|
||||
Follow every instruction here to the letter because it's all you
|
||||
need to know and I have no intent of helping you further.
|
||||
</p>
|
||||
<ol className="list-decimal list-inside">
|
||||
<li className="mb-2">
|
||||
Put <code style={{ color: "#fff0b9" }}>{proxyUrl}</code> in
|
||||
your API settings, any value for model and key.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
REQUIRED: Set your custom prompt to{" "}
|
||||
<code style={{ color: "#fff0b9" }}><.></code>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
REQUIRED: Set your persona (or create a new one) with the name{" "}
|
||||
<code style={{ color: "#fff0b9" }}>{user}</code> and
|
||||
the description should only have{" "}
|
||||
<code style={{ color: "#fff0b9" }}>.</code> in it.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
Save settings and refresh the page. Not this page. <i>That</i>{" "}
|
||||
page.
|
||||
</li>
|
||||
<li className="mb-2">Start a new chat with a character.</li>
|
||||
<li className="mb-2">
|
||||
Char name inference is implemented: if you send just a dot:{" "}
|
||||
<code style={{ color: "#fff0b9" }}>.</code>, sucker will use
|
||||
the inferred name from the persona tag, or you can send the
|
||||
character name yourself.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
Hit the Refresh button here, and the cards should appear here.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
If you're interested in capturing alternate greetings, start a
|
||||
new chat and send the conversation ID as first message instead
|
||||
of the character name. The format is{" "}
|
||||
<code style={{ color: "#fff0b9" }}>
|
||||
[sucker:conv=conversationId]
|
||||
</code>{" "}
|
||||
which you'll be given when creating a new card.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
You can also send more messages with possible keywords to
|
||||
trigger scripts/lorebooks. Sucker will track changes to the
|
||||
description and scenario fields. Cards with multiple versions
|
||||
will show a version badge and offer a "Download Changes"
|
||||
button to get a detailed change history with timestamps.
|
||||
Unfortunately, lorebook creation is out of scope at the
|
||||
moment, but you can use the changes detected to modify the
|
||||
character card yourself post-export.
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
Download the JSON files or go through a little more effort to
|
||||
get PNGs instead.
|
||||
</li>
|
||||
</ol>
|
||||
<p className="mb-2">
|
||||
Extractions will only last for 10 minutes, after which they're
|
||||
discarded. Reloading the page will remove any attached avatars.
|
||||
I'm not storing shit.
|
||||
</p>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => setHowToUseDialogOpen(true)}
|
||||
variant="outline"
|
||||
>
|
||||
How to Use
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setMirrorsDialogOpen(true)}
|
||||
variant="outline"
|
||||
>
|
||||
Mirrors
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setChangelogDialogOpen(true)}
|
||||
variant="outline"
|
||||
>
|
||||
Changelog
|
||||
</Button>
|
||||
<Button
|
||||
onClick={fetchCards}
|
||||
variant="outline"
|
||||
disabled={isRefreshing}
|
||||
>
|
||||
{isRefreshing ? "Refreshing..." : "Refresh"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
{/* Discord Banner - Disabled if NEXT_PUBLIC_DISABLE_DISCORD_BANNER is set */}
|
||||
{process.env.NEXT_PUBLIC_DISABLE_DISCORD_BANNER !== "true" && (
|
||||
<DiscordBannerPermanent
|
||||
inviteLink="https://discord.gg/5jQKkCfHP3"
|
||||
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"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="max-w-3xl mx-auto space-y-6">
|
||||
{cards.length === 0 ? (
|
||||
@@ -887,6 +761,234 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* How to Use Dialog */}
|
||||
<Dialog open={howToUseDialogOpen} onOpenChange={setHowToUseDialogOpen}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>How to Use</DialogTitle>
|
||||
<DialogDescription>
|
||||
Follow every instruction here to the letter because it's all you
|
||||
need to know and I have no intent of helping you further.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="prose dark:prose-invert max-w-none">
|
||||
<ol className="list-decimal list-inside space-y-3 text-sm">
|
||||
<li>
|
||||
Put <code className="bg-muted px-1 py-0.5 rounded text-yellow-600">{proxyUrl}</code> in
|
||||
your API settings, any value for model and key.
|
||||
</li>
|
||||
<li>
|
||||
REQUIRED: Set your custom prompt to{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600"><.></code>
|
||||
</li>
|
||||
<li>
|
||||
REQUIRED: Set your persona (or create a new one) with the name{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600">{user}</code> and
|
||||
the description should only have{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600">.</code> in it.
|
||||
</li>
|
||||
<li>
|
||||
Save settings and refresh the page. Not this page. <i>That</i>{" "}
|
||||
page.
|
||||
</li>
|
||||
<li>Start a new chat with a character.</li>
|
||||
<li>
|
||||
Char name inference is implemented: if you send just a dot:{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600">.</code>, sucker will use
|
||||
the inferred name from the persona tag, or you can send the
|
||||
character name yourself.
|
||||
</li>
|
||||
<li>
|
||||
Hit the Refresh button here, and the cards should appear here.
|
||||
</li>
|
||||
<li>
|
||||
If you're interested in capturing alternate greetings, start a
|
||||
new chat and send the conversation ID as first message instead
|
||||
of the character name. The format is{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-yellow-600">
|
||||
[sucker:conv=conversationId]
|
||||
</code>{" "}
|
||||
which you'll be given when creating a new card.
|
||||
</li>
|
||||
<li>
|
||||
You can also send more messages with possible keywords to
|
||||
trigger scripts/lorebooks. Sucker will track changes to the
|
||||
description and scenario fields. Cards with multiple versions
|
||||
will show a version badge and offer a "Download Changes"
|
||||
button to get a detailed change history with timestamps.
|
||||
Unfortunately, lorebook creation is out of scope at the
|
||||
moment, but you can use the changes detected to modify the
|
||||
character card yourself post-export.
|
||||
</li>
|
||||
<li>
|
||||
Download the JSON files or go through a little more effort to
|
||||
get PNGs instead.
|
||||
</li>
|
||||
</ol>
|
||||
<p className="mt-4 text-sm text-muted-foreground">
|
||||
Extractions will only last for 10 minutes, after which they're
|
||||
discarded. Reloading the page will remove any attached avatars.
|
||||
I'm not storing shit.
|
||||
</p>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Mirrors Dialog */}
|
||||
<Dialog open={mirrorsDialogOpen} onOpenChange={setMirrorsDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Sucker Mirrors</DialogTitle>
|
||||
<DialogDescription>
|
||||
Sucker goes down sometimes on severian.dev because I use the
|
||||
server for other stuff. Here's a full list of existing sucker
|
||||
instances (thanks to those who signed up for it!):
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-2">
|
||||
<ul className="text-sm flex flex-col gap-2">
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://sucker.severian.dev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
severian.dev
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://sucker.trashpanda.land"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
trashpanda.land
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://sucker.hitani.me"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
hitani.me
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://succ.portalnexus.link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
portalnexus.link
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-yellow-600 hover:underline"
|
||||
href="https://sucker.lemuria.dev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
lemuria.dev
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-sm text-muted-foreground pt-4">
|
||||
If you're interested in hosting your own sucker instance, lmk
|
||||
via Discord: @lyseverian, I've made the GH repo private for
|
||||
now. Or send me a message if there's anything you think that
|
||||
could be added here, open to suggestions.
|
||||
</p>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Changelog Dialog */}
|
||||
<Dialog open={changelogDialogOpen} onOpenChange={setChangelogDialogOpen}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Changelog</DialogTitle>
|
||||
<DialogDescription>
|
||||
Recent updates and changes to Sucker
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">Jan 2026 - Direct image input</h3>
|
||||
<div className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>
|
||||
You can now paste webp filenames (like id.webp) or full image URLs
|
||||
directly into the avatar field without having to open the metadata tab first.
|
||||
</p>
|
||||
<p>
|
||||
Makes grabbing avatars way faster when you already know the image path.
|
||||
</p>
|
||||
<p>
|
||||
You should also consider joining our new thing, a Discord community server for botmakers:{" "}
|
||||
<a
|
||||
href="https://discord.gg/5jQKkCfHP3"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
discord.gg/5jQKkCfHP3
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">Dec 2025 - A note about fetching avatars</h3>
|
||||
<div className="space-y-2 text-sm text-muted-foreground">
|
||||
<p>
|
||||
The platform you suck from has implemented limited visibility
|
||||
of metadata for certain content with a particular 'obscenity
|
||||
rating'. This means that in some cases, the Fetch Avatar flow
|
||||
here will show a 404 - character not found error at the end.
|
||||
</p>
|
||||
<p>
|
||||
Sometimes (but not always), the avatar URL can still be
|
||||
fetched after a day or two since the bot was published.
|
||||
</p>
|
||||
<p>
|
||||
As of this moment, can't really find a fix for it, so you'll
|
||||
have to download the image yourself and just add the image to
|
||||
the card someplace else.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">
|
||||
Oct 2025 - V2 charcard format, multi-turn support
|
||||
</h3>
|
||||
<div className="text-sm text-muted-foreground space-y-2">
|
||||
<p>
|
||||
Sucker now tracks changes to character descriptions and
|
||||
scenarios across multiple messages. Cards with multiple versions
|
||||
show a version badge and offer a "Download Changes" button to
|
||||
get the change history.
|
||||
</p>
|
||||
<p>
|
||||
Alternate greetings are also supported. Sucker will provide you
|
||||
with a conversation ID that you can use to start off a new chat
|
||||
when capturing alternate greetings, send it as first message
|
||||
instead of the character name.
|
||||
</p>
|
||||
<p>
|
||||
Directions are updated below. Make sure you read 'em.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
110
src/components/ui/discord-banner-permanent.tsx
Normal file
110
src/components/ui/discord-banner-permanent.tsx
Normal file
@@ -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'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>
|
||||
);
|
||||
}
|
||||
41
src/components/ui/dropdown-menu.tsx
Normal file
41
src/components/ui/dropdown-menu.tsx
Normal file
@@ -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 };
|
||||
Reference in New Issue
Block a user