Linkedin Post

1"use client";
2 
3import * as React from "react";
4import { ThumbsUp, Share } from "lucide-react";
5import {
6  cn,
7  Button,
8  Tooltip,
9  TooltipContent,
10  TooltipProvider,
11  TooltipTrigger,
12} from "./_adapter";
13import { formatCount, formatRelativeTime, getDomain } from "../shared/utils";
14 
15import { resolveSafeNavigationHref } from "../shared/media";
16import type {
17  LinkedInPostData,
18  LinkedInPostMedia,
19  LinkedInPostLinkPreview,
20} from "./schema";
21 
22const TEXT_PREVIEW_LENGTH = 280;
23 
24export interface LinkedInPostProps {
25  post: LinkedInPostData;
26  className?: string;
27  onAction?: (action: string, post: LinkedInPostData) => void;
28}
29 
30function LinkedInLogo({ className }: { className?: string }) {
31  return (
32    <svg
33      viewBox="0 0 72 72"
34      className={className}
35      role="img"
36      aria-label="LinkedIn logo"
37    >
38      <g fill="none" fillRule="evenodd">
39        <path
40          d="M8 72h56c4.42 0 8-3.58 8-8V8c0-4.42-3.58-8-8-8H8C3.58 0 0 3.58 0 8v56c0 4.42 3.58 8 8 8z"
41          fill="currentColor"
42        />
43        <path
44          d="M62 62H51.3V43.8c0-4.98-1.9-7.78-5.83-7.78-4.3 0-6.54 2.9-6.54 7.78V62H28.63V27.33h10.3v4.67c0 0 3.1-5.73 10.45-5.73 7.36 0 12.62 4.5 12.62 13.8V62zM16.35 22.8c-3.5 0-6.35-2.86-6.35-6.4 0-3.52 2.85-6.4 6.35-6.4 3.5 0 6.35 2.88 6.35 6.4 0 3.54-2.85 6.4-6.35 6.4zM11.03 62h10.74V27.33H11.03V62z"
45          fill="#FFF"
46        />
47      </g>
48    </svg>
49  );
50}
51 
52function Header({
53  author,
54  createdAt,
55}: {
56  author: LinkedInPostData["author"];
57  createdAt?: string;
58}) {
59  return (
60    <header className="flex items-start gap-3">
61      <img
62        src={author.avatarUrl}
63        alt={`${author.name} avatar`}
64        width={48}
65        height={48}
66        className="size-12 rounded-full object-cover"
67      />
68      <div className="flex min-w-0 flex-1 flex-col leading-tight">
69        <span className="text-sm font-semibold">{author.name}</span>
70        {author.headline && (
71          <span className="text-muted-foreground line-clamp-1 text-xs">
72            {author.headline}
73          </span>
74        )}
75        {createdAt && (
76          <div className="text-muted-foreground mt-0.5 flex items-center gap-1 text-xs">
77            <span>{formatRelativeTime(createdAt)}</span>
78            <span>·</span>
79            <span>Edited</span>
80          </div>
81        )}
82      </div>
83      <LinkedInLogo className="size-5 text-[#0077b5]" />
84    </header>
85  );
86}
87 
88function PostBody({ text }: { text?: string }) {
89// … truncated