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

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

@ -1,85 +1,98 @@
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>
<p className="flex flex-col lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
Your project has been deployed at{' '} Your project has been deployed at{' '}
<Link to="https://www.iglootools.snowballtools.xyz"> <Link to="https://www.iglootools.snowballtools.xyz">
<span className="text-blue-600"> <span className="flex gap-1.5 text-elements-link">
^ www.iglootools.snowballtools.xyz <LinkChainIcon size={18} />
www.iglootools.snowballtools.xyz
</span> </span>
</Link> </Link>
</span> </p>
</div>
</div> </div>
<div className="bg-gray-100 rounded border w-full"> {/* Card */}
<div className="flex justify-center items-center h-14"> <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
^?&nbsp;<h6>Wondering what’s next?</h6> {/* Trigger question */}
<div className="flex gap-2 justify-center items-center py-3">
<div className="h-5 w-5">
<QuestionMarkRoundFilledIcon size={18} />
</div> </div>
<div className="bg-white rounded border w-full"> <Heading as="h5" className="font-sans font-medium text-sm">
<div className="flex p-4"> Wondering what’s next?
<div className="w-6"> 1</div> </Heading>
<div className="grow"> </div>
<h6>Add a custom domain</h6>
<p className="text-sm text-gray-500"> {/* CTA card */}
<div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
<div className="flex gap-2">
<Badge variant="secondary">1</Badge>
<div className="space-y-3">
<div className="flex flex-col gap-1">
<Heading as="h6" className="text-sm font-sans">
Add a custom domain
</Heading>
<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"> </div>
<Button <Button onClick={handleSetupDomain} variant="tertiary" size="sm">
className="rounded-full"
variant="outlined"
size="sm"
placeholder={''}
>
Setup domain Setup domain
</Button> </Button>
</div> </div>
</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">
<div className="w-full lg:w-fit">
<Link to="/"> <Link to="/">
<Button <Button
className="rounded-full" leftIcon={<ArrowLeftCircleFilledIcon />}
variant="outlined" fullWidth
placeholder={''} variant="tertiary"
> >
^Back to projects Back to projects
</Button> </Button>
</Link> </Link>
</div> </div>
<div> <div className="w-full lg:w-fit">
<Link to={`/${orgSlug}/projects/${id}`}> <Link to={`/${orgSlug}/projects/${id}`}>
<Button <Button fullWidth variant="primary">
className="rounded-full"
variant="gradient"
color="blue"
placeholder={''}
>
View project View project
</Button> </Button>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };