Implement layout for deploy success page (#9)

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

packages/frontend/src/components/DeployStep.tsx

@@ -3,8 +3,11 @@ import React, { useState } from 'react';
 import { Stopwatch, setStopWatchOffset } from './StopWatch';
 import FormatMillisecond from './FormatMilliSecond';
 
-const PROCESS_LOG =
+const PROCESS_LOGS = [
-  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";
+  'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+  'Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.',
+  'When an unknown printer took a galley of type and scrambled it to make a type specimen book.',
+];
 
 enum DeployStatus {
   PROCESSING = 'progress',
@@ -58,7 +61,9 @@ const DeployStep = ({
         )}
       </div>
       <div className={`text-sm ${!collapse ? 'hidden' : ''}`}>
-        {PROCESS_LOG}
+        {PROCESS_LOGS.map((log, key) => {
+          return <p key={key}>{log}</p>;
+        })}
       </div>
     </>
   );

packages/frontend/src/components/FormatMilliSecond.tsx

@@ -5,6 +5,7 @@ const FormatMillisecond = ({ time }: { time: number }) => {
   const formatTime = Duration.fromMillis(time)
     .shiftTo('days', 'hours', 'minutes', 'seconds')
     .toObject();
+
   return (
     <div>
       {formatTime.days !== 0 && <span>{formatTime.days}d&nbsp;</span>}

packages/frontend/src/pages/projects/create/Success.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Button } from '@material-tailwind/react';
+import { Link } from 'react-router-dom';
+
+const Success = () => {
+  return (
+    <div className="flex justify-center">
+      <div className="w-1/2">
+        <div className="flex justify-center">^</div>
+        <div className="flex flex-col items-center my-10">
+          <div>
+            <h4>Project deployed successfully.</h4>
+          </div>
+          <div>
+            <span>
+              Your project has been deployed at{' '}
+              <Link to="https://www.iglootools.snowballtools.xyz">
+                <span className="text-blue-600">
+                  ^www.iglootools.snowballtools.xyz
+                </span>
+              </Link>
+            </span>
+          </div>
+        </div>
+
+        <div className="bg-gray-100 rounded border w-full">
+          <div className="flex justify-center items-center h-14">
+            ^?&nbsp;<h6>Wondering what’s next?</h6>
+          </div>
+          <div className="bg-white rounded border w-full">
+            <div className="flex p-4">
+              <div className="w-6"> 1</div>
+              <div className="grow">
+                <h6>Add a custom domain</h6>
+                <p className="text-sm text-gray-500">
+                  Make it easy for your visitors to remember your URL with a
+                  custom domain.
+                </p>
+                <div className="my-2">
+                  <Button className="rounded-full" variant="outlined" size="sm">
+                    Setup domain
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-center p-4 gap-2 my-5">
+          <div>
+            <Link to="/">
+              <Button className="rounded-full" variant="outlined">
+                ^Back to projects
+              </Button>
+            </Link>
+          </div>
+          <div>
+            <Link to="/projects/1">
+              <Button className="rounded-full" variant="gradient" color="blue">
+                View project
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Success;

packages/frontend/src/pages/projects/create/routes.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import NewProject from './index';
 import CreateWithTemplate from './Template';
 import { templateRoutes } from './template/routes';
+import Success from './Success';
 
 export const createProjectRoutes = [
   {
@@ -14,4 +15,8 @@ export const createProjectRoutes = [
     element: <CreateWithTemplate />,
     children: templateRoutes,
   },
+  {
+    path: 'success',
+    element: <Success />,
+  },
 ];