first commit

app/src/components/Dashboard/DashboardTutorial.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import DashboardNavBar from './DashboardNavBar';
+import DashboardCard from './DashboardCard';
+import { projectTutorial } from '../../services/dashboard/projectTutorial';
+interface Project {
+    _id: string;
+    projectName: string;
+    thumbnail: string;
+    createdBy: string;
+    projectUuid?: string;
+}
+
+interface DiscardedProjects {
+    [key: string]: Project[];
+}
+
+const DashboardTutorial = () => {
+    const [tutorialProject, setTutorialProject] = useState<DiscardedProjects>({})
+    const handleIcon = async () => {
+        try {
+            let tutorial = await projectTutorial()
+            setTutorialProject(tutorial)
+        } catch {
+
+        }
+    }
+    useEffect(() => {
+        handleIcon()
+    }, [])
+    const renderTrashProjects = () => {
+        const projectList = tutorialProject[Object.keys(tutorialProject)[0]];
+
+        if (!projectList?.length) {
+            return <div className="empty-state">No deleted projects found</div>;
+        }
+
+        return projectList.map((tutorials: any) => (
+            <DashboardCard
+                key={tutorials._id}
+                projectName={tutorials.projectName}
+                thumbnail={tutorials.thumbnail}
+                projectId={tutorials._id}
+            />
+        ));
+    };
+    return (
+        <div className="dashboard-home-container">
+            <DashboardNavBar
+                page="tutorial"
+            />
+
+            <div className="container" style={{ height: "calc(100% - 87px)" }}>
+                <div className="header" style={{ display: 'flex', gap: '7px' }}></div>
+                <div className="cards-container">
+                    {renderTrashProjects()}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default DashboardTutorial;