External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(db-card): optional selection checkbox and selected state

Browse Source
This commit is contained in:
Charles GTE
2026-07-05 13:50:33 +02:00
parent 6952ac5f48
commit 60f57a734d
1 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/database-card.tsx
+28 -3
View File
@@ -8,14 +8,18 @@ import {ConnectionIndicator} from "@/components/common/connection-indicator";
import {formatDateLastContact} from "@/utils/date-formatting";
import {Database} from "@/db/schema/07_database";
import {ChevronRight, Activity, Fingerprint, Copy, Check} from "lucide-react";
import {cn} from "@/lib/utils";
export type DatabaseCardProps = {
data: Database;
withDetails?: boolean;
selectable?: boolean;
selected?: boolean;
onToggleSelect?: (databaseId: string) => void;
};
export const DatabaseCard = (props: DatabaseCardProps) => {
const {data: database, withDetails = true} = props;
const {data: database, withDetails = true, selectable = false, selected = false, onToggleSelect} = props;
const [isCopied, setIsCopied] = useState(false);
const handleCopy = (e: React.MouseEvent) => {
@@ -28,8 +32,29 @@ export const DatabaseCard = (props: DatabaseCardProps) => {
return (
<Card
className="relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0">
<div className="flex items-start justify-between mb-2">
className={cn(
"relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0",
selected && "ring-2 ring-primary border-primary",
)}>
{selectable && (
<button
type="button"
aria-pressed={selected}
aria-label={selected ? "Deselect database" : "Select database"}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onToggleSelect?.(database.id);
}}
className={cn(
"absolute top-3 left-3 z-20 w-5 h-5 rounded-md border-2 flex items-center justify-center transition-colors",
selected ? "bg-primary border-primary text-primary-foreground" : "border-muted-foreground/50 bg-background/70",
)}
>
{selected && <Check className="w-3 h-3" />}
</button>
)}
<div className={cn("flex items-start justify-between mb-2", selectable && "pl-7")}>
<div
className="relative w-12 h-12 p-2 bg-background rounded-xl border border-border/50 shadow-sm flex items-center justify-center group-hover:border-primary/30 transition-all duration-300 group-hover:scale-105">
<Image