[pull] master from supabase:master

apps/studio/components/interfaces/HomeNew/GettingStarted/FrameworkSelector.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import {
+  Button,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Command_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+  cn,
+} from 'ui'
+import { Box, Check, ChevronDown } from 'lucide-react'
+import { ConnectionType } from 'components/interfaces/Connect/Connect.constants'
+import { ConnectionIcon } from 'components/interfaces/Connect/ConnectionIcon'
+
+interface FrameworkSelectorProps {
+  value: string
+  onChange: (value: string) => void
+  items: ConnectionType[]
+  className?: string
+}
+
+export const FrameworkSelector = ({
+  value,
+  onChange,
+  items,
+  className,
+}: FrameworkSelectorProps) => {
+  const [open, setOpen] = useState(false)
+
+  const selectedItem = items.find((item) => item.key === value)
+
+  function handleSelect(key: string) {
+    onChange(key)
+    setOpen(false)
+  }
+
+  return (
+    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
+      <div className={cn('flex', className)}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button
+            size="tiny"
+            type="default"
+            className="gap-0 rounded-l-none"
+            iconRight={<ChevronDown strokeWidth={1.5} />}
+          >
+            <div className="flex items-center gap-2">
+              {selectedItem?.icon ? <ConnectionIcon icon={selectedItem.icon} /> : <Box size={12} />}
+              {selectedItem?.label}
+            </div>
+          </Button>
+        </PopoverTrigger_Shadcn_>
+      </div>
+      <PopoverContent_Shadcn_ className="p-0 max-w-48" side="bottom" align="start">
+        <Command_Shadcn_>
+          <CommandInput_Shadcn_ placeholder="Search..." />
+          <CommandList_Shadcn_>
+            <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+            <CommandGroup_Shadcn_>
+              {items.map((item) => (
+                <CommandItem_Shadcn_
+                  key={item.key}
+                  value={item.key}
+                  onSelect={() => handleSelect(item.key)}
+                  className="flex gap-2 items-center"
+                >
+                  {item.icon ? <ConnectionIcon icon={item.icon} /> : <Box size={12} />}
+                  {item.label}
+                  <Check
+                    size={15}
+                    className={cn('ml-auto', item.key === value ? 'opacity-100' : 'opacity-0')}
+                  />
+                </CommandItem_Shadcn_>
+              ))}
+            </CommandGroup_Shadcn_>
+          </CommandList_Shadcn_>
+        </Command_Shadcn_>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
+  )
+}

apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx

@@ -0,0 +1,68 @@
+import Link from 'next/link'
+import { cn, Button, Card, CardContent, CardHeader, CardTitle, Badge } from 'ui'
+import { Row } from 'ui-patterns'
+import { GettingStartedStep } from './GettingStartedSection'
+
+export interface GettingStartedProps {
+  steps: GettingStartedStep[]
+}
+
+export function GettingStarted({ steps }: GettingStartedProps) {
+  return (
+    <Row columns={[3, 2, 1]} className="items-stretch">
+      {steps.map((step, index) => (
+        <Card key={step.key} className={cn('group overflow-hidden h-full flex flex-col')}>
+          <CardHeader className="flex flex-row space-y-0 justify-between items-center border-b-0">
+            <div className="flex flex-row items-center gap-3">
+              {step.icon && <div>{step.icon}</div>}
+              <CardTitle className="text-foreground-light">
+                {index + 1}. {step.title}
+              </CardTitle>
+            </div>
+            <Badge
+              variant={step.status === 'complete' ? 'success' : 'default'}
+              className="capitalize"
+            >
+              {step.status}
+            </Badge>
+          </CardHeader>
+          <CardContent className="p-6 pt-16 flex-1 flex flex-col justify-end">
+            {step.image && <div className="w-full">{step.image}</div>}
+            <p className={cn('text-base text-foreground')}>{step.description}</p>
+            <div className="flex flex-wrap gap-2 mt-4">
+              {step.actions.map((action, i) => {
+                if (action.component) {
+                  return <div key={`${step.key}-action-${i}`}>{action.component}</div>
+                }
+                if (action.href) {
+                  return (
+                    <Button
+                      asChild
+                      key={`${step.key}-action-${i}`}
+                      type={action.variant ?? 'default'}
+                      icon={action.icon}
+                      className="text-foreground-light hover:text-foreground"
+                    >
+                      <Link href={action.href}>{action.label}</Link>
+                    </Button>
+                  )
+                }
+                return (
+                  <Button
+                    key={`${step.key}-action-${i}`}
+                    type={action.variant ?? 'default'}
+                    icon={action.icon}
+                    onClick={action.onClick}
+                    className="text-foreground-light hover:text-foreground"
+                  >
+                    {action.label}
+                  </Button>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </Row>
+  )
+}