akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-25 08:06:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use masonry layout for homepage

Browse Source
This commit is contained in:
Misode
2022-07-02 01:51:44 +02:00
parent d0bae089d1
commit 231b032029
4 changed files with 109 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/GuideCard.tsx
View File

@@ -5,10 +5,11 @@ import { Badge } from './index.js'
interface Props {
id: string,
minimal?: boolean,
activeTags?: string[],
toggleTag?: (tag: string) => unknown,
}
export function GuideCard({ id, activeTags, toggleTag }: Props) {
export function GuideCard({ id, minimal, activeTags, toggleTag }: Props) {
const { title, versions, tags } = useMemo(() => getGuide(id), [id])
const onToggleTag = (tag: string) => (e: MouseEvent) => {
@@ -17,7 +18,7 @@ export function GuideCard({ id, activeTags, toggleTag }: Props) {
e.stopImmediatePropagation()
}
return <Card title={title} overlay={versions?.join(' • ')} link={`/guides/${id}/`}>
return <Card title={title} overlay={!minimal && versions?.join(' • ')} link={`/guides/${id}/`}>
<div class="badges-list">
{tags?.sort().map(tag => <Badge label={tag} onClick={onToggleTag(tag)} active={activeTags?.includes(tag)} />)}
</div>