added workspace

.gitignore

@@ -37,4 +37,4 @@ yarn-error.log*
 next-env.d.ts
 
 node_modules
-temp
+temp/

app/(main)/dummy-projects.ts

@@ -0,0 +1,245 @@
+import { Project } from "@/types/Project";
+import { Artifact } from "@/types/Artifact";
+
+const createDummyArtifact = (name: string): Artifact => ({
+    id: Math.random().toString(36).substr(2, 9),
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    name,
+    prompt: "Dummy prompt",
+    code: "console.log('Hello, World!');",
+    dependencies: {},
+    template: "default",
+});
+
+
+export const dummyProjects: Project[] = [
+    {
+        id: "1",
+        title: "AI Chatbot",
+        description:
+            "An intelligent chatbot powered by machine learning algorithms.",
+        context: [],
+        artifacts: [createDummyArtifact("Main"), createDummyArtifact("Utils")],
+        entrypoint: createDummyArtifact("Main"),
+        createdAt: new Date("2023-01-15"),
+        updatedAt: new Date("2023-04-20"),
+        createdBy: "user1",
+        updatedBy: "user1",
+        publishedUrl: "https://ai-chatbot.example.com",
+        status: "Active",
+        thumbnail:
+            "https://images.unsplash.com/photo-1531746790731-6c087fecd65a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "2",
+        title: "Image Recognition App",
+        description:
+            "A mobile app that can identify objects in photos using computer vision.",
+        context: [],
+        artifacts: [
+            createDummyArtifact("ImageProcessor"),
+            createDummyArtifact("UI"),
+        ],
+        entrypoint: createDummyArtifact("UI"),
+        createdAt: new Date("2023-02-28"),
+        updatedAt: new Date("2023-05-10"),
+        createdBy: "user2",
+        updatedBy: "user2",
+        publishedUrl: "",
+        status: "In Development",
+        thumbnail:
+            "https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "3",
+        title: "Data Visualization Tool",
+        description:
+            "An interactive web application for creating stunning data visualizations.",
+        context: [],
+        artifacts: [
+            createDummyArtifact("DataLoader"),
+            createDummyArtifact("Visualizer"),
+        ],
+        entrypoint: createDummyArtifact("Visualizer"),
+        createdAt: new Date("2023-03-10"),
+        updatedAt: new Date("2023-05-15"),
+        createdBy: "user3",
+        updatedBy: "user3",
+        publishedUrl: "https://data-viz-tool.example.com",
+        status: "Active",
+        thumbnail:
+            "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "1",
+        title: "AI Chatbot",
+        description:
+            "An intelligent chatbot powered by machine learning algorithms.",
+        context: [],
+        artifacts: [createDummyArtifact("Main"), createDummyArtifact("Utils")],
+        entrypoint: createDummyArtifact("Main"),
+        createdAt: new Date("2023-01-15"),
+        updatedAt: new Date("2023-04-20"),
+        createdBy: "user1",
+        updatedBy: "user1",
+        publishedUrl: "https://ai-chatbot.example.com",
+        status: "Active",
+        thumbnail:
+            "https://images.unsplash.com/photo-1531746790731-6c087fecd65a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "2",
+        title: "Image Recognition App",
+        description:
+            "A mobile app that can identify objects in photos using computer vision.",
+        context: [],
+        artifacts: [
+            createDummyArtifact("ImageProcessor"),
+            createDummyArtifact("UI"),
+        ],
+        entrypoint: createDummyArtifact("UI"),
+        createdAt: new Date("2023-02-28"),
+        updatedAt: new Date("2023-05-10"),
+        createdBy: "user2",
+        updatedBy: "user2",
+        publishedUrl: "",
+        status: "In Development",
+        thumbnail:
+            "https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "3",
+        title: "Data Visualization Tool",
+        description:
+            "An interactive web application for creating stunning data visualizations.",
+        context: [],
+        artifacts: [
+            createDummyArtifact("DataLoader"),
+            createDummyArtifact("Visualizer"),
+        ],
+        entrypoint: createDummyArtifact("Visualizer"),
+        createdAt: new Date("2023-03-10"),
+        updatedAt: new Date("2023-05-15"),
+        createdBy: "user3",
+        updatedBy: "user3",
+        publishedUrl: "https://data-viz-tool.example.com",
+        status: "Active",
+        thumbnail:
+            "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "1",
+        title: "AI Chatbot",
+        description:
+            "An intelligent chatbot powered by machine learning algorithms.",
+        context: [],
+        artifacts: [createDummyArtifact("Main"), createDummyArtifact("Utils")],
+        entrypoint: createDummyArtifact("Main"),
+        createdAt: new Date("2023-01-15"),
+        updatedAt: new Date("2023-04-20"),
+        createdBy: "user1",
+        updatedBy: "user1",
+        publishedUrl: "https://ai-chatbot.example.com",
+        status: "Active",
+        thumbnail:
+            "https://images.unsplash.com/photo-1531746790731-6c087fecd65a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "2",
+        title: "Image Recognition App",
+        description:
+            "A mobile app that can identify objects in photos using computer vision.",
+        context: [],
+        artifacts: [
+            createDummyArtifact("ImageProcessor"),
+            createDummyArtifact("UI"),
+        ],
+        entrypoint: createDummyArtifact("UI"),
+        createdAt: new Date("2023-02-28"),
+        updatedAt: new Date("2023-05-10"),
+        createdBy: "user2",
+        updatedBy: "user2",
+        publishedUrl: "",
+        status: "In Development",
+        thumbnail:
+            "https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "3",
+        title: "Data Visualization Tool",
+        description:
+            "An interactive web application for creating stunning data visualizations.",
+        context: [],
+        artifacts: [
+            createDummyArtifact("DataLoader"),
+            createDummyArtifact("Visualizer"),
+        ],
+        entrypoint: createDummyArtifact("Visualizer"),
+        createdAt: new Date("2023-03-10"),
+        updatedAt: new Date("2023-05-15"),
+        createdBy: "user3",
+        updatedBy: "user3",
+        publishedUrl: "https://data-viz-tool.example.com",
+        status: "Active",
+        thumbnail:
+            "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "1",
+        title: "AI Chatbot",
+        description:
+            "An intelligent chatbot powered by machine learning algorithms.",
+        context: [],
+        artifacts: [createDummyArtifact("Main"), createDummyArtifact("Utils")],
+        entrypoint: createDummyArtifact("Main"),
+        createdAt: new Date("2023-01-15"),
+        updatedAt: new Date("2023-04-20"),
+        createdBy: "user1",
+        updatedBy: "user1",
+        publishedUrl: "https://ai-chatbot.example.com",
+        status: "Active",
+        thumbnail:
+            "https://images.unsplash.com/photo-1531746790731-6c087fecd65a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "2",
+        title: "Image Recognition App",
+        description:
+            "A mobile app that can identify objects in photos using computer vision.",
+        context: [],
+        artifacts: [
+            createDummyArtifact("ImageProcessor"),
+            createDummyArtifact("UI"),
+        ],
+        entrypoint: createDummyArtifact("UI"),
+        createdAt: new Date("2023-02-28"),
+        updatedAt: new Date("2023-05-10"),
+        createdBy: "user2",
+        updatedBy: "user2",
+        publishedUrl: "",
+        status: "In Development",
+        thumbnail:
+            "https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+    {
+        id: "3",
+        title: "Data Visualization Tool",
+        description:
+            "An interactive web application for creating stunning data visualizations.",
+        context: [],
+        artifacts: [
+            createDummyArtifact("DataLoader"),
+            createDummyArtifact("Visualizer"),
+        ],
+        entrypoint: createDummyArtifact("Visualizer"),
+        createdAt: new Date("2023-03-10"),
+        updatedAt: new Date("2023-05-15"),
+        createdBy: "user3",
+        updatedBy: "user3",
+        publishedUrl: "https://data-viz-tool.example.com",
+        status: "Active",
+        thumbnail:
+            "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+    },
+];

app/(main)/workspace.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import Header from "@/components/Header";
+import ProjectList from "@/components/ProjectList";
+import CreateProjectButton from "@/components/CreateProjectButton";
+import ProjectOverviewInputForm from "@/components/ProjectOverviewInputForm";
+import { Project } from "@/types/Project";
+import EmptyProjectMessage from "@/components/EmptyProjectMessage";
+import { dummyProjects } from "./dummy-projects";
+import HeaderV2 from "@/components/HeaderV2";
+import WorkspaceHeader from "@/components/WorkspaceHeader";
+
+// const dummyProjects: Project[] = [];
+
+const Dashboard: React.FC = () => {
+  const [showCreateForm, setShowCreateForm] = useState(false);
+
+  const handleCreateProject = () => setShowCreateForm(true);
+  const handleCancelCreate = () => setShowCreateForm(false);
+
+  const handleNextCreate = (description: string) => {
+    console.log("New project description:", description);
+    setShowCreateForm(false);
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <HeaderV2 />
+      {/* <WorkspaceHeader project={dummyProjects[1]} /> */}
+      <main className="flex-1 w-full mt-16">
+      </main>
+    </div>
+  );
+};
+
+export default Dashboard;

components/HeaderV2.tsx

@@ -1,31 +1,58 @@
-import React from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
 import logo from "../public/logo.png";
 
 const HeaderV2: React.FC = () => {
+
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-gray-50 shadow-sm">
+    <header className="fixed left-0 right-0 top-0 z-50 bg-gray-50 shadow-sm">
       <div className="w-full">
-        <div className="flex items-center justify-between h-16 px-4">
+        <div className="flex h-16 items-center justify-between px-4">
           <div className="flex items-center space-x-4">
-            <button className="text-gray-600 hover:bg-gray-200 p-1 rounded-full">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            <button className="rounded-full p-1 text-gray-600 hover:bg-gray-200">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
               </svg>
             </button>
-            <Image src={logo} alt="Loom Logo" width={24} height={24} />
-            <h1 className="text-lg font-normal text-gray-800">Library | Loom - 3 September 2024</h1>
+            <Image src={logo} alt="Artifact Logo" width={24} height={24} />
+            <h1 className="text-xl tracking-tight">
+              Ar<span className="text-blue-600">TI</span>facts
+            </h1>
           </div>
           <div className="flex items-center space-x-6">
-            <button className="text-gray-600 hover:bg-gray-200 p-2 rounded-full relative">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            <button className="relative rounded-full p-2 text-gray-600 hover:bg-gray-200">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                />
               </svg>
-              <span className="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full"></span>
+              <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-red-500"></span>
             </button>
             <Link href="/" className="text-gray-600">
-              <span className="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-semibold">A</span>
+              <span className={`bg-green-600 flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold text-white`}>
+                A
+              </span>
             </Link>
           </div>
         </div>
@@ -34,4 +61,4 @@ const HeaderV2: React.FC = () => {
   );
 };
 
-export default HeaderV2;
+export default HeaderV2;

components/ProjectOverview.tsx

@@ -11,6 +11,18 @@ const ProjectOverview: React.FC<ProjectOverviewProps> = ({ project }) => {
   // Mock tags - replace with actual project tags when available
   const mockTags = ['React', 'TypeScript', 'AI', 'Mobile'];
   const projectTags = mockTags.slice(0, Math.floor(Math.random() * 3) + 1);
+  const contributors = [1, 2, 3];
+
+  // Function to generate a color based on the createdBy string
+  const getColorFromString = (str: string) => {
+    const colors =[ 'red', 'green', "yellow"];
+    const hash = str.split('').reduce((acc, char) => char.charCodeAt(0) + acc, 0);
+    console.log(hash);
+    console.log(colors[hash % colors.length], project.createdBy);
+    return colors[hash % colors.length];
+  };
+
+  const projectColor = getColorFromString(project.createdBy);
 
   return (
     <div className="bg-white/60 backdrop-blur-md rounded-xl shadow-sm p-4 transition-all duration-300 hover:shadow-md hover:translate-y-[-2px] bg-gradient-to-br from-blue-50/80 to-white/70">
@@ -27,13 +39,14 @@ const ProjectOverview: React.FC<ProjectOverviewProps> = ({ project }) => {
 
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center flex-grow">
-          <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-medium text-sm mr-3">
+          <div className={`w-8 h-8 bg-${projectColor}-500 rounded-full flex items-center justify-center text-white font-medium text-sm mr-3`}>
             {project.createdBy[0].toUpperCase()}
           </div>
           <div>
             <h3 className="text-lg font-semibold text-gray-800">{project.title}</h3>
             <p className="text-xs text-gray-500">
-              {project.createdBy} · {project.createdAt.toLocaleDateString()}
+              {project.updatedBy} · {project.updatedAt.toLocaleDateString()} · 
+              <span className="ml-1 font-medium">{contributors.length} contributor{contributors.length !== 1 ? 's' : ''}</span>
             </p>
           </div>
         </div>

components/WorkspaceHeader.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import logo from "../public/logo.png";
+import Image from "next/image";
+import Link from "next/link";
+import { Project } from "@/types/Project";
+
+type WorkspaceHeaderProps = {
+  project: Project;
+}
+
+const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({ project }) => {
+  return (
+    <header className="fixed left-0 right-0 top-0 z-50 bg-gray-50 shadow-sm">
+      <div className="w-full">
+        <div className="flex h-16 items-center justify-between px-4">
+          <div className="flex items-center space-x-4">
+            <button className="rounded-full p-1 text-gray-600 hover:bg-gray-200">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </button>
+            <Image src={logo} alt="Artifact Logo" width={24} height={24} />
+            <h1 className="text-lg font-normal text-gray-800">
+              {project.title}
+            </h1>
+          </div>
+          <div className="flex items-center space-x-6">
+            <span className="text-sm text-gray-600">0 views</span>
+            <button className="flex items-center space-x-1 rounded-full bg-blue-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-blue-700">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+                />
+              </svg>
+              <span>Share</span>
+            </button>
+            <button className="rounded-full p-2 text-blue-600 hover:bg-blue-100">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                />
+              </svg>
+            </button>
+            <button className="rounded-full p-2 text-gray-600 hover:bg-gray-200">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+            </button>
+            <button className="relative rounded-full p-2 text-gray-600 hover:bg-gray-200">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                />
+              </svg>
+              <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-red-500"></span>
+            </button>
+            <button className="rounded-full p-2 text-gray-600 hover:bg-gray-200">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
+                />
+              </svg>
+            </button>
+            <Link href="/profile" className="text-gray-600">
+              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600 text-sm font-semibold text-white"></span>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default WorkspaceHeader;