chore: update the install from GitHub component
Yi
1 year ago
parent
5fddb23516
commit
a567cff809
@ -0,0 +1,50 @@
|
||||
import React from 'react'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type InstalledProps = {
|
||||
repoUrl: string
|
||||
selectedVersion: string
|
||||
selectedPackage: string
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const InfoRow = ({ label, value }: { label: string; value: string }) => (
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='flex-shrink-0 w-[72px] items-center gap-2'>
|
||||
<div className='text-text-tertiary system-sm-medium truncate'>
|
||||
{label}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-grow overflow-hidden'>
|
||||
<div className='text-text-secondary text-ellipsis system-sm-medium'>
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const Installed: React.FC<InstalledProps> = ({ repoUrl, selectedVersion, selectedPackage, onClose }) => (
|
||||
<>
|
||||
<div className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</div>
|
||||
<div className='flex w-full p-4 flex-col justify-center items-start gap-2 rounded-2xl bg-background-section-burn'>
|
||||
{[
|
||||
{ label: 'Repository', value: repoUrl },
|
||||
{ label: 'Version', value: selectedVersion },
|
||||
{ label: 'Package', value: selectedPackage },
|
||||
].map(({ label, value }) => (
|
||||
<InfoRow key={label} label={label} value={value} />
|
||||
))}
|
||||
</div>
|
||||
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
|
||||
<Button
|
||||
variant='primary'
|
||||
className='min-w-[72px]'
|
||||
onClick={onClose}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
export default Installed
|
||||
@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
import type { Item } from '@/app/components/base/select'
|
||||
import { PortalSelect } from '@/app/components/base/select'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type SetPackageProps = {
|
||||
selectedPackage: string
|
||||
packages: Item[]
|
||||
onSelect: (item: Item) => void
|
||||
onInstall: () => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
const SetPackage: React.FC<SetPackageProps> = ({ selectedPackage, packages, onSelect, onInstall, onBack }) => (
|
||||
<>
|
||||
<label
|
||||
htmlFor='package'
|
||||
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
|
||||
>
|
||||
<span className='system-sm-semibold'>Select package</span>
|
||||
</label>
|
||||
<PortalSelect
|
||||
value={selectedPackage}
|
||||
onSelect={onSelect}
|
||||
items={packages}
|
||||
placeholder="Please select a package"
|
||||
popupClassName='w-[432px] z-[1001]'
|
||||
/>
|
||||
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='min-w-[72px]'
|
||||
onClick={onBack}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
className='min-w-[72px]'
|
||||
onClick={onInstall}
|
||||
disabled={!selectedPackage}
|
||||
>
|
||||
Install
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
export default SetPackage
|
||||
@ -0,0 +1,50 @@
|
||||
import React from 'react'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type SetURLProps = {
|
||||
repoUrl: string
|
||||
onChange: (value: string) => void
|
||||
onNext: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel }) => (
|
||||
<>
|
||||
<label
|
||||
htmlFor='repoUrl'
|
||||
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
|
||||
>
|
||||
<span className='system-sm-semibold'>GitHub repository</span>
|
||||
</label>
|
||||
<input
|
||||
type='url'
|
||||
id='repoUrl'
|
||||
name='repoUrl'
|
||||
value={repoUrl}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
className='flex items-center self-stretch rounded-lg border border-components-input-border-active
|
||||
bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden
|
||||
text-components-input-text-filled text-ellipsis system-sm-regular'
|
||||
placeholder='Please enter GitHub repo URL'
|
||||
/>
|
||||
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='min-w-[72px]'
|
||||
onClick={onCancel}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
className='min-w-[72px]'
|
||||
onClick={onNext}
|
||||
disabled={!repoUrl.trim()}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
export default SetURL
|
||||
@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
import type { Item } from '@/app/components/base/select'
|
||||
import { PortalSelect } from '@/app/components/base/select'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type SetVersionProps = {
|
||||
selectedVersion: string
|
||||
versions: Item[]
|
||||
onSelect: (item: Item) => void
|
||||
onNext: () => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
const SetVersion: React.FC<SetVersionProps> = ({ selectedVersion, versions, onSelect, onNext, onBack }) => (
|
||||
<>
|
||||
<label
|
||||
htmlFor='version'
|
||||
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
|
||||
>
|
||||
<span className='system-sm-semibold'>Select version</span>
|
||||
</label>
|
||||
<PortalSelect
|
||||
value={selectedVersion}
|
||||
onSelect={onSelect}
|
||||
items={versions}
|
||||
placeholder="Please select a version"
|
||||
popupClassName='w-[432px] z-[1001]'
|
||||
/>
|
||||
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='min-w-[72px]'
|
||||
onClick={onBack}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
className='min-w-[72px]'
|
||||
onClick={onNext}
|
||||
disabled={!selectedVersion}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
export default SetVersion
|
||||
Loading…
Reference in New Issue