64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Route as RootRoute } from './__root'
|
|
|
|
export const Route = createFileRoute('/automations')({
|
|
component: AutomationsPage,
|
|
})
|
|
|
|
function AutomationsPage() {
|
|
const { t } = useTranslation()
|
|
const { cards } = RootRoute.useLoaderData()
|
|
const total = cards.length
|
|
const active = cards.filter((card) => card.status === 'doing').length
|
|
|
|
const rails = [
|
|
{
|
|
key: 'onboarding',
|
|
state: total > 0 ? 'active' : 'idle',
|
|
},
|
|
{
|
|
key: 'queue',
|
|
state: active > 0 ? 'warming' : 'standby',
|
|
},
|
|
{
|
|
key: 'surface',
|
|
state: 'ready',
|
|
},
|
|
] as const
|
|
|
|
return (
|
|
<section className="page-grid">
|
|
<div className="panel wide">
|
|
<div className="section-heading">
|
|
<h2>{t('automations.heading')}</h2>
|
|
<p>{t('automations.sub')}</p>
|
|
</div>
|
|
<div className="automation-list">
|
|
{rails.map((rail) => (
|
|
<article key={rail.key} className="automation-card">
|
|
<div className="automation-topline">
|
|
<h3>{t(`automations.rails.${rail.key}.name`)}</h3>
|
|
<span data-state={rail.state}>{t(`automations.states.${rail.state}`)}</span>
|
|
</div>
|
|
<p>{t(`automations.rails.${rail.key}.detail`)}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="panel">
|
|
<div className="section-heading">
|
|
<h2>{t('automations.why.heading')}</h2>
|
|
<p>{t('automations.why.sub')}</p>
|
|
</div>
|
|
<ul className="bullet-list">
|
|
{(t('automations.why.bullets', { returnObjects: true }) as string[]).map((bullet) => (
|
|
<li key={bullet}>{bullet}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|