69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import { Plus } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import Link from 'next/link';
|
|
|
|
export const ServiceProviderList = [
|
|
{
|
|
name: 'GitHub',
|
|
value: 'github',
|
|
image: 'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
|
|
permission: 'https://github.com/apps/stalin-deploy/installations/new',
|
|
},
|
|
{
|
|
name: 'Registry',
|
|
value: 'registry',
|
|
image: '',
|
|
},
|
|
{
|
|
name: 'Github Registry',
|
|
value: 'github-registry',
|
|
image: 'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
|
|
},
|
|
];
|
|
|
|
export default function CreateApplicationForm() {
|
|
const [serviceProvider, setServiceProvider] = useState<string>('github');
|
|
|
|
return (
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
|
|
<Plus />
|
|
New Application
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent className="min-w-[500px]">
|
|
<SheetHeader>
|
|
<SheetTitle>New Application</SheetTitle>
|
|
<SheetDescription>Deploy a new application from source</SheetDescription>
|
|
</SheetHeader>
|
|
<div>
|
|
<h3>Select Provider</h3>
|
|
<RadioGroup defaultValue="github" className="flex flex-col gap-4" onValueChange={setServiceProvider}>
|
|
{ServiceProviderList.map((provider) => (
|
|
<div key={provider.value} className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', provider.value == serviceProvider ? 'border-[#3A7BFE]' : 'border-gray-300')}>
|
|
<RadioGroupItem value={provider.value} id={provider.value} />
|
|
<label htmlFor={provider.value} className="flex flex-row items-center gap-4">
|
|
<img src={provider.image} alt={provider.name} className="w-8 h-8 rounded-full" />
|
|
{provider.name}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
{(serviceProvider == 'github' || serviceProvider == 'github-registry') && (
|
|
<p>
|
|
Not seeing the repositories you expected here? <Link href={ServiceProviderList.find((s) => s.value == serviceProvider)?.permission || ''}>Edit Your GitHub Permissions</Link>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|