yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import type { Oembed } from "@hey/types/api";
2import { memo } from "react";
3import { Link } from "react-router";
4import { Card } from "@/components/Shared/UI";
5import getFavicon from "@/helpers/getFavicon";
6import injectReferrerToUrl from "@/helpers/injectReferrerToUrl";
7import stopEventPropagation from "@/helpers/stopEventPropagation";
8
9interface EmbedProps {
10 og: Oembed;
11}
12
13const Embed = ({ og }: EmbedProps) => {
14 if (!og) {
15 return null;
16 }
17
18 const url = injectReferrerToUrl(og.url);
19 const favicon = getFavicon(url);
20
21 return (
22 <div className="mt-4 w-full text-sm md:w-4/6">
23 <Link
24 onClick={stopEventPropagation}
25 rel="noreferrer noopener"
26 target={url.includes(location.host) ? "_self" : "_blank"}
27 to={url}
28 >
29 <Card className="truncate p-5" forceRounded>
30 <div className="flex flex-col gap-y-1">
31 {og.title ? (
32 <div className="flex items-center space-x-1.5">
33 {favicon ? (
34 <img
35 alt="Favicon"
36 className="size-4 rounded-full"
37 height={16}
38 src={favicon}
39 title={url}
40 width={16}
41 />
42 ) : null}
43 <b className="truncate">{og.title}</b>
44 </div>
45 ) : null}
46 {og.description ? (
47 <div className="line-clamp-1 whitespace-break-spaces text-gray-500 dark:text-gray-200">
48 {og.description.replace(/ +/g, " ")}
49 </div>
50 ) : null}
51 </div>
52 </Card>
53 </Link>
54 </div>
55 );
56};
57
58export default memo(Embed);