onboarding completed

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx

@@ -0,0 +1,59 @@
+import { pushModal } from '@/modals';
+import { ServerIcon } from 'lucide-react';
+
+import type { IServiceClient } from '@openpanel/db';
+import { frameworks } from '@openpanel/sdk-info';
+
+type Props = {
+  client: IServiceClient | null;
+};
+
+const ConnectBackend = ({ client }: Props) => {
+  return (
+    <div className="rounded-lg border p-4 md:p-6">
+      <div className="flex items-center gap-2 text-2xl capitalize">
+        <ServerIcon />
+        Backend
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Pick a framework below to get started.
+      </p>
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        {frameworks.backend.map((framework) => (
+          <button
+            onClick={() =>
+              pushModal('Instructions', {
+                framework,
+                client,
+              })
+            }
+            className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
+            key={framework.name}
+          >
+            <div className="h-10 w-10 rounded-md bg-slate-200 p-2">
+              <img
+                className="h-full w-full object-contain"
+                src={framework.logo}
+                alt={framework.name}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="flex-1 font-semibold">{framework.name}</div>
+          </button>
+        ))}
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">
+        Missing a framework?{' '}
+        <a
+          href="mailto:hello@openpanel.dev"
+          className="text-foreground underline"
+        >
+          Let us know!
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ConnectBackend;