Skip to content

Commit 569f422

Browse files
izadoesdevizadoesdev
committed
fix: sheet
1 parent 70b9502 commit 569f422

File tree

1 file changed

+137
-105
lines changed

1 file changed

+137
-105
lines changed

‎apps/dashboard/app/(main)/settings/integrations/vercel/_components/create-website-dialog.tsx‎

Lines changed: 137 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -123,95 +123,113 @@ export function CreateWebsiteDialog({
123123
return (
124124
<Sheet onOpenChange={handleClose} open={isOpen}>
125125
<SheetContent
126-
className="w-full overflow-y-auto p-6 sm:max-w-2xl"
126+
className="w-full overflow-y-auto p-0 sm:max-w-2xl"
127127
side="right"
128128
>
129-
<SheetHeader className="space-y-3 border-border/50 border-b pb-6">
130-
<div className="flex items-center gap-3">
131-
<div className="rounded-lg border border-primary/20 bg-primary/10 p-3">
132-
<GlobeIcon className="h-6 w-6 text-primary" weight="duotone" />
133-
</div>
134-
<div>
135-
<SheetTitle className="font-semibold text-foreground text-xl">
136-
{isMultipleMode
137-
? `Integrate ${websiteConfigs.length} Websites`
138-
: 'Integrate Website'}
139-
</SheetTitle>
140-
<SheetDescription className="mt-1 text-muted-foreground">
141-
{isMultipleMode
142-
? `Integrate websites for ${selectedProject?.name} and configure environment variables`
143-
: `Integrate website for ${websiteConfigs[0]?.domain.name} and configure environment variables`}
144-
</SheetDescription>
129+
<div className="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
130+
<SheetHeader className="space-y-3 border-border/50 border-b p-5 pb-3">
131+
<div className="flex items-start gap-3">
132+
<div className="rounded border border-primary/20 bg-gradient-to-br from-primary/10 to-primary/5 p-2 shadow-sm">
133+
<GlobeIcon className="h-5 w-5 text-primary" weight="duotone" />
134+
</div>
135+
<div className="flex-1 space-y-1">
136+
<SheetTitle className="font-semibold text-foreground text-xl">
137+
{isMultipleMode
138+
? `Integrate ${websiteConfigs.length} Websites`
139+
: 'Integrate Website'}
140+
</SheetTitle>
141+
<SheetDescription className="text-muted-foreground text-sm leading-relaxed">
142+
{isMultipleMode
143+
? `Set up Databuddy integration for ${selectedProject?.name} with environment-specific configurations`
144+
: `Configure Databuddy integration for ${websiteConfigs[0]?.domain.name}`}
145+
</SheetDescription>
146+
</div>
145147
</div>
146-
</div>
147-
</SheetHeader>
148+
</SheetHeader>
149+
</div>
148150

149-
<div className="space-y-6 pt-6">
151+
<div className="space-y-4 p-5 pt-0">
150152
{websiteConfigs.map((config, index) => (
151153
<div
152-
className="space-y-4 rounded-lg border bg-card p-4"
154+
className="group space-y-4 rounded border border-border/50 bg-gradient-to-br from-card to-card/50 p-4 shadow-sm transition-all hover:border-border hover:shadow-md"
153155
key={config.domain.name}
154156
>
155-
<div className="flex items-center justify-between border-border/50 border-b pb-3">
157+
<div className="flex items-center justify-between">
156158
<div className="flex items-center gap-3">
157-
<div className="rounded bg-muted p-1.5">
158-
<GlobeIcon className="h-4 w-4 text-muted-foreground" />
159+
<div className="rounded bg-gradient-to-br from-muted to-muted/50 p-2 shadow-sm">
160+
<GlobeIcon
161+
className="h-4 w-4 text-foreground/70"
162+
weight="duotone"
163+
/>
159164
</div>
160-
<div className="flex items-center gap-2">
161-
<span className="font-medium">{config.domain.name}</span>
162-
{config.domain.verified ? (
163-
<Badge
164-
className="border-green-200 bg-green-50 text-green-700 text-xs"
165-
variant="outline"
166-
>
167-
<CheckCircleIcon className="mr-1 h-3 w-3" />
168-
Verified
169-
</Badge>
170-
) : (
171-
<Badge
172-
className="border-yellow-200 bg-yellow-50 text-xs text-yellow-700"
173-
variant="outline"
174-
>
175-
<WarningIcon className="mr-1 h-3 w-3" />
176-
Pending
177-
</Badge>
165+
<div className="space-y-1">
166+
<div className="flex items-center gap-2">
167+
<span className="font-semibold text-foreground">
168+
{config.domain.name}
169+
</span>
170+
{config.domain.verified ? (
171+
<Badge
172+
className="border-emerald-200 bg-emerald-50 font-medium text-emerald-700 text-xs"
173+
variant="outline"
174+
>
175+
<CheckCircleIcon className="mr-1.5 h-3 w-3" />
176+
Verified
177+
</Badge>
178+
) : (
179+
<Badge
180+
className="border-amber-200 bg-amber-50 font-medium text-amber-700 text-xs"
181+
variant="outline"
182+
>
183+
<WarningIcon className="mr-1.5 h-3 w-3" />
184+
Pending
185+
</Badge>
186+
)}
187+
</div>
188+
{config.domain.gitBranch && (
189+
<div className="flex items-center gap-2 text-muted-foreground text-sm">
190+
<GitBranchIcon className="h-3.5 w-3.5" />
191+
<span>
192+
Connected to {config.domain.gitBranch} branch
193+
</span>
194+
</div>
178195
)}
179196
</div>
180197
</div>
181-
{config.domain.gitBranch && (
182-
<Badge
183-
className="border-muted bg-muted/50 text-muted-foreground text-xs"
184-
variant="outline"
185-
>
186-
<GitBranchIcon className="mr-1 h-3 w-3" />
187-
{config.domain.gitBranch}
188-
</Badge>
189-
)}
190198
</div>
191199

192200
<div className="space-y-2">
193201
<Label
194-
className="font-medium text-sm"
202+
className="font-medium text-foreground text-sm"
195203
htmlFor={`name-${index}`}
196204
>
197205
Website Name
198206
</Label>
199207
<Input
200-
className="h-9 rounded border-border/50 transition-colors hover:border-border focus:border-primary/50 focus:ring-primary/20"
208+
className="h-9 rounded border-border/60 bg-background/50 transition-all hover:border-border focus:border-primary/60 focus:ring-2 focus:ring-primary/20"
201209
id={`name-${index}`}
202210
onChange={(e) =>
203211
updateWebsiteConfig(index, { name: e.target.value })
204212
}
205213
placeholder={generateWebsitePlaceholder(config.domain.name)}
206214
value={config.name}
207215
/>
216+
<p className="text-muted-foreground text-xs">
217+
Leave empty to use the domain name as the website name
218+
</p>
208219
</div>
209220

210221
<div className="space-y-3">
211-
<Label className="font-medium text-sm">
212-
Target Environment
213-
</Label>
214-
<div className="flex flex-wrap gap-2">
222+
<div className="space-y-1">
223+
<Label className="font-medium text-foreground text-sm">
224+
Target Environment
225+
</Label>
226+
<p className="text-muted-foreground text-xs leading-relaxed">
227+
Choose which Vercel environment this website will be
228+
deployed to. Production is limited to one domain per
229+
project.
230+
</p>
231+
</div>
232+
<div className="grid grid-cols-2 gap-2">
215233
{['production', 'preview'].map((env) => {
216234
const isUsedByOther =
217235
env === 'production' &&
@@ -224,67 +242,71 @@ export function CreateWebsiteDialog({
224242

225243
return (
226244
<Button
227-
className="h-8 rounded text-xs transition-colors"
245+
className={`h-10 rounded font-medium text-sm transition-all ${
246+
isSelected
247+
? 'border-primary/50 bg-primary text-primary-foreground shadow-sm hover:bg-primary/90'
248+
: 'border-border/60 bg-background/50 text-foreground hover:border-border hover:bg-muted/50'
249+
} ${isUsedByOther && !isSelected ? 'opacity-50' : ''}`}
228250
disabled={isUsedByOther && !isSelected}
229251
key={env}
230252
onClick={() => {
231253
if (isSelected) {
232-
// Remove this environment
233254
updateWebsiteConfig(index, {
234255
target: config.target.filter((t) => t !== env),
235256
});
236257
} else {
237258
updateWebsiteConfig(index, { target: [env] });
238259
}
239260
}}
240-
size="sm"
241-
variant={isSelected ? 'default' : 'outline'}
261+
variant="outline"
242262
>
243-
{env.charAt(0).toUpperCase() + env.slice(1)}
244-
{isUsedByOther && !isSelected && ' (Used)'}
263+
<div className="flex flex-col items-center">
264+
<span className="capitalize">{env}</span>
265+
{isUsedByOther && !isSelected && (
266+
<span className="text-xs opacity-60">(Used)</span>
267+
)}
268+
</div>
245269
</Button>
246270
);
247271
})}
248272
</div>
249-
<p className="text-muted-foreground text-xs">
250-
Production can only be assigned to one domain. Preview can be
251-
used by multiple domains.
252-
</p>
253273
{config.target.length === 0 && (
254-
<p className="text-destructive text-xs">
255-
Please select an environment for this domain.
256-
</p>
274+
<div className="rounded border border-destructive/20 bg-destructive/5 p-2">
275+
<p className="font-medium text-destructive text-sm">
276+
Please select an environment for this domain
277+
</p>
278+
</div>
257279
)}
258280
</div>
259281

260-
<div className="rounded border bg-muted/30 p-3">
282+
<div className="rounded border border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 p-3">
261283
<div className="mb-2 flex items-center gap-2">
262-
<div className="h-2 w-2 rounded-full bg-green-500" />
263-
<Label className="font-medium text-sm">
284+
<div className="h-1.5 w-1.5 rounded-full bg-emerald-500 shadow-sm" />
285+
<Label className="font-medium text-foreground text-sm">
264286
Environment Variable Preview
265287
</Label>
266288
</div>
267-
<div className="space-y-2 text-sm">
268-
<div className="flex items-center justify-between">
269-
<span className="font-mono text-muted-foreground">
270-
DATABUDDY_CLIENT_ID
289+
<div className="space-y-2">
290+
<div className="flex items-center justify-between rounded bg-background/50 p-2">
291+
<span className="font-mono text-foreground text-xs">
292+
NEXT_PUBLIC_DATABUDDY_CLIENT_ID
271293
</span>
272294
<Badge
273-
className="bg-primary/10 text-primary text-xs"
295+
className="border-emerald-200 bg-emerald-50 font-medium text-emerald-700 text-xs"
274296
variant="outline"
275297
>
276298
Auto-generated
277299
</Badge>
278300
</div>
279301
<div className="flex items-center justify-between">
280-
<span className="text-muted-foreground">
302+
<span className="font-medium text-foreground text-xs">
281303
Target Environments:
282304
</span>
283305
<div className="flex gap-1">
284306
{config.target.length > 0 ? (
285307
config.target.map((env) => (
286308
<Badge
287-
className="text-xs"
309+
className="bg-primary/20 font-medium text-primary text-xs"
288310
key={env}
289311
variant="secondary"
290312
>
@@ -303,57 +325,67 @@ export function CreateWebsiteDialog({
303325
</div>
304326
))}
305327

306-
<div className="rounded border border-primary/20 bg-primary/5 p-4">
328+
<div className="rounded border border-primary/30 bg-gradient-to-br from-primary/10 to-primary/5 p-4 shadow-sm">
307329
<div className="mb-3 flex items-center gap-2">
308-
<CheckCircleIcon className="h-5 w-5 text-primary" />
309-
<h4 className="font-medium text-primary">Summary</h4>
330+
<div className="rounded bg-primary/20 p-1.5">
331+
<CheckCircleIcon
332+
className="h-4 w-4 text-primary"
333+
weight="duotone"
334+
/>
335+
</div>
336+
<h4 className="font-medium text-primary">Integration Summary</h4>
310337
</div>
311-
<ul className="space-y-2 text-primary/80 text-sm">
312-
<li className="flex items-center gap-2">
313-
<div className="h-1.5 w-1.5 rounded-full bg-primary/60" />
314-
<span>
315-
Integrate {websiteConfigs.length} website
338+
<div className="grid gap-2">
339+
<div className="flex items-center gap-2 rounded bg-background/50 p-2">
340+
<div className="h-1.5 w-1.5 rounded-full bg-primary shadow-sm" />
341+
<span className="text-foreground text-sm">
342+
Create {websiteConfigs.length} website
316343
{websiteConfigs.length !== 1 ? 's' : ''} in Databuddy
317344
</span>
318-
</li>
319-
<li className="flex items-center gap-2">
320-
<div className="h-1.5 w-1.5 rounded-full bg-primary/60" />
321-
<span>Generate unique client IDs for each website</span>
322-
</li>
323-
<li className="flex items-center gap-2">
324-
<div className="h-1.5 w-1.5 rounded-full bg-primary/60" />
325-
<span>
326-
Add DATABUDDY_CLIENT_ID environment variables to Vercel
345+
</div>
346+
<div className="flex items-center gap-2 rounded bg-background/50 p-2">
347+
<div className="h-1.5 w-1.5 rounded-full bg-primary shadow-sm" />
348+
<span className="text-foreground text-sm">
349+
Generate unique client IDs for tracking
350+
</span>
351+
</div>
352+
<div className="flex items-center gap-2 rounded bg-background/50 p-2">
353+
<div className="h-1.5 w-1.5 rounded-full bg-primary shadow-sm" />
354+
<span className="text-foreground text-sm">
355+
Configure NEXT_PUBLIC_DATABUDDY_CLIENT_ID environment
356+
variables
327357
</span>
328-
</li>
329-
</ul>
358+
</div>
359+
</div>
330360
</div>
361+
</div>
331362

332-
<div className="flex justify-end gap-3 border-border/50 border-t pt-6">
363+
<div className="sticky bottom-0 border-border/50 border-t bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
364+
<div className="flex justify-end gap-3">
333365
<Button
334-
className="rounded transition-colors hover:bg-muted"
366+
className="h-9 rounded px-4 font-medium transition-all hover:bg-muted/80"
335367
disabled={isSaving}
336368
onClick={handleClose}
337369
variant="outline"
338370
>
339371
Cancel
340372
</Button>
341373
<Button
342-
className="relative rounded bg-gradient-to-r from-primary to-primary/90 transition-colors hover:from-primary/90 hover:to-primary"
374+
className="relative h-9 rounded bg-gradient-to-r from-primary to-primary/90 px-4 font-medium shadow-sm transition-all hover:from-primary/90 hover:to-primary hover:shadow-md disabled:opacity-50"
343375
disabled={!isFormValid || isSaving}
344376
onClick={handleSubmit}
345377
>
346378
{isSaving && (
347379
<div className="absolute left-3">
348-
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground" />
380+
<div className="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground" />
349381
</div>
350382
)}
351-
<span className={isSaving ? 'ml-6' : ''}>
383+
<span className={isSaving ? 'ml-6' : 'flex items-center gap-2'}>
352384
{isSaving ? (
353385
'Integrating...'
354386
) : (
355387
<>
356-
<PlusIcon className="mr-2 h-4 w-4" />
388+
<PlusIcon className="h-3 w-3" />
357389
Integrate {websiteConfigs.length} Website
358390
{websiteConfigs.length !== 1 ? 's' : ''}
359391
</>

0 commit comments

Comments
 (0)