TransferProjectPanel.tsx49 lines · main
1import { Truck } from 'lucide-react'
2import { Card, CardContent } from 'ui'
3import {
4 PageSection,
5 PageSectionContent,
6 PageSectionMeta,
7 PageSectionSummary,
8 PageSectionTitle,
9} from 'ui-patterns/PageSection'
10
11import { TransferProjectButton } from './TransferProjectButton'
12import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
13
14export const TransferProjectPanel = () => {
15 const { data: project } = useSelectedProjectQuery()
16
17 if (project === undefined) return null
18
19 return (
20 <PageSection id="transfer-project">
21 <PageSectionMeta>
22 <PageSectionSummary>
23 <PageSectionTitle>Transfer project</PageSectionTitle>
24 </PageSectionSummary>
25 </PageSectionMeta>
26 <PageSectionContent>
27 <Card>
28 <CardContent>
29 <div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
30 <div className="flex space-x-4">
31 <Truck className="mt-1" />
32 <div className="space-y-1 xl:max-w-lg">
33 <p className="text-sm">Transfer project to another organization</p>
34 <p className="text-sm text-foreground-light">
35 To transfer projects, the owner must be a member of both the source and target
36 organizations.
37 </p>
38 </div>
39 </div>
40 <div>
41 <TransferProjectButton />
42 </div>
43 </div>
44 </CardContent>
45 </Card>
46 </PageSectionContent>
47 </PageSection>
48 )
49}