mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-01-31 06:42:03 +00:00
6f3bf2f6b6
- Introduced multiple new themes: retro, dracula, nord, monokai, tokyonight, solarized, gruvbox, catppuccin, onedark, and synthwave. - Updated global CSS to support new themes and added custom variants for theme-specific styles. - Enhanced layout and sidebar components with improved styling and responsiveness. - Refactored button and slider components for better visual consistency and added an animated outline variant. - Improved various views (e.g., settings, welcome, context) with updated styles and better user experience. This update enhances the overall aesthetic and usability of the application, providing users with more customization options.
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useDroppable } from "@dnd-kit/core";
|
|
import { cn } from "@/lib/utils";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface KanbanColumnProps {
|
|
id: string;
|
|
title: string;
|
|
color: string;
|
|
count: number;
|
|
children: ReactNode;
|
|
isDoubleWidth?: boolean;
|
|
headerAction?: ReactNode;
|
|
}
|
|
|
|
export function KanbanColumn({
|
|
id,
|
|
title,
|
|
color,
|
|
count,
|
|
children,
|
|
isDoubleWidth = false,
|
|
headerAction,
|
|
}: KanbanColumnProps) {
|
|
const { setNodeRef, isOver } = useDroppable({ id });
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
className={cn(
|
|
"flex flex-col h-full rounded-lg bg-card backdrop-blur-sm border border-border transition-colors",
|
|
isDoubleWidth ? "w-[37rem]" : "w-72",
|
|
isOver && "bg-accent"
|
|
)}
|
|
data-testid={`kanban-column-${id}`}
|
|
>
|
|
{/* Column Header */}
|
|
<div className="flex items-center gap-2 p-3 border-b border-border">
|
|
<div className={cn("w-3 h-3 rounded-full", color)} />
|
|
<h3 className="font-medium text-sm flex-1">{title}</h3>
|
|
{headerAction}
|
|
<span className="text-xs text-muted-foreground bg-background px-2 py-0.5 rounded-full">
|
|
{count}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Column Content */}
|
|
<div
|
|
className={cn(
|
|
"flex-1 overflow-y-auto p-2",
|
|
isDoubleWidth
|
|
? "columns-2 gap-2 [&>*]:break-inside-avoid [&>*]:mb-2"
|
|
: "space-y-2"
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|