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

style(onboarding): restyle DB toggle buttons in project-create step to org-combobox card style

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Théo LAGACHE
2026-06-17 10:24:26 +02:00
co-authored by Claude Sonnet 4.6
parent 51317b0d08
commit 647905da09
1 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/onboarding/steps/step-project-create.tsx
+29 -10
View File
@@ -2,6 +2,7 @@
import { useState } from "react";
import { useOnboarding } from "@onboardjs/react";
import { Check, Database } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
@@ -40,16 +41,34 @@ export const StepProjectCreate = () => {
<div className="flex flex-col gap-2">
<Label>Databases</Label>
<div className="flex flex-col gap-2">
{mockDatabases.map((db) => (
<button
key={db.id}
type="button"
onClick={() => toggleDb(db.id)}
className={`text-left rounded-md border p-2 text-sm ${databaseIds.includes(db.id) ? "border-primary bg-primary/10" : "border-white/10"}`}
>
{db.name} <span className="text-muted-foreground">({db.engine})</span>
</button>
))}
{mockDatabases.map((db) => {
const isSelected = databaseIds.includes(db.id);
return (
<button
key={db.id}
type="button"
onClick={() => toggleDb(db.id)}
className={`flex items-center gap-3 rounded-lg border p-3 text-sm transition-colors text-left ${
isSelected
? "border-primary/20 bg-primary/10 text-primary"
: "border-border hover:bg-accent/50 hover:border-primary/20"
}`}
>
<div className="size-9 rounded-md border bg-muted/50 shadow-sm flex items-center justify-center shrink-0">
<Database className="size-4 text-muted-foreground" />
</div>
<div className="flex flex-col gap-0.5 flex-1">
<span className="font-medium">{db.name}</span>
<span className="text-xs text-muted-foreground">{db.engine}</span>
</div>
{isSelected && (
<div className="size-5 rounded-full bg-primary flex items-center justify-center ml-auto">
<Check className="size-3 text-primary-foreground" strokeWidth={3} />
</div>
)}
</button>
);
})}
</div>
</div>
<Button type="button" onClick={onContinue} disabled={!name.trim()}>