feat: add upload notes opton into main component

citruscai · Jul 7, 2024 · 1df5aa2 · 1df5aa2
1 parent dcdbeca
commit 1df5aa2
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 6 deletions.
diff --git a/components/notes/CreateWorksheetForm/UploadNotesPage/UploadNotesStep.tsx b/components/notes/CreateWorksheetForm/UploadNotesPage/UploadNotesStep.tsx
@@ -1,14 +1,67 @@
+import React, { useState } from 'react';
 import NotesUploadBox from './NotesUploadBox';
+import YoutubeLink from './YoutubeLink';
+import TextPaste from './TextPaste';
+import { Button } from "@/components/ui/button";
+import IconUpload from '@/components/ui/icons/IconUpload';
+import IconPaste from '@/components/ui/icons/IconPaste';
+import IconYoutube from '@/components/ui/icons/IconYoutube';
 
-type UploadNotesStep = {
+
+interface UploadNotesStepProps {
   next: () => void;
-};
+}
+
+const UploadNotesStep: React.FC<UploadNotesStepProps> = ({ next }) => {
+  const [activeTab, setActiveTab] = useState('upload');
+
+  const handleUploadSuccess = () => {
+    next();
+  };
+
+  const handleLinkSubmit = () => {
+    next();
+  };
+
+  const handleTextSubmit = () => {
+    next();
+  };
 
-const UploadNotesStep: React.FC<UploadNotesStep> = ({ next }) => {
   return (
-    <div>
-      <h1 className="text-2xl mb-4 text-primary text-center">Upload Resource to transform</h1>
-      <NotesUploadBox onUploadSuccess={next} />
+    <div className="flex h-screen w-full items-center justify-center bg-background">
+      <div className="mx-4 flex w-full max-w-4xl flex-col rounded-xl bg-card p-6 shadow-lg md:flex-row">
+        <div className="relative flex flex-1 flex-col items-center justify-center gap-4 rounded-xl bg-muted p-6 text-center">
+          {activeTab === 'upload' && <NotesUploadBox onUploadSuccess={handleUploadSuccess} />}
+          {activeTab === 'youtube' && <YoutubeLink onLinkSubmit={handleLinkSubmit} />}
+          {activeTab === 'text' && <TextPaste onTextSubmit={handleTextSubmit} />}
+        </div>
+        <div className="flex flex-col items-center justify-center gap-4 p-6">
+          <Button
+            variant={activeTab === 'upload' ? 'primary' : 'ghost'}
+            onClick={() => setActiveTab('upload')}
+            className="flex w-full flex-col items-center gap-2 rounded-xl p-4 hover:bg-muted"
+          >
+            <IconUpload className="h-8 w-8" />
+            <span>Upload Document</span>
+          </Button>
+          <Button
+            variant={activeTab === 'youtube' ? 'primary' : 'ghost'}
+            onClick={() => setActiveTab('youtube')}
+            className="flex w-full flex-col items-center gap-2 rounded-xl p-4 hover:bg-muted"
+          >
+            <IconYoutube className="h-8 w-8" />
+            <span>Paste YouTube Link</span>
+          </Button>
+          <Button
+            variant={activeTab === 'text' ? 'primary' : 'ghost'}
+            onClick={() => setActiveTab('text')}
+            className="flex w-full flex-col items-center gap-2 rounded-xl p-4 hover:bg-muted"
+          >
+            <IconPaste className="h-8 w-8" />
+            <span>Paste Text</span>
+          </Button>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/components/ui/icons/IconPaste.tsx b/components/ui/icons/IconPaste.tsx
@@ -0,0 +1,18 @@
+// icon:paste | Fontawesome https://fontawesome.com/ | Fontawesome
+import * as React from "react";
+
+function IconPaste(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      height="1em"
+      width="1em"
+      {...props}
+    >
+      <path d="M502.6 198.6l-61.25-61.25A31.901 31.901 0 00418.8 128H256c-35.3 0-64.9 28.7-64 64l.006 255.1C192 483.3 220.7 512 256 512h192c35.2 0 64-28.8 64-64l.01-226.7c-.01-8.5-3.41-16.7-9.41-22.7zM464 448c0 8.836-7.164 16-16 16H256c-8.838 0-16-7.164-16-16V192.1c0-8.836 7.164-16 16-16h128V224c0 17.67 14.33 32 32 32h48.01v192zM317.7 96c-7.1-27.55-31.9-48-61.7-48h-40.8C211.3 20.93 188.1 0 160 0s-51.3 20.93-55.2 48H64C28.65 48 0 76.65 0 112v272c0 35.34 28.65 64 64 64h96v-48H64c-8.836 0-16-7.164-16-16V112c0-8.8 7.18-16 16-16h16v16c0 17.67 14.33 32 32 32h61.35C190 115.4 220.6 96 256 96h61.7zM160 72c-8.822 0-16-7.176-16-16s7.178-16 16-16 16 7.176 16 16-7.2 16-16 16z" />
+    </svg>
+  );
+}
+
+export default IconPaste;
diff --git a/components/ui/icons/IconUpload.tsx b/components/ui/icons/IconUpload.tsx
@@ -0,0 +1,19 @@
+// icon:upload | Bootstrap https://icons.getbootstrap.com/ | Bootstrap
+import * as React from "react";
+
+function IconUpload(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 16 16"
+      height="1em"
+      width="1em"
+      {...props}
+    >
+      <path d="M.5 9.9a.5.5 0 01.5.5v2.5a1 1 0 001 1h12a1 1 0 001-1v-2.5a.5.5 0 011 0v2.5a2 2 0 01-2 2H2a2 2 0 01-2-2v-2.5a.5.5 0 01.5-.5z" />
+      <path d="M7.646 1.146a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L8.5 2.707V11.5a.5.5 0 01-1 0V2.707L5.354 4.854a.5.5 0 11-.708-.708l3-3z" />
+    </svg>
+  );
+}
+
+export default IconUpload;
diff --git a/components/ui/icons/IconYoutube.tsx b/components/ui/icons/IconYoutube.tsx
@@ -0,0 +1,18 @@
+// icon:youtube | Ant Design Icons https://ant.design/components/icon/ | Ant Design
+import * as React from "react";
+
+function IconYoutube(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 1024 1024"
+      fill="currentColor"
+      height="1em"
+      width="1em"
+      {...props}
+    >
+      <path d="M960 509.2c0-2.2 0-4.7-.1-7.6-.1-8.1-.3-17.2-.5-26.9-.8-27.9-2.2-55.7-4.4-81.9-3-36.1-7.4-66.2-13.4-88.8a139.52 139.52 0 00-98.3-98.5c-28.3-7.6-83.7-12.3-161.7-15.2-37.1-1.4-76.8-2.3-116.5-2.8-13.9-.2-26.8-.3-38.4-.4h-29.4c-11.6.1-24.5.2-38.4.4-39.7.5-79.4 1.4-116.5 2.8-78 3-133.5 7.7-161.7 15.2A139.35 139.35 0 0082.4 304C76.3 326.6 72 356.7 69 392.8c-2.2 26.2-3.6 54-4.4 81.9-.3 9.7-.4 18.8-.5 26.9 0 2.9-.1 5.4-.1 7.6v5.6c0 2.2 0 4.7.1 7.6.1 8.1.3 17.2.5 26.9.8 27.9 2.2 55.7 4.4 81.9 3 36.1 7.4 66.2 13.4 88.8 12.8 47.9 50.4 85.7 98.3 98.5 28.2 7.6 83.7 12.3 161.7 15.2 37.1 1.4 76.8 2.3 116.5 2.8 13.9.2 26.8.3 38.4.4h29.4c11.6-.1 24.5-.2 38.4-.4 39.7-.5 79.4-1.4 116.5-2.8 78-3 133.5-7.7 161.7-15.2 47.9-12.8 85.5-50.5 98.3-98.5 6.1-22.6 10.4-52.7 13.4-88.8 2.2-26.2 3.6-54 4.4-81.9.3-9.7.4-18.8.5-26.9 0-2.9.1-5.4.1-7.6v-5.6zm-72 5.2c0 2.1 0 4.4-.1 7.1-.1 7.8-.3 16.4-.5 25.7-.7 26.6-2.1 53.2-4.2 77.9-2.7 32.2-6.5 58.6-11.2 76.3-6.2 23.1-24.4 41.4-47.4 47.5-21 5.6-73.9 10.1-145.8 12.8-36.4 1.4-75.6 2.3-114.7 2.8-13.7.2-26.4.3-37.8.3h-28.6l-37.8-.3c-39.1-.5-78.2-1.4-114.7-2.8-71.9-2.8-124.9-7.2-145.8-12.8-23-6.2-41.2-24.4-47.4-47.5-4.7-17.7-8.5-44.1-11.2-76.3-2.1-24.7-3.4-51.3-4.2-77.9-.3-9.3-.4-18-.5-25.7 0-2.7-.1-5.1-.1-7.1v-4.8c0-2.1 0-4.4.1-7.1.1-7.8.3-16.4.5-25.7.7-26.6 2.1-53.2 4.2-77.9 2.7-32.2 6.5-58.6 11.2-76.3 6.2-23.1 24.4-41.4 47.4-47.5 21-5.6 73.9-10.1 145.8-12.8 36.4-1.4 75.6-2.3 114.7-2.8 13.7-.2 26.4-.3 37.8-.3h28.6l37.8.3c39.1.5 78.2 1.4 114.7 2.8 71.9 2.8 124.9 7.2 145.8 12.8 23 6.2 41.2 24.4 47.4 47.5 4.7 17.7 8.5 44.1 11.2 76.3 2.1 24.7 3.4 51.3 4.2 77.9.3 9.3.4 18 .5 25.7 0 2.7.1 5.1.1 7.1v4.8zM423 646l232-135-232-133z" />
+    </svg>
+  );
+}
+
+export default IconYoutube;