mirror of
https://github.com/simstudioai/sim.git
synced 2026-04-06 03:00:16 -04:00
680c9cddf0
* fix(sidebar): show icon-sized skeletons in collapsed settings sidebar * fix(sidebar): hide expanded skeletons during pre-hydration in collapsed settings * fix(sidebar): align collapsed settings skeletons with actual icon positions * fix(sidebar): match collapsed skeleton section grouping with loaded layout * fix(sidebar): hoist skeleton section counts to module constant * improvement(ui): align all public pages with dark landing theme and improve whitelabeling * fix(ui): address PR review comments - restore StatusPageLayout wrapper, improve whitelabel detection * fix(ui): add missing dark class to 404 page, add relative positioning to invite layout * fix(ui): fallback to white button when whitelabeled without primary color * improvement(seo): add x-default hreflang, speakable schema to landing and blog posts * fix(ui): fix OTP/input light-mode styles and add missing header classes on standalone auth pages * undo hardcoded ff config * update old components/ui usage to emcn * fix(ui): add SupportFooter to InviteLayout, remove duplicates from unsubscribe page * fix(ui): fix invite layout flex centering, use BrandedButton on 404 page * fix(ui): fix OTP group styling, props spread order in BrandedButton, invite header shrink-0 * fix: enterprise hydration error --------- Co-authored-by: Emir Karabeg <emirkarabeg@berkeley.edu>
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { Loader2 } from 'lucide-react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { BrandedButton } from '@/app/(auth)/components/branded-button'
|
|
|
|
interface InviteStatusCardProps {
|
|
type: 'login' | 'loading' | 'error' | 'success' | 'invitation' | 'warning'
|
|
title: string
|
|
description: string | React.ReactNode
|
|
icon?: 'userPlus' | 'mail' | 'users' | 'error' | 'success' | 'warning'
|
|
actions?: Array<{
|
|
label: string
|
|
onClick: () => void
|
|
disabled?: boolean
|
|
loading?: boolean
|
|
}>
|
|
isExpiredError?: boolean
|
|
}
|
|
|
|
export function InviteStatusCard({
|
|
type,
|
|
title,
|
|
description,
|
|
icon: _icon,
|
|
actions = [],
|
|
isExpiredError = false,
|
|
}: InviteStatusCardProps) {
|
|
const router = useRouter()
|
|
|
|
if (type === 'loading') {
|
|
return (
|
|
<>
|
|
<div className='space-y-1 text-center'>
|
|
<h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>Loading</h1>
|
|
<p className='font-[380] text-[#999] text-[16px]'>{description}</p>
|
|
</div>
|
|
<div className='mt-8 flex w-full items-center justify-center py-8'>
|
|
<Loader2 className='h-8 w-8 animate-spin text-[#999]' />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className='space-y-1 text-center'>
|
|
<h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>{title}</h1>
|
|
<p className='font-[380] text-[#999] text-[16px]'>{description}</p>
|
|
</div>
|
|
|
|
<div className='mt-8 w-full max-w-[410px] space-y-3'>
|
|
{isExpiredError && (
|
|
<BrandedButton onClick={() => router.push('/')} showArrow={false}>
|
|
Request New Invitation
|
|
</BrandedButton>
|
|
)}
|
|
|
|
{actions.map((action, index) => (
|
|
<BrandedButton
|
|
key={index}
|
|
onClick={action.onClick}
|
|
disabled={action.disabled || action.loading}
|
|
loading={action.loading}
|
|
loadingText={action.label}
|
|
showArrow={false}
|
|
className={
|
|
index !== 0
|
|
? 'border-[#3d3d3d] bg-transparent text-[#ECECEC] hover:border-[#3d3d3d] hover:bg-[#2A2A2A]'
|
|
: undefined
|
|
}
|
|
>
|
|
{action.label}
|
|
</BrandedButton>
|
|
))}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|