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

⚡️ feat: reskin success create project

Browse Source
This commit is contained in:
Andre H 2024-03-07 10:18:04 +08:00
parent e9ab034625
commit 2ed07a6987
1 changed files with 73 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
View File

@ -1,82 +1,95 @@
import React from 'react'; import React from 'react';
import { Link, useParams } from 'react-router-dom'; import { Link, useParams } from 'react-router-dom';
import { Button } from '@material-tailwind/react'; import { Badge } from 'components/shared/Badge';
import { Button } from 'components/shared/Button';
import {
ArrowLeftCircleFilledIcon,
LinkChainIcon,
QuestionMarkRoundFilledIcon,
} from 'components/shared/CustomIcon';
import { Heading } from 'components/shared/Heading';
const Id = () => { const Id = () => {
const { id, orgSlug } = useParams(); const { id, orgSlug } = useParams();
const handleSetupDomain = () => {
//TODO: Implement this
};
return ( return (
<div className="flex justify-center"> <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto">
<div className="w-1/2"> {/* Icon */}
<div className="flex justify-center">^</div> <div className="flex justify-center">^</div>
<div className="flex flex-col items-center my-10">
<div> {/* Heading */}
<h4>Project deployed successfully.</h4> <div className="flex flex-col items-center gap-1.5">
</div> <Heading as="h3" className="font-medium text-xl">
<div> Project deployed successfully.
<span> </Heading>
Your project has been deployed at{' '} <p className="flex flex-col lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
<Link to="https://www.iglootools.snowballtools.xyz"> Your project has been deployed at{' '}
<span className="text-blue-600"> <Link to="https://www.iglootools.snowballtools.xyz">
^ www.iglootools.snowballtools.xyz <span className="flex gap-1.5 text-elements-link">
</span> <LinkChainIcon size={18} />
</Link> www.iglootools.snowballtools.xyz
</span> </span>
</Link>
</p>
</div>
{/* Card */}
<div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
{/* Trigger question */}
<div className="flex gap-2 justify-center items-center py-3">
<div className="h-5 w-5">
<QuestionMarkRoundFilledIcon size={18} />
</div> </div>
<Heading as="h5" className="font-sans font-medium text-sm">
Wondering what’s next?
</Heading>
</div> </div>
<div className="bg-gray-100 rounded border w-full"> {/* CTA card */}
<div className="flex justify-center items-center h-14"> <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
^?&nbsp;<h6>Wondering what’s next?</h6> <div className="flex gap-2">
</div> <Badge variant="secondary">1</Badge>
<div className="bg-white rounded border w-full"> <div className="space-y-3">
<div className="flex p-4"> <div className="flex flex-col gap-1">
<div className="w-6"> 1</div> <Heading as="h6" className="text-sm font-sans">
<div className="grow"> Add a custom domain
<h6>Add a custom domain</h6> </Heading>
<p className="text-sm text-gray-500"> <p className="text-xs text-elements-low-em font-sans">
Make it easy for your visitors to remember your URL with a Make it easy for your visitors to remember your URL with a
custom domain. custom domain.
</p> </p>
<div className="my-2">
<Button
className="rounded-full"
variant="outlined"
size="sm"
placeholder={''}
>
Setup domain
</Button>
</div>
</div> </div>
<Button onClick={handleSetupDomain} variant="tertiary" size="sm">
Setup domain
</Button>
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="flex justify-center p-4 gap-2 my-5"> {/* CTA Buttons */}
<div> <div className="flex flex-col lg:flex-row justify-center gap-3">
<Link to="/"> <div className="w-full lg:w-fit">
<Button <Link to="/">
className="rounded-full" <Button
variant="outlined" leftIcon={<ArrowLeftCircleFilledIcon />}
placeholder={''} fullWidth
> variant="tertiary"
^Back to projects >
</Button> Back to projects
</Link> </Button>
</div> </Link>
<div> </div>
<Link to={`/${orgSlug}/projects/${id}`}> <div className="w-full lg:w-fit">
<Button <Link to={`/${orgSlug}/projects/${id}`}>
className="rounded-full" <Button fullWidth variant="primary">
variant="gradient" View project
color="blue" </Button>
placeholder={''} </Link>
>
View project
</Button>
</Link>
</div>
</div> </div>
</div> </div>
</div> </div>