feat: use starter templates for create repo

packages/app/src/app/components/Create/ImportRepository/steps/StartFromTemplate.tsx

@@ -1,73 +1,36 @@
-import React, { useState } from 'react';
-import { Button, Stack, Text, Textarea } from '@codesandbox/components';
-import { useAppState, useEffects } from 'app/overmind';
-import { InputExplanation } from '../components/InputExplanation';
-
-const ROWS_REQUEST_URL =
-  'https://api.rows.com/v1/spreadsheets/LCBJXPdwTRrAFndAgQHU5/tables/73eb166b-8a27-4b7a-87ad-a944103dcdf0/values/A:B:append';
-
-const ROWS_API_KEY = '1WcvujvzSSQ1GtbnoYvrGb8liPJFWud915ELpjwnVfV5';
+import React from 'react';
+import { Stack, Text } from '@codesandbox/components';
+import { useAppState } from 'app/overmind';
+import { TemplateGrid } from '../../elements';
+import { TemplateCard } from '../../TemplateCard';
+import { SandboxToFork } from '../../utils/types';
 
 export const StartFromTemplate = () => {
-  const [formSubmitted, setFormSubmitted] = useState(false);
-  const [userInput, setUserInput] = useState('');
-  const effects = useEffects();
-  const { user } = useAppState();
-
-  return (
-    <Stack
-      as="form"
-      onSubmit={async ev => {
-        ev.preventDefault();
-        if (formSubmitted) {
-          return;
-        }
+  const { officialDevboxTemplates } = useAppState();
 
-        await effects.http.post(
-          ROWS_REQUEST_URL,
-          {
-            values: [[user?.id, userInput]],
-          },
-          {
-            headers: {
-              'Content-Type': 'application/json',
-              Authorization: 'Bearer ' + ROWS_API_KEY,
-            },
-          }
-        );
-
-        setUserInput('');
-        setFormSubmitted(true);
-      }}
-      direction="vertical"
-      gap={4}
-    >
-      <Text>Coming soon</Text>
-      <Stack direction="vertical" gap={2}>
-        <InputExplanation variant="info">
-          We are preparing a list of project starters on this page.
-        </InputExplanation>
-        <Text size={3}>
-          Meanwhile, tell us which starters you would like to see here.
-        </Text>
+  const starterTemplates = officialDevboxTemplates.filter(t =>
+    t.tags.includes('starter')
+  );
 
-        <Textarea
-          autoFocus
-          id="feedback"
-          name="feedback"
-          css={{ fontSize: '13px' }}
-          onChange={e => setUserInput(e.target.value)}
-          placeholder="I would like..."
-        />
+  const handleTemplateSelect = (template: SandboxToFork) => {
+    window.location.href = template.editorUrl + '?createRepo=true';
+  };
 
-        {formSubmitted ? (
-          <Text>Thank you for your input!</Text>
-        ) : (
-          <Button type="submit" autoWidth>
-            Submit
-          </Button>
-        )}
-      </Stack>
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text size={3}>
+        Create a new repository from one of our starter templates
+      </Text>
+      <TemplateGrid>
+        {starterTemplates.map(template => (
+          <TemplateCard
+            key={template.id}
+            template={template}
+            onSelectTemplate={handleTemplateSelect}
+            onOpenTemplate={handleTemplateSelect}
+          />
+        ))}
+      </TemplateGrid>
     </Stack>
   );
 };