diff options
Diffstat (limited to 'src/components/Entry.tsx')
| -rw-r--r-- | src/components/Entry.tsx | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/src/components/Entry.tsx b/src/components/Entry.tsx new file mode 100644 index 0000000..4051791 --- /dev/null +++ b/src/components/Entry.tsx @@ -0,0 +1,46 @@ +interface Meta { + title: string; + excerpt: string; + date: string; + cover?: string; + href?: string; +} + +export default function Entry({ + title, + excerpt, + date, + cover, + href, +}: Meta) { + const formatted = new Intl.DateTimeFormat("de-DE", { dateStyle: "medium" }).format(new Date(date)); + + const content = ( + <div className="flex flex-col h-full gap-2 p-2 rounded-lg border border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900"> + {cover && ( + <img + src={cover} + alt={title} + className="w-full h-48 object-cover rounded-md" + /> + )} + <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100"> + {title} + </h3> + <p className="mt-1 text-sm text-neutral-700 dark:text-neutral-300"> + {excerpt} + </p> + <time className="mt-auto block text-xs text-neutral-500 dark:text-neutral-400"> + {formatted} + </time> + </div> + ); + + return href ? ( + <a href={href} target="_blank" rel="noopener noreferrer"> + {content} + </a> + ) : ( + content + ); +} |
