Merge branch 'feat/download/download-page' into releases/v0.0.4

src/components/Download/Download.css

@@ -0,0 +1,13 @@
+.download {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.download-inputContainer {
+  flex: 1;
+}
+
+.download-input {
+  width: 100%;
+}

src/components/Download/Download.tsx

@@ -0,0 +1,30 @@
+import { Button, Input } from "@codex-storage/marketplace-ui-components";
+import "./Download.css";
+import { ChangeEvent, useState } from "react";
+import { CodexSdk } from "../../sdk/codex";
+
+export function Download() {
+  const [cid, setCid] = useState("");
+  console.info(cid);
+  const onDownload = () => {
+    const url = CodexSdk.url() + "/api/codex/v1/data/";
+    window.open(url + cid, "_target");
+  };
+
+  const onCidChange = (e: ChangeEvent<HTMLInputElement>) =>
+    setCid(e.currentTarget.value);
+
+  return (
+    <div className="download">
+      <div className="download-inputContainer">
+        <Input
+          id="cid"
+          isInvalid={false}
+          placeholder="CID"
+          inputClassName="download-input"
+          onChange={onCidChange}></Input>
+      </div>
+      <Button label="Download" onClick={onDownload}></Button>
+    </div>
+  );
+}

src/components/Welcome/Welcome.css

@@ -6,6 +6,7 @@
   display: flex;
   align-items: flex-start;
   flex-direction: column;
+  flex: 1;
 }
 
 .welcome-disclaimer {

src/components/Welcome/Welcome.tsx

@@ -14,13 +14,6 @@ export function Welcome() {
           explore its features. Your feedback is invaluable as we continue to
           improve!
         </SimpleText>
-        <Alert
-          variant="warning"
-          title="Disclaimer"
-          className="welcome-disclaimer">
-          The website and the content herein is not intended for public use and
-          is for informational and demonstration purposes only.
-        </Alert>
       </div>
 
       <Link to="/dashboard/help" className="welcome-link">

src/routes/dashboard.css

@@ -5,6 +5,19 @@
   gap: 0.75rem;
 }
 
+.dashboard-download {
+  margin-top: 1rem;
+}
+
+.dashboard-welcome {
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-alert {
+  margin-bottom: 0;
+}
+
 @media (min-width: 1000px) {
   .dashboard {
     grid-template-columns: repeat(2, minmax(0, 1fr));

src/routes/dashboard/index.tsx

@@ -1,11 +1,12 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { Files } from "../../components/Files/Files.tsx";
-import { Card, Upload } from "@codex-storage/marketplace-ui-components";
+import { Alert, Card, Upload } from "@codex-storage/marketplace-ui-components";
 import { CodexSdk } from "../../sdk/codex";
 import { Welcome } from "../../components/Welcome/Welcome.tsx";
 import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder.tsx";
 import { ErrorBoundary } from "@sentry/react";
 import { useQueryClient } from "@tanstack/react-query";
+import { Download } from "../../components/Download/Download.tsx";
 
 export const Route = createFileRoute("/dashboard/")({
   component: About,
@@ -21,21 +22,35 @@ function About() {
   return (
     <>
       <div className="dashboard">
-        <ErrorBoundary
+        <div>
-          fallback={({ error }) => (
+          <ErrorBoundary
-            <ErrorPlaceholder
+            fallback={({ error }) => (
-              error={error}
+              <ErrorPlaceholder
-              subtitle="Cannot retrieve the data."
+                error={error}
-            />
+                subtitle="Cannot retrieve the data."
-          )}>
+              />
-          <Card title="Upload a file">
+            )}>
-            <Upload
+            <Card title="Upload a file">
-              multiple
+              <Upload
-              codexData={CodexSdk.data()}
+                multiple
-              onSuccess={onSuccess}
+                codexData={CodexSdk.data()}
-            />
+                onSuccess={onSuccess}
-          </Card>
+              />
-        </ErrorBoundary>
+            </Card>
+          </ErrorBoundary>
+
+          <ErrorBoundary
+            fallback={({ error }) => (
+              <ErrorPlaceholder
+                error={error}
+                subtitle="Cannot retrieve the data."
+              />
+            )}>
+            <Card title="Download a file" className="dashboard-download">
+              <Download></Download>
+            </Card>
+          </ErrorBoundary>
+        </div>
 
         <ErrorBoundary
           fallback={({ error }) => (
@@ -44,7 +59,17 @@ function About() {
               subtitle="Cannot retrieve the data."
             />
           )}>
-          <Welcome />
+          <div className="dashboard-welcome">
+            <Welcome />
+
+            <Alert
+              variant="warning"
+              title="Disclaimer"
+              className="welcome-disclaimer dashboard-alert">
+              The website and the content herein is not intended for public use
+              and is for informational and demonstration purposes only.
+            </Alert>
+          </div>
         </ErrorBoundary>
       </div>