/** * standalone components that can be used from wherever */ import * as DateFns from "date-fns/fp"; import { ArticlePreview, Comment, User } from "./Db"; import { Url, url } from "./Routes"; const formatDate = DateFns.format("MMMM do"); export function FormErrors({ errors }: { errors: string[] }) { return ( ); } export function Avatar({ user }: { user: User }) { return ( ); } export function Link(props: JSX.Element & { url: Url }) { return ( {props.children} ); } export function ButtonThatIsActuallyALink({ children }: JSX.Element) { return ( ); } export function Shell({ children, user, currentUrl, }: JSX.Element & { user: User | undefined; currentUrl: string }) { const htmxVersion = "1.9.4"; const NavLink = (props: JSX.Element & { url: Url }) => ( {props.children} ); return ( Conduit
{children}
); } export function ArticlePreview({ article }: { article: ArticlePreview }) { return (
{article.author.username} {formatDate(new Date(article.createdAt))}

{article.title}

{article.description}

Read more...
); } export function Comment({ comment, currentUser, }: { comment: Comment & { author: User }; currentUser: User | undefined; }) { return (

{comment.content}

  {comment.author.username} {formatDate(new Date(comment.createdAt))} {currentUser?.id !== comment.author.id ? undefined : ( )}
); } export function Feed({ articles, pagination: { page, size }, getPaginationUrl, }: { articles: ArticlePreview[]; pagination: { page: number; size: number }; getPaginationUrl: (index: number) => Url; }) { return (
{articles.map((article) => ( ))}
); }