Productionize the export step: add lots of nice styling, bells and whistles, etc.

Render each export(able|ed) query/table in a Splitgraph embed, with
a tabbed conainer for switching to a Seafowl embed when it's ready,
i.e. show each table/query individually, inline with its loading state.

Author: milesrichardson

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ChartsPanel.tsx

@@ -40,14 +40,16 @@ export const ChartsPanel = () => {
         </a>
         .
       </StepDescription>
-      <Charts
-        importedRepository={{
-          githubNamespace,
-          githubRepository,
-          splitgraphNamespace,
-          splitgraphRepository,
-        }}
-      />
+      {stepStatus === "active" && (
+        <Charts
+          importedRepository={{
+            githubNamespace,
+            githubRepository,
+            splitgraphNamespace,
+            splitgraphRepository,
+          }}
+        />
+      )}
     </div>
   );
 };

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/EmbeddedQuery.module.css

@@ -0,0 +1,45 @@
+.embeddedQuery {
+  border-left: 4px solid var(--muted);
+  padding-left: 10px;
+  margin-bottom: 2rem;
+}
+
+.topBar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.consoleFlavorButtonsAndLoadingBar {
+  display: inline-flex;
+  flex-direction: row;
+}
+
+.embeddedQuery iframe {
+  width: 100%;
+}
+
+.heading {
+  font-size: 1.5rem;
+  font-weight: bold;
+  display: inline-flex;
+  align-items: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.embedControls {
+  background: inherit;
+}
+
+.openInConsoleLink {
+  display: inline-flex;
+  align-items: center;
+  font-size: small;
+}
+
+.openInConsoleLink svg {
+  margin-right: 4px;
+}

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ExportPanel.module.css

@@ -22,6 +22,13 @@
   text-decoration: none;
   font-weight: bold;
   border-style: none;
+  margin-bottom: 1rem;
+}
+
+.startExportButtonLoading {
+  /* color: var(--muted); */
+  /* background-color: transparent; */
+  opacity: 0.5;
 }
 
 .startExportButton:hover {
@@ -36,3 +43,17 @@
 .exportInfo p {
   margin-bottom: 1rem;
 }
+
+.exportPreviewHeading {
+  margin-bottom: 0;
+}
+
+.exportPreviewDescription {
+  margin-bottom: 1rem;
+}
+
+.exportNote {
+  font-size: small;
+  /* color: red !important; */
+  display: block;
+}