95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
|
import { route } from '@/constants/routes'
|
|
import { Card, CardItem } from '@/containers/Card'
|
|
|
|
import HeaderPage from '@/containers/HeaderPage'
|
|
|
|
import SettingsMenu from '@/containers/SettingsMenu'
|
|
import { RenderMarkdown } from '@/containers/RenderMarkdown'
|
|
import { ExtensionManager } from '@/lib/extension'
|
|
import { useTranslation } from '@/i18n/react-i18next-compat'
|
|
import { PlatformGuard } from '@/lib/platform/PlatformGuard'
|
|
import { PlatformFeature } from '@/lib/platform'
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export const Route = createFileRoute(route.settings.extensions as any)({
|
|
component: Extensions,
|
|
})
|
|
|
|
function Extensions() {
|
|
return (
|
|
<PlatformGuard feature={PlatformFeature.EXTENSIONS_SETTINGS}>
|
|
<ExtensionsContent />
|
|
</PlatformGuard>
|
|
)
|
|
}
|
|
|
|
function ExtensionsContent() {
|
|
const { t } = useTranslation()
|
|
const extensions = ExtensionManager.getInstance().listExtensions()
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<HeaderPage>
|
|
<h1 className="font-medium">{t('common:settings')}</h1>
|
|
</HeaderPage>
|
|
<div className="flex h-full w-full">
|
|
<SettingsMenu />
|
|
<div className="p-4 w-full h-[calc(100%-32px)] overflow-y-auto">
|
|
<div className="flex flex-col justify-between gap-4 gap-y-3 w-full">
|
|
{/* General */}
|
|
<Card
|
|
header={
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h1 className="text-main-view-fg font-medium text-base">
|
|
{t('settings:extensions.title')}
|
|
</h1>
|
|
{/* <div className="flex items-center gap-2">
|
|
<Button size="sm">Install Extension</Button>
|
|
</div> */}
|
|
</div>
|
|
}
|
|
>
|
|
{extensions.map((item, i) => {
|
|
return (
|
|
<CardItem
|
|
key={i}
|
|
title={
|
|
<div className="flex items-center gap-x-2">
|
|
<h1 className="text-main-view-fg">
|
|
{item.productName ?? item.name}
|
|
</h1>
|
|
<div className="bg-main-view-fg/10 px-1 py-0.5 rounded text-main-view-fg/70 text-xs">
|
|
v{item.version}
|
|
</div>
|
|
</div>
|
|
}
|
|
description={
|
|
<RenderMarkdown
|
|
content={item.description ?? ''}
|
|
components={{
|
|
// Make links open in a new tab
|
|
a: ({ ...props }) => (
|
|
<a
|
|
{...props}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
/>
|
|
),
|
|
// Custom paragraph component remove margin
|
|
p: ({ ...props }) => (
|
|
<p {...props} className="!mb-0" />
|
|
),
|
|
}}
|
|
/>
|
|
}
|
|
/>
|
|
)
|
|
})}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|