67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
|
import { ThemeToggle } from '../../infra/theme'
|
|||
|
|
import { homeCards, repositoryUrl } from './config/home-screen.config'
|
|||
|
|
import styles from './styles/home-screen.module.css'
|
|||
|
|
|
|||
|
|
const version = __BUILD_VERSION__ as string
|
|||
|
|
|
|||
|
|
export function HomeScreen() {
|
|||
|
|
return (
|
|||
|
|
<main className={styles.page}>
|
|||
|
|
<section className={styles.hero}>
|
|||
|
|
<h1 className={styles.title}>SLM Design</h1>
|
|||
|
|
<p className={styles.lead}>
|
|||
|
|
Scoped Layered Module Design — соглашения по архитектуре frontend-приложений:
|
|||
|
|
слои, модули, сегменты, публичные API и направление зависимостей.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className={styles.controls}>
|
|||
|
|
<a className={styles.repoLink} href={repositoryUrl} target="_blank" rel="noopener noreferrer">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|||
|
|
<path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z" />
|
|||
|
|
</svg>
|
|||
|
|
<span>Репозиторий</span>
|
|||
|
|
</a>
|
|||
|
|
<ThemeToggle className={styles.themeToggle} />
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className={styles.cards} aria-label="Быстрые переходы">
|
|||
|
|
{homeCards.map((card) => {
|
|||
|
|
if ('href' in card) {
|
|||
|
|
return (
|
|||
|
|
<a
|
|||
|
|
className={`${styles.card} ${styles.cardLink}`}
|
|||
|
|
href={card.href}
|
|||
|
|
download={'download' in card ? card.download : undefined}
|
|||
|
|
key={card.title}
|
|||
|
|
>
|
|||
|
|
<h2>{card.title}</h2>
|
|||
|
|
<p>{card.description}</p>
|
|||
|
|
<span className={styles.cardCta}>{card.cta}</span>
|
|||
|
|
</a>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<article className={styles.card} key={card.title}>
|
|||
|
|
<h2>{card.title}</h2>
|
|||
|
|
<p>{card.description}</p>
|
|||
|
|
<div className={styles.cardActions}>
|
|||
|
|
{card.actions.map((action) => (
|
|||
|
|
<a className={styles.cardAction} href={action.href} key={action.href}>
|
|||
|
|
{action.label}
|
|||
|
|
</a>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<footer className={styles.footer}>
|
|||
|
|
<span>{version}</span>
|
|||
|
|
</footer>
|
|||
|
|
</main>
|
|||
|
|
)
|
|||
|
|
}
|