Files
supabase/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
T
Joshen Lim 09a1f431bc Mass update for all lucide icon imports to use the component with Icon suffix (#51659)
## Context

This is largely just a mechanical change here:
Opting to use lucide icons with the `Icon` suffix across all icon
imports within `studio`
- so that it’s clearer which components are icons + reduces the
possibility of name collision with our own components
- e.g <User /> vs <UserIcon />

Also added a eslint rule for this:
<img width="1069" height="167" alt="image"
src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc"
/>

And updated `AGENTS.md` as such:
```
Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced).
```
2026-10-14 12:56:55 +02:00

50 lines
1.5 KiB
TypeScript

import { TruckIcon } from 'lucide-react'
import { Card, CardContent } from 'ui'
import {
PageSection,
PageSectionContent,
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
import { TransferProjectButton } from './TransferProjectButton'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
export const TransferProjectPanel = () => {
const { data: project } = useSelectedProjectQuery()
if (project === undefined) return null
return (
<PageSection id="transfer-project">
<PageSectionMeta>
<PageSectionSummary>
<PageSectionTitle>Transfer project</PageSectionTitle>
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Card>
<CardContent>
<div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
<div className="flex space-x-4">
<TruckIcon className="mt-1" />
<div className="space-y-1 xl:max-w-lg">
<p className="text-sm">Transfer project to another organization</p>
<p className="text-sm text-foreground-light">
To transfer projects, the owner must be a member of both the source and target
organizations.
</p>
</div>
</div>
<div>
<TransferProjectButton />
</div>
</div>
</CardContent>
</Card>
</PageSectionContent>
</PageSection>
)
}