49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { DashboardLayout } from '@/frontend/components/DashboardLayout'
|
|
import {
|
|
Box,
|
|
Container,
|
|
Divider,
|
|
Group,
|
|
Stack,
|
|
Text,
|
|
Title
|
|
} from '@mantine/core'
|
|
import { createFileRoute, Outlet, useNavigate, useParams } from '@tanstack/react-router'
|
|
|
|
export const Route = createFileRoute('/apps/$appId')({
|
|
component: AppDetailLayout,
|
|
})
|
|
|
|
function AppDetailLayout() {
|
|
const { appId } = useParams({ from: '/apps/$appId' })
|
|
const navigate = useNavigate()
|
|
|
|
// Format app ID for display (e.g., desa-plus -> Desa+)
|
|
const appName = appId
|
|
.split('-')
|
|
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(' ')
|
|
.replace('Plus', '+')
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<Container size="xl" py="lg">
|
|
<Stack gap="md">
|
|
<Group justify="space-between" align="flex-end">
|
|
<Stack gap={4}>
|
|
<Title order={1} className="gradient-text" style={{ fontSize: '2.5rem' }}>{appName}</Title>
|
|
<Text c="dimmed" size="sm" fw={500}>Application ID: <span style={{ fontFamily: 'monospace' }}>{appId}</span></Text>
|
|
</Stack>
|
|
</Group>
|
|
|
|
<Divider />
|
|
|
|
<Box>
|
|
<Outlet />
|
|
</Box>
|
|
</Stack>
|
|
</Container>
|
|
</DashboardLayout>
|
|
)
|
|
}
|