Storyden

import { LikeAction } from "@/components/site/Action/Like"; import { Button } from "@/components/ui/button"; import { LikeIcon, LikeSavedIcon } from "@/components/ui/icons/Like"; import { styled } from "@/styled-system/jsx"; import { Props, useLikeButton } from "./useLikeButton"; type LikeButtonProps = Props & { showCount?: boolean; }; export function LikeButton({ showCount = false, ...props }: LikeButtonProps) { const { handleClick } = useLikeButton({ thread: props.thread }); const likeCount = props.thread.likes.likes; if (showCount) { return ( <Button type="button" variant="subtle" display="flex" size="xs" gap="1" color="fg.muted" aria-label={props.thread.likes.liked ? "Unlike" : "Like"} title={props.thread.likes.liked ? "Unlike" : "Like"} onClick={handleClick} > <span> {props.thread.likes.liked ? ( <LikeSavedIcon width="4" /> ) : ( <LikeIcon width="4" /> )} </span> <styled.span fontSize="sm" fontWeight="medium" fontVariantNumeric="tabular-nums" fontVariant="tabular-nums" > {likeCount} </styled.span> </Button> ); } return ( <LikeAction variant="subtle" size="xs" liked={props.thread.likes.liked} onClick={handleClick} /> ); }