mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-30 06:45:47 -04:00
feat(explore): add pinned notes carousel
Co-authored-by: Erik Michelson <github@erik.michelson.eu> Signed-off-by: Erik Michelson <github@erik.michelson.eu> Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
parent
6bc051165f
commit
485ac5a7a6
6 changed files with 135 additions and 24 deletions
|
@ -7,7 +7,7 @@ import React, { type MouseEvent, useMemo } from 'react'
|
|||
import { Badge, Card } from 'react-bootstrap'
|
||||
import { DateTime } from 'luxon'
|
||||
import { BookmarkStarFill as IconPinned } from 'react-bootstrap-icons'
|
||||
import styles from './pinned-note-card.module.css'
|
||||
import styles from './pinned-note-card.module.scss'
|
||||
import { useCallback } from 'react'
|
||||
import { NoteTypeIcon } from '../../common/note-type-icon/note-type-icon'
|
||||
import type { NoteType } from '@hedgedoc/commons'
|
||||
|
@ -60,23 +60,21 @@ export const PinnedNoteCard: React.FC<NoteCardProps> = ({ title, id, lastVisited
|
|||
}, [tags, onClickTag, labelTag])
|
||||
|
||||
return (
|
||||
<li className={'d-block'}>
|
||||
<Card className={`${styles.card}`} as={Link} href={`/n/${primaryAddress}`}>
|
||||
<Card.Body>
|
||||
<div onClick={onClickUnpin} title={labelUnpinNote}>
|
||||
<UiIcon icon={IconPinned} size={1.5} className={`${styles.bookmark}`} />
|
||||
<div className={`${styles.star}`} />
|
||||
</div>
|
||||
<Card.Title className={`${styles.title}`}>
|
||||
<NoteTypeIcon noteType={type} />
|
||||
<span className={`${styles.titleText}`} title={title}>
|
||||
{title}
|
||||
</span>
|
||||
</Card.Title>
|
||||
<Card.Subtitle className='mb-2 text-muted'>{lastVisitedString}</Card.Subtitle>
|
||||
{tagsChips}
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</li>
|
||||
<Card className={`${styles.card}`} as={Link} href={`/n/${primaryAddress}`}>
|
||||
<Card.Body className={`${styles.cardBody}`}>
|
||||
<div onClick={onClickUnpin} title={labelUnpinNote}>
|
||||
<UiIcon icon={IconPinned} size={1.5} className={`${styles.bookmark}`} />
|
||||
<div className={`${styles.star}`} />
|
||||
</div>
|
||||
<Card.Title className={`${styles.title}`}>
|
||||
<NoteTypeIcon noteType={type} />
|
||||
<span className={`${styles.titleText}`} title={title}>
|
||||
{title}
|
||||
</span>
|
||||
</Card.Title>
|
||||
<Card.Subtitle className='mb-2 text-muted'>{lastVisitedString}</Card.Subtitle>
|
||||
<div>{tagsChips}</div>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue