mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 01:15:03 +03:00
292c08b7b7
## 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? Feature ## What is the current behavior? Region and data residency information is split across docs, `/security`, and legal pages. [MARKET-1866](https://linear.app/supabase/issue/MARKET-1866/package-and-display-available-regions-better-on-website) ## What is the new behavior? Adds `/regions`: a catalog of all 17 regions generated from `regions.ts`, plus what stays in-region, the Europe vs EU caveat, and links to the DPA, GDPR guide, sub-processor list, and security page. Regions is in the footer under Security & Compliance. The security page residency card now links here. ## Test plan - [ ] Open `/regions` in light and dark mode - [ ] Confirm the region count and list match `packages/shared-data/regions.ts` - [ ] Confirm footer Regions link and `/security` residency link go to `/regions` Made with [Cursor](https://cursor.com) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a Regions page showcasing available AWS regions by geography. - Added an interactive map and region list with selection, hover states, keyboard accessibility, and residency badges. - Included data residency guidance, legal resources, and a call-to-action for next steps. - Added Regions links in the site footer and security documentation. - **Documentation** - Updated agent skill resources with expanded troubleshooting and operational guidance. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { X } from 'lucide-react'
|
|
import { Button } from 'ui'
|
|
|
|
import type { RegionDetails } from './Regions.constants'
|
|
|
|
interface Props {
|
|
region: RegionDetails
|
|
isSelected: boolean
|
|
onClear: () => void
|
|
}
|
|
|
|
export const RegionTooltip = ({ region, isSelected, onClear }: Props) => (
|
|
<div className="flex items-center gap-1.5 rounded-md border bg-surface-100/95 px-1.5 py-1 shadow-xs backdrop-blur-sm">
|
|
{/* Flags are SVGs, which next/image can't serve while dangerouslyAllowSVG is off */}
|
|
<img alt="" className="w-3.5 shrink-0 rounded-xs" src={`/images/regions/${region.code}.svg`} />
|
|
<div className="flex min-w-0 flex-col leading-tight">
|
|
<span className="truncate text-[11px] text-foreground">{region.displayName}</span>
|
|
<span className="truncate font-mono text-[10px] text-foreground-lighter">{region.code}</span>
|
|
</div>
|
|
{isSelected && (
|
|
<Button
|
|
variant="text"
|
|
size="tiny"
|
|
icon={<X size={12} />}
|
|
onClick={onClear}
|
|
aria-label="Clear selected region"
|
|
className="pointer-events-auto ml-0.5 h-4 w-4 p-0"
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|