68 lines
2.4 KiB
JavaScript
68 lines
2.4 KiB
JavaScript
import { useAtomValue } from 'jotai';
|
|
import { languageState } from '../state/atoms';
|
|
import { getTranslations } from '../translations';
|
|
import styles from '../styles/components/Projects.module.scss';
|
|
|
|
const getTagColor = (tag) => {
|
|
const colorMap = {
|
|
'.NET': 'tagDotnet',
|
|
React: 'tagReact',
|
|
SQLite: 'tagSqlite',
|
|
Apache2: 'tagApache',
|
|
'Ubuntu Server': 'tagUbuntu',
|
|
NextCloud: 'tagNextcloud',
|
|
Vite: 'tagVite',
|
|
};
|
|
return colorMap[tag] || 'tagDefault';
|
|
};
|
|
|
|
export default function Projects() {
|
|
const language = useAtomValue(languageState);
|
|
const t = getTranslations(language);
|
|
|
|
return (
|
|
<section id="projects" className={styles.projects}>
|
|
<div className={styles.inner}>
|
|
<div className={styles.header}>
|
|
<span className={styles.sectionNum}>{t.projects.sectionNum}</span>
|
|
<h2 className={styles.sectionTitle}>{t.projects.sectionTitle}</h2>
|
|
<div className={styles.line} />
|
|
</div>
|
|
|
|
<div className={styles.grid}>
|
|
{t.projects.projects.map((p) => (
|
|
<article key={p.name} className={styles.card}>
|
|
<div className={styles.cardTop}>
|
|
<span className={styles.folderIcon}>{t.projects.folderIcon}</span>
|
|
<div className={styles.cardLinks}>
|
|
<a href={p.href} className={styles.externalLink} aria-label={`${t.projects.externalLinkAria} ${p.name}`}>
|
|
↗
|
|
</a>
|
|
<a href={p.sourceHref} className={styles.sourceLink} aria-label={`${t.projects.sourceLinkAria} ${p.name}`}>
|
|
📦
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<h3 className={styles.cardName}>{p.name}</h3>
|
|
<p className={styles.cardDesc}>{p.desc}</p>
|
|
<ul className={styles.tags}>
|
|
{p.tags.map((tag) => (
|
|
<li key={tag} className={styles.tagItem}>
|
|
<span className={`${styles.tagPill} ${styles[getTagColor(tag)]}`}>{tag}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
))}
|
|
</div>
|
|
<div className={styles.giteaLink}>
|
|
<p className={styles.giteaText}>{t.projects.giteaText}</p>
|
|
<a href="https://gitea.tietokonepaja.fi/" className={styles.giteaBtn} target="_blank" rel="noreferrer">
|
|
{t.projects.giteaBtn}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|