Files
supabase/apps/studio/components/interfaces/HomeNew/TopSection.tsx
Alaister Young 5f533247e1 Update docs url to env var (#38772)
* Update Supabase docs URLs to use env variable

Co-authored-by: a <a@alaisteryoung.com>

* Refactor: Use DOCS_URL constant for documentation links

This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.

Co-authored-by: a <a@alaisteryoung.com>

* Refactor: Use DOCS_URL constant for all documentation links

This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.

Co-authored-by: a <a@alaisteryoung.com>

* replace more instances

* ci: Autofix updates from GitHub workflow

* remaining instances

* fix duplicate useRouter

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@users.noreply.github.com>
2025-09-26 10:16:33 +00:00

96 lines
3.3 KiB
TypeScript

import Link from 'next/link'
import { ActivityStats } from 'components/interfaces/HomeNew/ActivityStats'
import { ProjectPausedState } from 'components/layouts/ProjectLayout/PausedState/ProjectPausedState'
import { ComputeBadgeWrapper } from 'components/ui/ComputeBadgeWrapper'
import { InlineLink } from 'components/ui/InlineLink'
import { ProjectUpgradeFailedBanner } from 'components/ui/ProjectUpgradeFailedBanner'
import { DOCS_URL } from 'lib/constants'
import { ReactFlowProvider } from 'reactflow'
import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
import { InstanceConfiguration } from '../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration'
interface TopSectionProps {
projectName: string
isMainBranch?: boolean
parentProject?: { ref?: string; name?: string } | null
isOrioleDb?: boolean
project: any
organization: any
projectRef?: string
isPaused: boolean
}
export const TopSection = ({
projectName,
isMainBranch,
parentProject,
isOrioleDb,
project,
organization,
isPaused,
}: TopSectionProps) => {
return (
<div className="flex flex-col gap-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-0 w-full items-center">
<div className="flex flex-col">
<div className="flex flex-row flex-wrap items-center gap-4 w-full">
<div>
{!isMainBranch && (
<Link
href={`/project/${parentProject?.ref}`}
className="text-sm text-foreground-light"
>
{parentProject?.name}
</Link>
)}
<h1 className="text-3xl">{projectName}</h1>
</div>
<div className="flex items-center gap-x-2">
{isOrioleDb && (
<Tooltip>
<TooltipTrigger asChild>
<Badge variant="warning">OrioleDB</Badge>
</TooltipTrigger>
<TooltipContent side="bottom" align="start" className="max-w-80 text-center">
This project is using Postgres with OrioleDB which is currently in preview and
not suitable for production workloads. View our{' '}
<InlineLink href={`${DOCS_URL}/guides/database/orioledb`}>
documentation
</InlineLink>{' '}
for all limitations.
</TooltipContent>
</Tooltip>
)}
<ComputeBadgeWrapper
project={{
ref: project?.ref,
organization_slug: organization?.slug,
cloud_provider: project?.cloud_provider,
infra_compute_size: project?.infra_compute_size,
}}
/>
</div>
</div>
<div className="mt-8">
<ActivityStats />
</div>
</div>
<div>
<div
className={cn(
'w-full h-[400px] md:h-[500px] border border-muted rounded-md overflow-hidden flex flex-col relative'
)}
>
<ReactFlowProvider>
<InstanceConfiguration diagramOnly />
</ReactFlowProvider>
</div>
</div>
</div>
<ProjectUpgradeFailedBanner />
{isPaused && <ProjectPausedState />}
</div>
)
}