Function CreateSrcbookButton

packages/web/src/components/srcbook-cards.tsx:192–236

(props: {
  defaultLanguage: CodeLanguageType;
  onSubmit: (language: CodeLanguageType) => void;
})

}

export function CreateSrcbookButton(props: {
  defaultLanguage: CodeLanguageType;
  onSubmit: (language: CodeLanguageType) => void;
}) {
  const [language, setLanguage] = useState(props.defaultLanguage);

  return (
    <div className="space-y-1">
      <CardContainer
        onClick={() => props.onSubmit(language)}
        className="active:translate-y-0.5 hover:border-foreground"
      >
        <div className="flex flex-col h-full items-start justify-between">
          <PlusIcon size={20} />
          <h5 className="font-medium leading-[18px]">Create Notebook</h5>
        </div>
      </CardContainer>

      <div className="flex border rounded-sm bg-background w-fit">
        <Button
          title="Use JavaScript for this Notebook"
          variant="secondary"
          className={cn(
            'border-none rounded-r-none active:translate-y-0 text-muted-foreground bg-muted w-10',
            language === 'javascript' && 'text-foreground font-bold',
          )}
          onClick={() => setLanguage('javascript')}
        >
          JS
        </Button>
        <Button
          title="Use TypeScript for this Notebook"
          variant="secondary"
          className={cn(
            'border-none rounded-l-none active:translate-y-0 text-muted-foreground bg-muted w-10',
            language === 'typescript' && 'text-foreground font-bold',
          )}
          onClick={() => setLanguage('typescript')}
        >
          TS
        </Button>
      </div>
    </div>
  );
}

export function ImportSrcbookButton(props: { onClick: () => void }) {
  return (