mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
kemal.earth
a9a1326b92
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? This is a prototype for private apps UI. There are no endpoints at the minute, just wanted to see what a potential flow could look like.
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { PropsWithChildren } from 'react'
|
|
|
|
interface StepProps {
|
|
number: number
|
|
title: string
|
|
description: string
|
|
isLast?: boolean
|
|
disabled?: boolean
|
|
}
|
|
|
|
export function CreateAppSheetStep({
|
|
number,
|
|
title,
|
|
description,
|
|
isLast = false,
|
|
disabled = false,
|
|
children,
|
|
}: PropsWithChildren<StepProps>) {
|
|
return (
|
|
<div
|
|
className={`flex items-start gap-6 self-stretch transition-opacity ${disabled ? 'opacity-40 pointer-events-none' : ''}`}
|
|
>
|
|
<div className="relative self-stretch shrink-0 w-6">
|
|
<div className="absolute inset-0 flex items-start justify-center">
|
|
{!isLast && (
|
|
<div
|
|
aria-hidden
|
|
className="absolute left-[calc(50%-1px)] w-px bg-border opacity-60 h-full"
|
|
/>
|
|
)}
|
|
<div className="relative z-10 flex font-mono text-xs items-center justify-center min-w-6 w-6 h-6 border border-default rounded-md bg-surface-100 text-foreground-light">
|
|
{number}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`w-full ${isLast ? '' : 'pb-10'}`}>
|
|
<p className="text-sm font-medium text-foreground mb-1">{title}</p>
|
|
<p className="text-sm text-foreground-light mb-4">{description}</p>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|