Create layout for deployments pannel (#4)

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/assets/deployments.json

@@ -0,0 +1,38 @@
+[
+  {
+    "title": "nextjs-bolerplate-9t44zbky4dg-bygideon-projects",
+    "status": "Building",
+    "environment": "Production",
+    "branch": "prod",
+    "commit": {
+      "hash": "9haif19",
+      "message": "Update hover state"
+    },
+    "author": "Gideon",
+    "updatedAt": "2023-12-11T04:20:00"
+  },
+  {
+    "title": "nextjs-bolerplate-9232dwky4dg-bygideon-projects",
+    "status": "Ready",
+    "environment": "Preview",
+    "branch": "prod",
+    "commit": {
+      "hash": "43de569",
+      "message": "Fix lint errors"
+    },
+    "author": "Brad",
+    "updatedAt": "2023-12-11T04:20:00"
+  },
+  {
+    "title": "nextjs-bolerplate-9saa22y4dg-bygideon-projects",
+    "status": "Error",
+    "environment": "Production",
+    "branch": "main",
+    "commit": {
+      "hash": "4hdsf19",
+      "message": "Apply style to button"
+    },
+    "author": "Alice",
+    "updatedAt": "2023-12-11T04:20:00"
+  }
+]

packages/frontend/src/components/DeploymentDetailsCard.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { relativeTime } from '../utils/time';
+
+interface DeploymentDetails {
+  title: string;
+  status: string;
+  environment: string;
+  branch: string;
+  commit: {
+    hash: string;
+    message: string;
+  };
+  author: string;
+  updatedAt: string;
+}
+
+interface DeployDetailsCardProps {
+  deployment: DeploymentDetails;
+}
+
+const DeployDetailsCard = ({ deployment }: DeployDetailsCardProps) => {
+  return (
+    <div className="grid grid-cols-4 gap-2 text-sm text-gray-600 border-b border-gray-300">
+      <div className="col-span-2">
+        <div className="flex">
+          <p className=" text-gray-900 basis-2/3">{deployment.title}</p>
+          <p className="basis-1/3">{deployment.status}</p>
+        </div>
+        <p>{deployment.environment}</p>
+      </div>
+      <div className="col-span-1">
+        <p>{deployment.branch}</p>
+        <p>
+          {deployment.commit.hash} {deployment.commit.message}
+        </p>
+      </div>
+      <div className="col-span-1 flex items-center">
+        <p className="grow">
+          {relativeTime(deployment.updatedAt)} ^ {deployment.author}
+        </p>
+        <button className="self-start">...</button>
+      </div>
+    </div>
+  );
+};
+
+export default DeployDetailsCard;

packages/frontend/src/components/Deployments.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import deploymentDetails from '../assets/deployments.json';
+import DeployDetailsCard from './DeploymentDetailsCard';
+
+const Deployments = () => {
+  return (
+    <div className="p-4">
+      <div className="grid grid-cols-4 gap-2 text-sm text-gray-600">
+        <div className="col-span-2">
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-2 w-full focus:border-blue-300 focus:outline-none focus:shadow-outline-blue"
+            placeholder="Search branches"
+          />
+        </div>
+        <div className="col-span-1">
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-2 w-full focus:border-blue-300 focus:outline-none focus:shadow-outline-blue"
+            placeholder="All time"
+          />
+        </div>
+        <div className="col-span-1">
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-2 w-full focus:border-blue-300 focus:outline-none focus:shadow-outline-blue"
+            placeholder="All status"
+          />
+        </div>
+      </div>
+      <div className="mt-2">
+        {deploymentDetails.map((deployment, key) => {
+          return <DeployDetailsCard deployment={deployment} key={key} />;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Deployments;

packages/frontend/src/components/Overview.tsx

@@ -21,7 +21,7 @@ const Overview = ({ project }: OverviewProps) => (
       </div>
       <div className="flex justify-between p-2 text-sm">
         <p>Domain</p>
-        <button>Set up</button>
+        {project.domain ? <p>{project.domain}</p> : <button>Set up</button>}
       </div>
       <div className="flex justify-between p-2 text-sm">
         <p>Source</p>

packages/frontend/src/components/Sidebar.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 const Sidebar = () => {
   return (
     <div className="flex flex-col h-full p-4">
       <div className="grow">
         <div>
+          <Link to="/">
             <h3 className="text-black text-2xl">Snowball</h3>
+          </Link>
         </div>
         <div>Organization</div>
         <div>

packages/frontend/src/components/Tab.tsx

@@ -2,20 +2,13 @@ import React from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
 import Overview from './Overview';
+import Deployments from './Deployments';
 import { ProjectDetails } from '../types/project';
 
 interface ProjectTabsProps {
   project: ProjectDetails;
 }
 
-const Deployments = () => (
-  <div>
-    Content of deployments tab
-    <p className="block">
-      Contrary to popular belief, Lorem Ipsum is not simply random text.
-    </p>
-  </div>
-);
 const Database = () => (
   <div>
     Content of database tab