Skip to content

Commit f91a8eb

Browse files
steven-teysteven-tey
committed
add backlinks from analytics and events tabs
1 parent ce4833b commit f91a8eb

File tree

2 files changed

+78
-58
lines changed

2 files changed

+78
-58
lines changed

‎apps/web/ui/analytics/events/events-table.tsx

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import { editQueryString } from "@/lib/analytics/utils";
4+
import useWorkspace from "@/lib/swr/use-workspace";
45
import { ClickEvent, Customer, LeadEvent, SaleEvent } from "@/lib/types";
56
import { CustomerDetailsSheet } from "@/ui/partners/customer-details-sheet";
67
import EmptyState from "@/ui/shared/empty-state";
@@ -26,6 +27,7 @@ import {
2627
} from "@dub/utils";
2728
import { Cell, ColumnDef } from "@tanstack/react-table";
2829
import { Link2 } from "lucide-react";
30+
import Link from "next/link";
2931
import { ReactNode, useContext, useEffect, useMemo, useState } from "react";
3032
import useSWR from "swr";
3133
import { AnalyticsContext } from "../analytics-provider";
@@ -54,6 +56,7 @@ export default function EventsTable({
5456
requiresUpgrade?: boolean;
5557
upgradeOverlay?: ReactNode;
5658
}) {
59+
const { slug } = useWorkspace();
5760
const { searchParams, queryParams } = useRouterStuff();
5861
const { setExportQueryString } = useContext(EventsContext);
5962
const {
@@ -131,21 +134,19 @@ export default function EventsTable({
131134
}),
132135
},
133136
cell: ({ getValue }) => (
134-
<div className="flex items-center gap-3">
137+
<Link
138+
href={`/${slug}/links/${getValue().domain}/${getValue().key}`}
139+
target="_blank"
140+
className="flex cursor-alias items-center gap-3 decoration-dotted hover:underline"
141+
>
135142
<LinkLogo
136143
apexDomain={getApexDomain(getValue().url)}
137144
className="size-4 shrink-0 sm:size-4"
138145
/>
139-
<CopyText
140-
value={getValue().shortLink}
141-
successMessage="Copied link to clipboard!"
142-
className="truncate"
143-
>
144-
<span className="truncate" title={getValue().shortLink}>
145-
{getPrettyUrl(getValue().shortLink)}
146-
</span>
147-
</CopyText>
148-
</div>
146+
<span className="truncate" title={getValue().shortLink}>
147+
{getPrettyUrl(getValue().shortLink)}
148+
</span>
149+
</Link>
149150
),
150151
},
151152
{

‎apps/web/ui/analytics/link-preview.tsx

+66-47
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,80 @@
1+
import useWorkspace from "@/lib/swr/use-workspace";
12
import { LinkProps } from "@/lib/types";
23
import { CopyButton, LinkLogo } from "@dub/ui";
3-
import { ArrowTurnRight2 } from "@dub/ui/icons";
4+
import { ArrowTurnRight2, ArrowUpRight } from "@dub/ui/icons";
45
import { getApexDomain, getPrettyUrl, linkConstructor } from "@dub/utils";
6+
import Link from "next/link";
57
import { CommentsBadge } from "../links/comments-badge";
68

79
export default function LinkPreviewTooltip({ data }: { data: LinkProps }) {
10+
const { slug } = useWorkspace();
811
const { domain, key, url, comments } = data;
912

13+
const As = slug ? Link : "div";
14+
1015
return (
11-
<div className="relative flex w-[28rem] items-center gap-x-2 px-4 py-2">
12-
<div className="relative flex-none rounded-full border border-neutral-200 bg-gradient-to-t from-neutral-100 pr-0.5 sm:p-2">
13-
<LinkLogo
14-
apexDomain={getApexDomain(url)}
15-
className="h-4 w-4 shrink-0 transition-[width,height] sm:h-6 sm:w-6 group-data-[variant=loose]/card-list:sm:h-5 group-data-[variant=loose]/card-list:sm:w-5"
16-
/>
17-
</div>
18-
<div>
19-
<div className="min-w-0 shrink grow-0 text-neutral-950">
20-
<div className="flex items-center gap-2">
21-
<a
22-
href={linkConstructor({ domain, key })}
23-
target="_blank"
24-
rel="noopener noreferrer"
25-
title={linkConstructor({ domain, key, pretty: true })}
26-
className="truncate text-sm font-semibold leading-6 text-neutral-800 transition-colors hover:text-black"
27-
>
28-
{linkConstructor({ domain, key, pretty: true })}
29-
</a>
30-
<CopyButton
31-
value={linkConstructor({
32-
domain,
33-
key,
34-
pretty: false,
35-
})}
36-
variant="neutral"
37-
className="p-1.5"
38-
/>
39-
{comments && <CommentsBadge comments={comments} />}
40-
</div>
16+
<As
17+
href={slug ? `/${slug}/links/${domain}/${key}` : "#"}
18+
{...(slug && {
19+
target: "_blank",
20+
onClick: (e) => e.stopPropagation(),
21+
})}
22+
className="group relative flex w-[28rem] items-center justify-between px-4 py-2"
23+
>
24+
<div className="flex items-center gap-x-2">
25+
<div className="relative flex-none rounded-full border border-neutral-200 bg-gradient-to-t from-neutral-100 pr-0.5 sm:p-2">
26+
<LinkLogo
27+
apexDomain={getApexDomain(url)}
28+
className="h-4 w-4 shrink-0 transition-[width,height] sm:h-6 sm:w-6 group-data-[variant=loose]/card-list:sm:h-5 group-data-[variant=loose]/card-list:sm:w-5"
29+
/>
4130
</div>
42-
<div className="flex min-w-0 items-center gap-1 text-sm">
43-
<ArrowTurnRight2 className="h-3 w-3 shrink-0 text-neutral-400" />
44-
{url ? (
45-
<a
46-
href={url}
47-
target="_blank"
48-
rel="noopener noreferrer"
49-
title={url}
50-
className="max-w-[20rem] truncate text-neutral-500 transition-colors hover:text-neutral-700 hover:underline hover:underline-offset-2"
51-
>
52-
{getPrettyUrl(url)}
53-
</a>
54-
) : (
55-
<span className="truncate text-neutral-400">No URL configured</span>
56-
)}
31+
<div>
32+
<div className="min-w-0 shrink grow-0 text-neutral-950">
33+
<div className="flex items-center gap-2">
34+
<a
35+
href={linkConstructor({ domain, key })}
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
title={linkConstructor({ domain, key, pretty: true })}
39+
className="truncate text-sm font-semibold leading-6 text-neutral-800 transition-colors hover:text-black"
40+
>
41+
{linkConstructor({ domain, key, pretty: true })}
42+
</a>
43+
<CopyButton
44+
value={linkConstructor({
45+
domain,
46+
key,
47+
pretty: false,
48+
})}
49+
variant="neutral"
50+
className="p-1.5"
51+
/>
52+
{comments && <CommentsBadge comments={comments} />}
53+
</div>
54+
</div>
55+
<div className="flex min-w-0 items-center gap-1 text-sm">
56+
<ArrowTurnRight2 className="h-3 w-3 shrink-0 text-neutral-400" />
57+
{url ? (
58+
<a
59+
href={url}
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
title={url}
63+
className="max-w-[20rem] truncate text-neutral-500 transition-colors hover:text-neutral-700 hover:underline hover:underline-offset-2"
64+
>
65+
{getPrettyUrl(url)}
66+
</a>
67+
) : (
68+
<span className="truncate text-neutral-400">
69+
No URL configured
70+
</span>
71+
)}
72+
</div>
5773
</div>
5874
</div>
59-
</div>
75+
<div className="flex size-8 items-center justify-center rounded-full bg-neutral-50 transition-colors group-hover:bg-neutral-100">
76+
<ArrowUpRight className="size-3.5 text-neutral-400 transition-all group-hover:scale-110 group-hover:text-neutral-500" />
77+
</div>
78+
</As>
6079
);
6180
}

0 commit comments

Comments
 (0)