🔧 chore: use lottie for success logo

This commit is contained in:
Andre H 2024-03-07 11:42:12 +08:00
parent 6b0548ec47
commit 646099707c
2 changed files with 9 additions and 3 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Link, useParams } from 'react-router-dom'; import { Link, useParams } from 'react-router-dom';
import Lottie from 'lottie-react';
import { Badge } from 'components/shared/Badge'; import { Badge } from 'components/shared/Badge';
import { Button } from 'components/shared/Button'; import { Button } from 'components/shared/Button';
@ -10,6 +11,8 @@ import {
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
import { Heading } from 'components/shared/Heading'; import { Heading } from 'components/shared/Heading';
import logoAnimation from 'components/../../public/lottie/logo.json';
const Id = () => { const Id = () => {
const { id, orgSlug } = useParams(); const { id, orgSlug } = useParams();
@ -17,16 +20,18 @@ const Id = () => {
//TODO: Implement this //TODO: Implement this
}; };
return ( return (
<div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto"> <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
{/* Icon */} {/* Icon */}
<div className="flex justify-center">^</div> <div className="flex justify-center">
<Lottie animationData={logoAnimation} loop={false} size={40} />
</div>
{/* Heading */} {/* Heading */}
<div className="flex flex-col items-center gap-1.5"> <div className="flex flex-col items-center gap-1.5">
<Heading as="h3" className="font-medium text-xl"> <Heading as="h3" className="font-medium text-xl">
Project deployed successfully. Project deployed successfully.
</Heading> </Heading>
<p className="flex flex-col lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em"> <p className="flex flex-col items-center 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="flex gap-1.5 text-elements-link"> <span className="flex gap-1.5 text-elements-link">