58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ProfileCreatedProps {
|
|
email: string;
|
|
}
|
|
|
|
/**
|
|
* ProfileCreated widget displays a success message when a user profile is created.
|
|
* Shows the email with an avatar containing the first letter of the email.
|
|
*/
|
|
export function ProfileCreated({ email }: ProfileCreatedProps) {
|
|
// Extract first letter of email in uppercase
|
|
const avatarLetter = email.charAt(0).toUpperCase();
|
|
|
|
return (
|
|
<div className="flex items-center gap-5 rounded-2xl border-2 border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-[18px] w-full">
|
|
{/* Profile section with avatar and email */}
|
|
<div className="flex items-start gap-3 flex-1 min-w-0">
|
|
{/* Avatar with first letter */}
|
|
<div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-blue-900 shadow-[0_2px_4px_0_rgba(0,0,0,0.1),0_4px_6px_0_rgba(0,0,0,0.1)]">
|
|
<span className="text-center font-inter text-xl font-bold leading-7 text-white">
|
|
{avatarLetter}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Email and success message */}
|
|
<div className="flex flex-col items-start min-w-0 flex-1">
|
|
<p className="font-inter text-lg font-semibold leading-7 text-[#333333] break-words w-full">
|
|
{email}
|
|
</p>
|
|
<p className="font-inter text-sm font-medium leading-5 text-blue-600 break-words w-full">
|
|
Profile created successfully
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Success checkmark icon */}
|
|
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center p-2">
|
|
<div className="h-4 w-4 flex-shrink-0">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M16 16H0V0H16V16Z" stroke="#E5E7EB" />
|
|
<path
|
|
d="M15.4222 2.32959C15.8616 2.76904 15.8616 3.48271 15.4222 3.92217L6.42217 12.9222C5.98272 13.3616 5.26904 13.3616 4.82959 12.9222L0.32959 8.42217C-0.109863 7.98272 -0.109863 7.26904 0.32959 6.82959C0.769043 6.39014 1.48271 6.39014 1.92217 6.82959L5.62764 10.5315L13.8331 2.32959C14.2726 1.89014 14.9862 1.89014 15.4257 2.32959H15.4222Z"
|
|
fill="#22C55F"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|