fix: Remove 'Create Project' button, replace with CLI prompt (#245)

For black-triangle and alpha builds, we won't be able to create projects in the UI, because they require collecting and tar'ing a set of assets associated with the project - so the CLI is going to be our entry point for creating projects.

This shifts the UI to remove the 'Create Project' button, and adds a prompt to copy a command to run.

__Before:__
<img width="1134" alt="image" src="https://user-images.githubusercontent.com/88213859/153534269-58dc95bd-0417-4bed-8e62-e2b6f479da61.png">

__After:__
![2022-02-10 19 38 01](https://user-images.githubusercontent.com/88213859/153534227-d22bd786-8c43-4858-bda6-3d9d1d614711.gif)

site/components/CodeExample/CodeExample.stories.tsx

@@ -0,0 +1,20 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { CodeExample, CodeExampleProps } from "./CodeExample"
+
+const sampleCode = `echo "Hello, world"`
+
+export default {
+  title: "CodeExample",
+  component: CodeExample,
+  argTypes: {
+    code: { control: "string", defaultValue: sampleCode },
+  },
+}
+
+const Template: Story<CodeExampleProps> = (args: CodeExampleProps) => <CodeExample {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  code: sampleCode,
+}

site/components/CodeExample/CodeExample.test.tsx

@@ -0,0 +1,15 @@
+import { screen } from "@testing-library/react"
+import { render } from "../../test_helpers"
+import React from "react"
+import { CodeExample } from "./CodeExample"
+
+describe("CodeExample", () => {
+  it("renders code", async () => {
+    // When
+    render(<CodeExample code="echo hello" />)
+
+    // Then
+    // Both lines should be rendered
+    await screen.findByText("echo hello")
+  })
+})

site/components/CodeExample/CodeExample.tsx

@@ -0,0 +1,38 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+
+import { CopyButton } from "../Button"
+
+export interface CodeExampleProps {
+  code: string
+}
+
+/**
+ * Component to show single-line code examples, with a copy button
+ */
+export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
+  const styles = useStyles()
+
+  return (
+    <div className={styles.root}>
+      <code>{code}</code>
+      <CopyButton text={code} />
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: theme.palette.background.default,
+    color: theme.palette.codeBlock.contrastText,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    fontSize: 13,
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+  },
+}))

site/components/CodeExample/index.ts

@@ -0,0 +1 @@
+export * from "./CodeExample"