Chneemann/waveform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add reusable ActionButton component and integrate into modals

Browse source
This commit is contained in:
Chneemann 2026-09-01 19:49:28 +02:00
parent 7a5d8051e4
commit 1252a8aed1
No known key found for this signature in database
5 changed files with 171 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
components/modals/CreateChannelModal.tsx
View file

@ -5,10 +5,11 @@
"use client";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { X, Loader2 } from "lucide-react";
import { useActiveServer } from "@/lib/context/ServerContext";
import { ActionButton } from "../ui/ActionButton";
/**
* Properties for the CreateChannelModal component.
@ -47,6 +48,9 @@ export function CreateChannelModal({
if (!isOpen) return null;
const isValid = name.trim().length != 0;
const canSave = isValid && !isLoading;
/**
* Handles form submission to create a new channel via the API.
*
@ -137,22 +141,23 @@ export function CreateChannelModal({
{error && <p className="text-xs text-red-400 mt-2">{error}</p>}
<div className="flex items-center justify-end gap-3 pt-4">
<button
<ActionButton
type="button"
variant="secondary"
onClick={onClose}
disabled={isLoading}
className="px-4 py-2 text-sm font-medium text-muted hover:text-white transition-colors cursor-pointer"
>
Cancel
</button>
<button
</ActionButton>
<ActionButton
type="submit"
disabled={isLoading || !name.trim()}
className="px-5 py-2 bg-accent text-white font-medium text-sm rounded-xl hover:bg-accent/90 transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
variant="primary"
isLoading={isLoading}
disabled={!canSave}
>
{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
Create
</button>
Save
</ActionButton>
</div>
</form>
</div>

23
components/modals/CreateServerModal.tsx
View file

@ -11,6 +11,7 @@ import {
SERVER_COLOR_CLASSES,
SERVER_COLOR_OPTIONS,
} from "@/lib/constants/server.styles";
import { ActionButton } from "../ui/ActionButton";
/**
* Properties for the CreateServerModal component.
@ -38,6 +39,9 @@ export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
if (!isOpen) return null;
const isValid = name.trim().length != 0;
const canSave = isValid && !isLoading;
/**
* Handles server creation form submission via API POST request.
*
@ -144,22 +148,23 @@ export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
{error && <p className="text-xs text-red-400 mt-2">{error}</p>}
<div className="flex items-center justify-end gap-3 pt-4">
<button
<ActionButton
type="button"
variant="secondary"
onClick={onClose}
disabled={isLoading}
className="px-4 py-2 text-sm font-medium text-muted hover:text-white transition-colors cursor-pointer"
>
Cancel
</button>
<button
</ActionButton>
<ActionButton
type="submit"
disabled={isLoading || !name.trim()}
className="px-5 py-2 bg-accent text-white font-medium text-sm rounded-xl hover:bg-accent/90 transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
variant="primary"
isLoading={isLoading}
disabled={!canSave}
>
{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
Create
</button>
Save
</ActionButton>
</div>
</form>
</div>

37
components/modals/EditChannelModal.tsx
View file

@ -10,6 +10,7 @@ import { useRouter } from "next/navigation";
import { X, Loader2, Trash2 } from "lucide-react";
import { useActiveServer } from "@/lib/context/ServerContext";
import type { Channel } from "@/db/schema";
import { ActionButton } from "../ui/ActionButton";
/**
* Properties for the EditChannelModal component.
@ -189,37 +190,35 @@ export function EditChannelModal({
{error && <p className="text-xs text-red-400 mt-2">{error}</p>}
<div className="flex items-center justify-between pt-4">
<button
<ActionButton
type="button"
variant="danger"
onClick={handleDelete}
disabled={isLoading || isDeleting}
className="flex items-center gap-1.5 text-xs font-semibold text-red-400 hover:text-red-300 transition-colors cursor-pointer disabled:opacity-50"
isLoading={isDeleting}
disabled={isLoading}
icon={Trash2}
>
{isDeleting ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<Trash2 className="w-4 h-4" />
)}
Delete Channel
</button>
Delete Server
</ActionButton>
<div className="flex items-center gap-3">
<button
<div className="flex items-center gap-2">
<ActionButton
type="button"
variant="secondary"
onClick={onClose}
disabled={isLoading || isDeleting}
className="px-4 py-2 text-sm font-medium text-muted hover:text-white transition-colors cursor-pointer"
>
Cancel
</button>
<button
</ActionButton>
<ActionButton
type="submit"
disabled={!canSave}
className="px-5 py-2 bg-accent text-white font-medium text-sm rounded-xl hover:bg-accent/90 transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
variant="primary"
isLoading={isLoading}
disabled={!canSave || isDeleting}
>
{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
Save
</button>
</ActionButton>
</div>
</div>
</form>

35
components/modals/EditServerModal.tsx
View file

@ -8,6 +8,7 @@
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { X, Loader2, Trash2 } from "lucide-react";
import { ActionButton } from "../ui/ActionButton";
/**
* Properties for the EditServerModal component.
@ -168,37 +169,35 @@ export function EditServerModal({
{error && <p className="text-xs text-red-400 mt-2">{error}</p>}
<div className="flex items-center justify-between pt-4">
<button
<ActionButton
type="button"
variant="danger"
onClick={handleDelete}
disabled={isLoading || isDeleting}
className="flex items-center gap-1.5 text-xs font-semibold text-red-400 hover:text-red-300 transition-colors cursor-pointer disabled:opacity-50"
isLoading={isDeleting}
disabled={isLoading}
icon={Trash2}
>
{isDeleting ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<Trash2 className="w-4 h-4" />
)}
Delete Server
</button>
</ActionButton>
<div className="flex items-center gap-3">
<button
<div className="flex items-center gap-2">
<ActionButton
type="button"
variant="secondary"
onClick={onClose}
disabled={isLoading || isDeleting}
className="px-4 py-2 text-sm font-medium text-muted hover:text-white transition-colors cursor-pointer"
>
Cancel
</button>
<button
</ActionButton>
<ActionButton
type="submit"
disabled={!canSave}
className="px-5 py-2 bg-accent text-white font-medium text-sm rounded-xl hover:bg-accent/90 transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
variant="primary"
isLoading={isLoading}
disabled={!canSave || isDeleting}
>
{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
Save
</button>
</ActionButton>
</div>
</div>
</form>

107
components/ui/ActionButton.tsx Normal file
View file

@ -0,0 +1,107 @@
/**
* @file components/ui/ActionButton.tsx
* @description Flexible and reusable action button component supporting various variants, sizes, icons, and loading states.
*/
import { ButtonHTMLAttributes, ComponentType, ReactNode } from "react";
import { Loader2, LucideProps } from "lucide-react";
import { cn } from "@/lib/utils";
/**
* Available color and size type definitions for the ActionButton component.
*
* @type {ButtonVariant} ButtonStyle variants ("primary" | "secondary" | "danger").
* @type {ButtonSize} Sizing options ("sm" | "md" | "lg").
*/
type ButtonVariant = "primary" | "secondary" | "danger";
type ButtonSize = "sm" | "md" | "lg";
/**
* Properties for the ActionButton component.
*
* @interface ActionButtonProps
* @extends {ButtonHTMLAttributes<HTMLButtonElement>}
* @property {ButtonVariant} [variant="primary"] - The visual style variant of the button.
* @property {ButtonSize} [size="md"] - The size dimension of the button.
* @property {boolean} [isLoading=false] - Whether the button is in a loading state, displaying a spinner and disabling interactions.
* @property {ComponentType<LucideProps>} [icon] - Optional Lucide icon component to render alongside text or independently.
* @property {ReactNode} [children] - The content/text displayed inside the button.
*/
interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ButtonVariant;
size?: ButtonSize;
isLoading?: boolean;
icon?: ComponentType<LucideProps>;
children?: ReactNode;
}
const baseStyles =
"font-medium transition-all duration-200 flex items-center justify-center cursor-pointer select-none shrink-0 " +
"hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.97] " +
"disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none disabled:transform-none " +
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background";
const variantStyles: Record<ButtonVariant, string> = {
primary:
"bg-accent hover:bg-accent/90 text-white shadow-md shadow-accent/20 border border-accent/20 hover:shadow-lg hover:shadow-accent/25",
secondary:
"bg-surface-hover hover:bg-surface/90 text-slate-200 hover:text-white border border-white/10 hover:border-white/25 shadow-sm hover:shadow-md",
danger:
"bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 hover:text-rose-300 border border-rose-500/20 hover:border-rose-500/30 shadow-sm hover:shadow-rose-500/10",
};
const sizeStyles: Record<ButtonSize, string> = {
sm: "px-3 py-1.5 text-xs rounded-lg gap-1.5",
md: "px-4 py-2 text-sm rounded-xl gap-2",
lg: "px-5 py-2.5 text-base rounded-xl gap-2.5",
};
const iconSizes: Record<ButtonSize, string> = {
sm: "w-3.5 h-3.5",
md: "w-4 h-4",
lg: "w-5 h-5",
};
/**
* Renders a customizable action button with support for loading indicators, icons, and multiple size/variant styles.
*
* @param {ActionButtonProps} props - The component props.
* @param {ButtonVariant} [props.variant="primary"] - The visual style variant of the button.
* @param {ButtonSize} [props.size="md"] - The size dimension of the button.
* @param {boolean} [props.isLoading=false] - Whether the button is in a loading state.
* @param {ComponentType<LucideProps>} [props.icon] - Optional icon component to render.
* @param {ReactNode} [props.children] - The button content.
* @param {boolean} [props.disabled] - Whether the button is disabled.
* @param {string} [props.className] - Additional custom CSS classes.
* @returns {JSX.Element} The rendered action button component.
*/
export function ActionButton({
variant = "primary",
size = "md",
isLoading = false,
icon: Icon,
children,
disabled,
className,
...props
}: ActionButtonProps) {
return (
<button
{...props}
disabled={disabled || isLoading}
className={cn(
baseStyles,
variantStyles[variant],
sizeStyles[size],
className,
)}
>
{isLoading ? (
<Loader2 className={cn(iconSizes[size], "animate-spin shrink-0")} />
) : (
Icon && <Icon className={cn(iconSizes[size], "shrink-0")} />
)}
{children && <span>{children}</span>}
</button>
);
}