mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
kemal.earthandClaude Opus 5
41e6d489f8
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Initial build of the URL mode interstitial. Has complete mock data to be able to view different states (this will be stripped out in the end). A starting point for us to use as an intercept. This is linked with @barryroodt ticket in the MCP project. https://github.com/supabase/mcp/pull/412 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added an authenticated MCP Secrets page for securely storing API secrets requested by AI tools. - Added provider-aware guidance for OpenAI, Anthropic, Resend, and Stripe keys, including validation warnings and dashboard links. - Added clear success, cancellation, expiration, error, and wrong-account states with account switching. - Added loading placeholders, secret visibility controls, overwrite warnings, and accessibility announcements. - **Bug Fixes** - Improved interstitial animations to respect reduced-motion preferences. - Preserved return destinations and related parameters during sign-in flows. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { cn, Skeleton } from 'ui'
|
|
|
|
import { InterstitialLayout, SupabaseLogo } from '@/components/layouts/InterstitialLayout'
|
|
|
|
export const InterstitialShell = ({
|
|
title,
|
|
subtitle,
|
|
children,
|
|
}: {
|
|
title: ReactNode
|
|
subtitle: ReactNode
|
|
children: ReactNode
|
|
}) => (
|
|
<InterstitialLayout
|
|
logo={<SupabaseLogo />}
|
|
title={title}
|
|
description={subtitle}
|
|
descriptionClassName="text-foreground-light"
|
|
>
|
|
<div className="flex flex-col gap-6 px-6 pb-6">{children}</div>
|
|
</InterstitialLayout>
|
|
)
|
|
|
|
export const InterstitialShellSkeleton = ({ children }: { children: ReactNode }) => (
|
|
<InterstitialShell
|
|
title={<Skeleton className="h-[18px] w-40" />}
|
|
subtitle={
|
|
<div className="flex flex-col items-center gap-1.5">
|
|
<Skeleton className="h-3.5 w-full" />
|
|
<Skeleton className="h-3.5 w-3/4" />
|
|
</div>
|
|
}
|
|
>
|
|
{children}
|
|
</InterstitialShell>
|
|
)
|
|
|
|
export const InterstitialFooter = ({
|
|
children,
|
|
align = 'center',
|
|
}: {
|
|
children: ReactNode
|
|
align?: 'center' | 'start'
|
|
}) => (
|
|
<p
|
|
className={cn(
|
|
'text-xs text-foreground-light',
|
|
align === 'center' ? 'text-center' : 'text-left'
|
|
)}
|
|
>
|
|
{children}
|
|
</p>
|
|
)
|