58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { FunctionalComponent, h } from "preact";
|
||
import style from "./style.module.css";
|
||
import { route } from 'preact-router';
|
||
import { base58UUID } from '../../util/uuid';
|
||
import { useStoredProjectList } from "../../hooks/use-stored-project-list";
|
||
|
||
const Home: FunctionalComponent = () => {
|
||
const [ projects, refreshProjects ] = useStoredProjectList();
|
||
|
||
const openNewProject = () => {
|
||
const uuid = base58UUID();
|
||
route(`/p/${uuid}`);
|
||
};
|
||
|
||
return (
|
||
<div class={`container ${style.home}`}>
|
||
<div class="columns">
|
||
<div class="column">
|
||
<div class="buttons is-right">
|
||
<button class="button is-primary"
|
||
onClick={openNewProject}>
|
||
<strong>+</strong> Nouveau projet
|
||
</button>
|
||
</div>
|
||
<div class="panel">
|
||
<p class="panel-heading">
|
||
Mes projets
|
||
</p>
|
||
{/* <div class="panel-block">
|
||
<p class="control has-icons-left">
|
||
<input class="input" type="text" placeholder="Search" />
|
||
<span class="icon is-left">🔍</span>
|
||
</p>
|
||
</div> */}
|
||
{
|
||
projects.map(p => (
|
||
<a class="panel-block" href={`/p/${p.id}`}>
|
||
<span class="panel-icon">🗒️</span>
|
||
{ p.label ? p.label : "Projet sans nom" }
|
||
</a>
|
||
))
|
||
}
|
||
{
|
||
projects.length === 0 ?
|
||
<p class="panel-block">
|
||
<div class={style.noProjects}>Aucun project pour l'instant.</div>
|
||
</p> :
|
||
null
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Home;
|