cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement layout for deploy success page (#9)

Browse Source 
Co-authored-by: neeraj <neeraj.rtly@gmail.com>
This commit is contained in:
Nabarun Gogoi 2023-12-19 15:54:15 +05:30 committed by GitHub
parent 620e1aad53
commit 3c220c5dc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 84 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/frontend/src/components/DeployStep.tsx
View File

@ -3,8 +3,11 @@ import React, { useState } from 'react';
import { Stopwatch, setStopWatchOffset } from './StopWatch';
import FormatMillisecond from './FormatMilliSecond';
const PROCESS_LOG =
"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.";
const PROCESS_LOGS = [
'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>
</>
);

1
packages/frontend/src/components/FormatMilliSecond.tsx
View File

@ -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>}

70
packages/frontend/src/pages/projects/create/Success.tsx Normal file
View File

@ -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;

5
packages/frontend/src/pages/projects/create/routes.tsx
View File

@ -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 />,
},
];