{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "post-card",
  "type": "registry:block",
  "title": "Post Card",
  "description": "A card for displaying a single post.",
  "registryDependencies": [
    "user-info",
    "post-text",
    "post-image",
    "post-video",
    "post-audio",
    "post-embed",
    "post-poll",
    "post-engagement",
    "post-reactions",
    "action-menu",
    "timestamp"
  ],
  "files": [
    {
      "path": "src/components/deso/post-card.tsx",
      "content": "import { ProfilePicture } from './profile-picture';\nimport { UsernameDisplay } from './username-display';\nimport { UserPublicKey } from './user-public-key';\nimport {\n  ActionMenu,\n  ActionMenuItem,\n} from './action-menu';\nimport { Button } from '../ui/button';\nimport { MoreHorizontal, UserPlus, Ban, Flag, Repeat, Pin, ExternalLink, ChevronUp, ChevronDown, AtSign, MessageSquare, Gem } from 'lucide-react';\nimport Link from 'next/link';\nimport { cn } from '@/lib/utils/deso';\nimport { useUsername } from '@/hooks/useProfile';\nimport { PostEngagement } from './post-engagement';\nimport { useState } from 'react';\nimport { Timestamp } from './timestamp';\nimport { PostImage, PostImageActions } from './post-image';\nimport { PostEmbed } from './post-embed';\nimport { PostVideo } from './post-video';\nimport { PostAudio } from './post-audio';\nimport PostReactions, { Reaction } from './post-reactions';\nimport { PostShare } from './post-share';\nimport { PostPoll, PollOption } from './post-poll';\nimport { PostText } from './post-text';\nimport { ProfileCard } from './profile-card';\n\nexport interface PostEngagementProps {\n  comments: number;\n  likes: number;\n  reposts: number;\n  diamonds: number;\n  diamondValue: string;\n  quotes: number;\n  views: number;\n  audioUrl?: string;\n  status?: PostStatusProps;\n  notification?: PostNotificationProps;\n  videoUrl?: string;\n  reactions?: Reaction[];\n}\n\nexport interface PostStatusProps {\n  type: 'repost' | 'pinned';\n  reposterPublicKey?: string;\n}\n\nexport interface NFTCardProps {\n  publicKey: string;\n  price: string;\n  lastSale: string;\n  lastUpdated: string | Date;\n  royaltyFee: string;\n  ownerPublicKey: string;\n}\n\nexport interface PostNotificationProps {\n  type: string;\n  publicKey: string;\n  username: string;\n  timestamp: string | Date;\n}\n\nexport interface PostQuoteProps {\n  publicKey: string;\n  postContent: string;\n  timestamp: string | Date;\n  images?: string[];\n  embedUrl?: string;\n  quotedPost?: PostQuoteProps;\n  status?: PostStatusProps;\n  videoUrl?: string;\n  audioUrl?: string;\n  reactions?: Reaction[];\n}\n\nexport interface PostPollInfo {\n  options: PollOption[];\n  votes: number[];\n  totalVotes: number;\n  userVotedIndex: number | null;\n}\n\nexport interface PostCardProps {\n  publicKey: string;\n  postContent: string;\n  className?: string;\n  actions?: PostEngagementProps;\n  timestamp: string | Date;\n  images?: string[];\n  embedUrl?: string;\n  quotedPost?: PostQuoteProps;\n  status?: PostStatusProps;\n  videoUrl?: string;\n  audioUrl?: string;\n  reactions?: Reaction[];\n  comments?: PostCardProps[];\n  postUrl?: string;\n  poll?: PostPollInfo;\n  layout?: 'default' | 'featured-media';\n  nft?: NFTCardProps;\n  notification?: PostNotificationProps;\n  postBodyVariant?: 'simple' | 'rich';\n  lineClamp?: number;\n  isUnlockable?: boolean;\n  blurhash?: string;\n}\n\nconst RepostedBy = ({ publicKey }: { publicKey: string }) => {\n  return (\n    <div className=\"flex items-center gap-1\">\n      <span>Reposted by</span>\n      <UsernameDisplay publicKey={publicKey} linkToProfile />\n    </div>\n  );\n};\n\n\nconst PostNotification = ({ type, publicKey, username, timestamp }: PostNotificationProps) => {\n  const notificationText = {\n    mention: {\n      text: `mentioned you on a post`,\n      icon: <AtSign />,\n    },\n    repost: {\n      text: `reposted your post`,\n      icon: <Repeat />,\n    },\n    comment: {\n      text: `commented on your post`,\n      icon: <MessageSquare />,\n    },\n    diamond: {\n      text: `gave you a diamond`,\n      icon: <Gem />,\n    },\n    follow: {\n      text: `followed you`,\n      icon: <UserPlus />,\n    },\n  };\n  const notificationClass = \"flex items-center gap-1 text-sm text-muted-foreground border-b border-border pb-4 -mx-6 px-6 -mt-2\"\n  const notificationViewLink = <Link href={`/post/${publicKey}`} className=\"text-sm text-muted-foreground ml-auto relative -top- self-end\">View Post</Link>;\n  \n  return (\n    type !== 'follow'  ? (\n    <div className={notificationClass}>\n      <div className=\"flex items-center gap-1 size-5 mr-2 text-muted-foreground\">\n        {notificationText[type as keyof typeof notificationText].icon}\n      </div>\n      <ProfilePicture publicKey={publicKey} size=\"xxs\" />\n      <div className=\"flex items-center gap-1\">\n        <UsernameDisplay publicKey={publicKey} linkToProfile variant=\"social\" truncate maxLength={10} />\n        {notificationText[type as keyof typeof notificationText].text}\n      </div>\n    </div> ) : (\n      <>\n        <div className={notificationClass}>\n          <div className=\"flex items-center gap-1 size-5 mr-2 text-muted-foreground\">\n            {notificationText[type as keyof typeof notificationText].icon}\n          </div>\n          <ProfilePicture publicKey={publicKey} size=\"xxs\" />\n          <div className=\"flex items-center gap-1\">\n            <UsernameDisplay publicKey={publicKey} linkToProfile variant=\"social\" truncate maxLength={10} />\n            {notificationText[type as keyof typeof notificationText].text}\n          </div>       \n        </div>\n        <div className=\"ml-auto pt-6 -mb-4\">\n          <ProfileCard publicKey={publicKey} variant=\"compact\" showMessageButton={false} showActionMenu={false} followButtonVariant=\"icon-only\" />\n        </div>\n     </>\n    )\n  );\n};\n\n\nconst PostStatus = ({ type, reposterPublicKey }: PostStatusProps) => {\n  if (type === 'pinned') {\n    return (\n      <div className=\"ml-8 flex items-center gap-2 text-sm text-muted-foreground\">\n        <Pin className=\"h-4 w-4\" />\n        <span>Pinned Post</span>\n      </div>\n    );\n  }\n\n  if (type === 'repost' && reposterPublicKey) {\n    return (\n      <div className=\"ml-8 flex items-center gap-2 text-sm text-muted-foreground\">\n        <Repeat className=\"h-4 w-4\" />\n        <RepostedBy publicKey={reposterPublicKey} />\n      </div>\n    );\n  }\n\n  return null;\n};\nconst NFTActions = ({ price, royaltyFee, lastSale, className, showDetails, lastUpdated, ownerPublicKey }: NFTCardProps & { className?: string, showDetails?: boolean, lastUpdated?: string, ownerPublicKey?: string }) => {\n  const [isDetailsVisible, setIsDetailsVisible] = useState(showDetails || false);\n\n  return (\n    <div className={cn(\"w-full bg-accent p-2 rounded-lg\", className)}>\n      <div className=\"flex items-center gap-2 justify-between w-full\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"text-sm font-medium\">{price}</h3>\n          <p className=\"text-xs text-muted-foreground\">\n            <span className=\"font-medium\">Last Sale: {lastSale}</span>\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">                    \n          <Button \n            variant=\"outline\" \n            size=\"sm\" \n            onClick={() => setIsDetailsVisible(!isDetailsVisible)}\n            className=\"flex items-center gap-2\"\n          >\n            {isDetailsVisible ? (\n              <>\n                <ChevronUp className=\"h-4 w-4\" />\n                Hide Details\n              </>\n            ) : (\n              <>\n                <ChevronDown className=\"h-4 w-4\" />\n                Show Details\n              </>\n            )}\n          </Button>\n          <Button variant=\"outline\" size=\"sm\" className=\"flex items-center gap-2\"> \n            <ExternalLink className=\"h-4 w-4\" />\n            View NFT\n          </Button>\n          <Button variant=\"default\" size=\"sm\">\n            Place Offer\n          </Button>\n        </div>\n      </div>\n      {isDetailsVisible && (\n        <div className=\"flex flex-col divide-y divide-border/50 border-border justify-between w-full mt-2 border p-sm rounded-md bg-background\">\n          <NFTDetails type=\"Owner\" value={<UsernameDisplay variant=\"social\" publicKey={ownerPublicKey} linkToProfile />}/>\n          <NFTDetails type=\"Last Updated\" value={<Timestamp timestamp={lastUpdated} />}/>\n          <NFTDetails type=\"Last Sale\" value={lastSale} />\n          <NFTDetails type=\"Royalty Fee\" value={royaltyFee} />\n          <NFTDetails type=\"Price\" value={price} />\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst NFTDetails = ({ type, value, className }: { type: string, value: React.ReactNode, className?: string }) => {\n  return (\n    <div className={cn(\"text-xs text-muted-foreground w-full flex justify-between p-2\", className)}>\n      <span>{type}</span>\n      <span>{value}</span>\n    </div>\n  );\n};\n\n\nconst PostCardHeader = ({\n  publicKey,\n  username,\n  timestamp,\n}: {\n  publicKey: string;\n  username?: string;\n  timestamp: string | Date;\n}) => (\n  <div className=\"flex justify-between items-start\">\n    <div className=\"flex flex-col\">\n      <UsernameDisplay publicKey={publicKey} showVerification linkToProfile />\n      <div className=\"flex items-center gap-1 text-muted-foreground\">\n        <UserPublicKey publicKey={publicKey} truncate />\n        <span className=\"text-xs\">·</span>\n        <Timestamp timestamp={timestamp} className=\"text-sm text-muted-foreground\" />\n      </div>\n    </div>\n    <ActionMenu\n      trigger={\n        <Button variant=\"ghost\" size=\"icon\">\n          <MoreHorizontal className=\"h-5 w-5 text-muted-foreground\" />\n        </Button>\n      }\n    >\n      <ActionMenuItem icon={UserPlus}>\n        Follow <UsernameDisplay publicKey={publicKey} linkToProfile variant=\"social\" truncate maxLength={10} />\n      </ActionMenuItem>\n      <ActionMenuItem icon={Flag}>Report post</ActionMenuItem>\n      <ActionMenuItem\n        icon={Ban}\n        confirmation={{\n          title: 'Block User?',\n          description:\n            \"This will block the user. You won't see their posts or notifications. They won't be able to follow you or message you.\",\n          variant: 'destructive',\n          confirmText: 'Block',\n          onConfirm: () => console.log('User blocked'),\n        }}\n      >\n        Block <UsernameDisplay publicKey={publicKey} linkToProfile variant=\"social\" truncate maxLength={10} />\n      </ActionMenuItem>\n    </ActionMenu>\n  </div>\n);\n\nconst PostCardBody = ({\n  postContent,\n  embedUrl,\n  images,\n  modalActions,\n  quotedPost,\n  videoUrl,\n  audioUrl,\n  reactions,\n  poll,\n  onPollVote,\n  hideMedia,\n  postBodyVariant,\n  lineClamp,\n  isUnlockable,\n  blurhash,\n}: {\n  postContent: string;\n  embedUrl?: string;\n  images?: string[];\n  modalActions: PostImageActions;\n  quotedPost?: PostQuoteProps;\n  videoUrl?: string;\n  audioUrl?: string;\n  reactions?: Reaction[];\n  poll?: PostPollInfo;\n  onPollVote: (index: number) => void;\n  hideMedia?: boolean;\n  postBodyVariant?: 'simple' | 'rich';\n  lineClamp?: number;\n  isUnlockable?: boolean;\n  blurhash?: string;\n}) => (\n  <>\n    <div className=\"mt-2 text-foreground\">\n      <PostText text={postContent} variant={postBodyVariant} lineClamp={lineClamp} showMoreText=\"Show more\" showLessText=\"Show less\" />\n    </div>\n    {!hideMedia && audioUrl && <PostAudio url={audioUrl} className=\"mt-4\" />}\n    {!hideMedia && videoUrl && <PostVideo url={videoUrl} className=\"mt-4\" />}\n    {embedUrl && <PostEmbed url={embedUrl} className=\"mt-4\" />}\n    {!hideMedia && images && images.length > 0 && (\n      <PostImage\n        images={images}\n        withModal\n        withModalActions={modalActions}\n        className=\"mt-4\"\n        variant={isUnlockable ? 'unlockable' : undefined}\n        blurhash={blurhash}\n        onUnlock={() => alert('Unlocked!')}\n      />\n    )}\n    {poll && (\n      <PostPoll\n        options={poll.options}\n        votes={poll.votes}\n        totalVotes={poll.totalVotes}\n        userVotedIndex={poll.userVotedIndex}\n        onVote={onPollVote}\n      />\n    )}\n    {quotedPost && <PostQuote {...quotedPost} />}\n    {reactions && reactions.length > 0 && (\n      <PostReactions\n        reactions={reactions}\n        onReactionClick={(emoji) => {\n          // Handle reaction click\n        }}\n      />\n    )}\n  </>\n);\n\nconst PostCardFooter = ({\n  actions,\n  like,\n  repost,\n  diamond,\n  toggleLike,\n  toggleRepost,\n  giveDiamond,\n  postUrl,\n  postContent,\n}: {\n  actions: PostEngagementProps;\n  like: { active: boolean; count: number };\n  repost: { active: boolean; count: number };\n  diamond: { active: boolean; count: number; value: string };\n  toggleLike: () => void;\n  toggleRepost: () => void;\n  giveDiamond: () => void;\n  postUrl?: string;\n  postContent: string;\n}) => (\n  <div className=\"mt-4 flex w-full items-center gap-x-4 text-muted-foreground\">\n    <PostEngagement\n      variant=\"comment\"\n      count={actions.comments}\n      onClick={() => alert('Comment!')}\n      size=\"sm\"\n    />\n    <PostEngagement\n      variant=\"repost\"\n      count={repost.count}\n      active={repost.active}\n      onClick={toggleRepost}\n      size=\"sm\"\n    />\n    <PostEngagement\n      variant=\"like\"\n      count={like.count}\n      active={like.active}\n      onClick={toggleLike}\n      size=\"sm\"\n    />\n    <PostEngagement\n      variant=\"diamond\"\n      count={diamond.count}\n      value={diamond.value}\n      active={diamond.active}\n      onClick={giveDiamond}\n      size=\"sm\"\n    />\n    <div className=\"flex-grow\" />\n    <PostEngagement variant=\"view\" count={actions.views} size=\"sm\" />\n    {postUrl && <PostShare url={postUrl} text={postContent} className=\"p-0 h-auto hover:bg-transparent w-auto\" />}\n  </div>\n);\n\nconst PostQuote = (props: PostQuoteProps) => {\n  const { publicKey, postContent, timestamp, images, embedUrl, reactions } =\n    props;\n  const { data: userData } = useUsername(publicKey);\n  const username = userData?.accountByPublicKey?.username;\n\n  const dummyModalActions: PostImageActions = {\n    likes: { count: 0, active: false },\n    reposts: { count: 0, active: false },\n    diamonds: { count: 0, value: '', active: false },\n    comments: { count: 0 },\n    onLike: () => {},\n    onRepost: () => {},\n    onDiamond: () => {},\n    onComment: () => {},\n  };\n\n  return (\n    <div className=\"border border-border rounded-lg mt-4 p-6\">\n      <div className=\"flex gap-3\">\n        <div>\n          <ProfilePicture publicKey={publicKey} size=\"sm\" />\n        </div>\n        <div className=\"flex-grow flex flex-col\">\n          <PostCardHeader\n            publicKey={publicKey}\n            username={username}\n            timestamp={timestamp}\n          />\n          <div className=\"my-2 text-foreground\">\n            <PostText text={postContent} variant=\"rich\" lineClamp={10} showMoreText=\"Show more\" showLessText=\"Show less\" />\n          </div>\n          {embedUrl && <PostEmbed url={embedUrl} />}\n          {images && images.length > 0 && (\n            <PostImage\n              images={images}\n              withModal\n              withModalActions={dummyModalActions}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface PostCardContentProps extends PostCardProps {\n  hideMedia?: boolean;\n}\n\nconst PostCardContent = (props: PostCardContentProps) => {\n  const {\n    publicKey,\n    postContent,\n    actions = {\n      comments: 0,\n      likes: 0,\n      reposts: 0,\n      diamonds: 0,\n      diamondValue: '($0.00)',\n      quotes: 0,\n      views: 0,\n    },\n    timestamp,\n    images,\n    embedUrl,\n    quotedPost,\n    videoUrl,\n    audioUrl,\n    reactions: initialReactions,\n    postUrl,\n    poll: initialPoll,\n    hideMedia,\n    postBodyVariant,\n    lineClamp,\n    isUnlockable,\n    blurhash,\n  } = props;\n  const { data: userData } = useUsername(publicKey);\n  const username = userData?.accountByPublicKey?.username;\n\n  const [like, setLike] = useState({ active: false, count: actions.likes });\n  const [repost, setRepost] = useState({\n    active: false,\n    count: actions.reposts,\n  });\n  const [diamond, setDiamond] = useState({\n    active: false,\n    count: actions.diamonds,\n    value: actions.diamondValue,\n  });\n  const [reactions, setReactions] = useState(initialReactions || []);\n  const [poll, setPoll] = useState(initialPoll);\n\n  const handlePollVote = (index: number) => {\n    if (poll) {\n      const newVotes = [...poll.votes];\n      newVotes[index]++;\n      setPoll({\n        ...poll,\n        votes: newVotes,\n        totalVotes: poll.totalVotes + 1,\n        userVotedIndex: index,\n      });\n    }\n  };\n\n  const toggleLike = () => {\n    setLike((prev) => ({\n      active: !prev.active,\n      count: !prev.active ? prev.count + 1 : prev.count - 1,\n    }));\n  };\n\n  const toggleRepost = () => {\n    setRepost((prev) => ({\n      active: !prev.active,\n      count: !prev.active ? prev.count + 1 : prev.count - 1,\n    }));\n  };\n\n  const giveDiamond = () => {\n    setDiamond((prev) => {\n      const newActive = !prev.active;\n      const numericValue = parseFloat(prev.value.replace(/[($)]/g, ''));\n      const newValue = newActive ? numericValue + 0.01 : numericValue - 0.01;\n      return {\n        active: newActive,\n        count: newActive ? prev.count + 1 : prev.count - 1,\n        value: `($${newValue.toFixed(2)})`,\n      };\n    });\n  };\n\n  const handleReactionClick = (emoji: string) => {\n    setReactions((prevReactions) => {\n      const reactionIndex = prevReactions.findIndex((r) => r.emoji === emoji);\n\n      if (reactionIndex > -1) {\n        const newReactions = [...prevReactions];\n        const reaction = newReactions[reactionIndex];\n        const userHasReacted = !reaction.userHasReacted;\n        const count = userHasReacted ? reaction.count + 1 : reaction.count - 1;\n\n        if (count > 0) {\n          newReactions[reactionIndex] = { ...reaction, count, userHasReacted };\n        } else {\n          newReactions.splice(reactionIndex, 1);\n        }\n        return newReactions;\n      } else {\n        return [...prevReactions, { emoji, count: 1, userHasReacted: true }];\n      }\n    });\n  };\n\n  const modalActions: PostImageActions = {\n    likes: like,\n    reposts: repost,\n    diamonds: diamond,\n    comments: { count: actions.comments },\n    onLike: toggleLike,\n    onRepost: toggleRepost,\n    onDiamond: giveDiamond,\n    onComment: () => alert('Comment!'),\n  };\n\n  return (\n    <div className=\"flex-grow flex flex-col\">\n      <PostCardHeader\n        publicKey={publicKey}\n        username={username}\n        timestamp={timestamp}\n      />\n      <PostCardBody\n        postContent={postContent}\n        embedUrl={embedUrl}\n        images={images}\n        modalActions={modalActions}\n        quotedPost={quotedPost}\n        videoUrl={videoUrl}\n        audioUrl={audioUrl}\n        poll={poll}\n        onPollVote={handlePollVote}\n        hideMedia={hideMedia}\n        postBodyVariant={postBodyVariant}\n        lineClamp={lineClamp}\n        isUnlockable={isUnlockable}\n        blurhash={blurhash}\n      />\n      <PostReactions\n        reactions={reactions}\n        onReactionClick={handleReactionClick}\n      />\n      <PostCardFooter\n        actions={actions}\n        like={like}\n        repost={repost}\n        diamond={diamond}\n        toggleLike={toggleLike}\n        toggleRepost={toggleRepost}\n        giveDiamond={giveDiamond}\n        postUrl={postUrl}\n        postContent={postContent}\n      />\n    </div>\n  );\n};\n\nexport function PostCard(props: PostCardProps) {\n  const {\n    className,\n    status,\n    comments,\n    layout = 'default',\n    videoUrl,\n    audioUrl,\n    images,\n    nft,\n    notification,\n  } = props;\n\n  // Threaded View\n  if (comments && comments.length > 0) {\n    const allPosts = [props, ...comments];\n    return (\n      <div className=\"w-full mx-auto\">\n        {status && <PostStatus {...status} />}\n        <div\n          className={cn(\n            'w-full bg-background rounded-xl p-6 border border-border',\n            className\n          )}\n        >\n          {allPosts.map((post, index) => {\n            const isLast = index === allPosts.length - 1;\n            return (\n              <div\n                key={`${post.publicKey}-${index}`}\n                className={cn('flex gap-4', index > 0 && 'pt-4')}\n              >\n                <div className=\"flex flex-col items-center flex-shrink-0\">\n                  <ProfilePicture publicKey={post.publicKey} size=\"md\" />\n                  {!isLast && (\n                    <div className=\"w-0.5 grow relative bg-muted mt-2 before:content-[''] before:w-0.5 before:h-5 before:bg-muted before:absolute before:-bottom-[10px]\" />\n                  )}\n                </div>\n                <div className=\"flex-1\">\n                  <PostCardContent {...post} />\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  // Featured Media Layout\n  if (layout === 'featured-media') {\n    return (\n      <div className=\"w-full mx-auto\">\n        <div\n          className={cn(\n            'w-full bg-background rounded-xl border border-border overflow-hidden',\n            className\n          )}\n        >\n          {videoUrl && <PostVideo url={videoUrl} className=\"mt-0 border-none rounded-b-none\" />}\n          {audioUrl && !videoUrl && <PostAudio url={audioUrl} className=\"mt-0 border-none rounded-b-none\" />}\n          {images && images.length > 0 && !videoUrl && !audioUrl && (\n            <PostImage images={images} withModal className=\"mt-0 border-none rounded-b-none [&>div]:rounded-none\" />\n          )}\n          <div className=\"p-6\">\n            {status && (\n              <div className=\"mb-4\">\n                <PostStatus {...status} />\n              </div>\n            )}\n            <div className=\"flex-grow flex gap-4\">\n              <div className=\"flex-shrink-0\">\n                <ProfilePicture publicKey={props.publicKey} size=\"md\" />\n              </div>\n              <PostCardContent {...props} hideMedia />\n            </div>\n          </div>\n          {nft && (\n            <div>\n              <NFTActions publicKey={props.publicKey} price={nft.price} lastSale={nft.lastSale} royaltyFee={nft.royaltyFee} lastUpdated={nft.lastUpdated.toString()} className=\"rounded-t-none\" ownerPublicKey={nft.ownerPublicKey} />\n            </div>\n          )}\n        </div>       \n      </div>\n    );\n  }\n\n  // Default Single Post View\n  return (\n    <div className=\"w-full mx-auto\">\n      <div\n        className={cn(\n          'w-full bg-background rounded-xl p-6 border border-border',\n          className,\n          status && 'flex-col'\n        )}\n      >\n        {notification && (\n          <div className=\"flex-1 mb-4\">\n            <PostNotification {...notification} />\n          </div>\n        )}\n        {notification?.type !== 'follow' && (\n          <>\n            {status && (\n              <div className=\"flex-1 mb-4\">\n                <PostStatus {...status} />\n              </div>\n            )}\n            <div className=\"flex-grow flex gap-4\">\n              <div className=\"flex-shrink-0\">\n                <ProfilePicture publicKey={props.publicKey} size=\"md\" />\n              </div>\n              <PostCardContent {...props} />\n            </div>\n            {nft && (\n              <div className=\"mt-4\">\n                <NFTActions publicKey={props.publicKey} price={nft.price} lastSale={nft.lastSale} royaltyFee={nft.royaltyFee} lastUpdated={nft.lastUpdated.toString()} ownerPublicKey={nft.ownerPublicKey} />\n              </div>\n            )}\n          </>\n        )}\n      </div>      \n    </div>\n  );\n} ",
      "type": "registry:component",
      "target": "src/components/deso-ui/post-card.tsx"
    }
  ]
}