Skip to content

Commit 99eaf9c

Browse files
corwintinescorwintines
committed
refactor LinkOverlay to use BaseLink instead of a
1 parent d9aa76c commit 99eaf9c

File tree

6 files changed

+104
-116
lines changed

6 files changed

+104
-116
lines changed

‎app/[locale]/apps/[application]/page.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import {
2323
BreadcrumbSeparator,
2424
} from "@/components/ui/breadcrumb"
2525
import { ButtonLink } from "@/components/ui/buttons/Button"
26-
import { BaseLink } from "@/components/ui/Link"
2726
import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
2827
import { Tag } from "@/components/ui/tag"
2928

@@ -255,16 +254,14 @@ const Page = async ({
255254
<p className="text-primary group-hover:text-primary-hover">
256255
{nextApp.name}
257256
</p>
258-
<LinkOverlay asChild>
259-
<BaseLink
260-
href={`/apps/${slugify(nextApp.name)}`}
261-
customEventOptions={{
262-
eventCategory: "detail",
263-
eventAction: `app name ${app.name}`,
264-
eventName: "see_next",
265-
}}
266-
/>
267-
</LinkOverlay>
257+
<LinkOverlay
258+
href={`/apps/${slugify(nextApp.name)}`}
259+
customEventOptions={{
260+
eventCategory: "detail",
261+
eventAction: `app name ${app.name}`,
262+
eventName: "see_next",
263+
}}
264+
/>
268265
</div>
269266
<div className="flex gap-2">
270267
<ChevronNext className="h-8 w-8 text-gray-400 group-hover:text-primary" />
@@ -282,16 +279,14 @@ const Page = async ({
282279
<p className="text-primary group-hover:text-primary-hover">
283280
{nextApp.name}
284281
</p>
285-
<LinkOverlay asChild>
286-
<BaseLink
287-
href={`/apps/${slugify(nextApp.name)}`}
288-
customEventOptions={{
289-
eventCategory: "detail",
290-
eventAction: `app name ${app.name}`,
291-
eventName: "see_next",
292-
}}
293-
/>
294-
</LinkOverlay>
282+
<LinkOverlay
283+
href={`/apps/${slugify(nextApp.name)}`}
284+
customEventOptions={{
285+
eventCategory: "detail",
286+
eventAction: `app name ${app.name}`,
287+
eventName: "see_next",
288+
}}
289+
/>
295290
</div>
296291
<div className="flex gap-2">
297292
<ChevronNext className="h-8 w-8 text-gray-400 group-hover:text-primary" />

‎app/[locale]/apps/_components/AppCard.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { AppData } from "@/lib/types"
22

33
import { Image } from "@/components/Image"
4-
import { BaseLink } from "@/components/ui/Link"
54
import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
65
import { Tag } from "@/components/ui/tag"
76
import TruncatedText from "@/components/ui/TruncatedText"
@@ -97,18 +96,16 @@ const AppCard = ({
9796
hoverClassName || "hover:bg-background-highlight"
9897
)}
9998
>
100-
<LinkOverlay asChild>
101-
<BaseLink
102-
href={`/apps/${slugify(app.name)}`}
103-
className="no-underline"
104-
customEventOptions={{
105-
eventCategory: matomoCategory,
106-
eventAction: `${matomoAction}`,
107-
eventName: `app name ${app.name}`,
108-
}}
109-
>
110-
{cardContent}
111-
</BaseLink>
99+
<LinkOverlay
100+
href={`/apps/${slugify(app.name)}`}
101+
className="no-underline"
102+
customEventOptions={{
103+
eventCategory: matomoCategory,
104+
eventAction: `${matomoAction}`,
105+
eventName: `app name ${app.name}`,
106+
}}
107+
>
108+
{cardContent}
112109
</LinkOverlay>
113110
</LinkBox>
114111
)

‎app/[locale]/apps/_components/AppsHighlight.tsx‎

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { AppData } from "@/lib/types"
22

33
import { Image } from "@/components/Image"
4-
import { BaseLink } from "@/components/ui/Link"
54
import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
65
import TruncatedText from "@/components/ui/TruncatedText"
76

@@ -21,43 +20,41 @@ const AppsHighlight = ({ apps, matomoCategory }: AppsHighlightProps) => {
2120
key={index}
2221
className="group w-full rounded-xl p-3 hover:bg-background-highlight"
2322
>
24-
<LinkOverlay asChild>
25-
<BaseLink
26-
href={`/apps/${slugify(app.name)}`}
27-
className="no-underline"
28-
customEventOptions={{
29-
eventCategory: matomoCategory,
30-
eventAction: "highlights",
31-
eventName: `app name ${app.name}`,
32-
}}
33-
>
34-
<div className="relative mb-2 aspect-[2/1] w-full">
35-
<Image
36-
src={app.bannerImage}
37-
alt={`${app.name} application banner showing the main interface`}
38-
fill
39-
className="rounded-xl object-cover"
40-
/>
41-
</div>
42-
<div className="mb-4">
43-
<TruncatedText
44-
text={app.description}
45-
maxLines={2}
46-
matomoEvent={{
47-
eventCategory: matomoCategory,
48-
eventAction: "highlights_show_more",
49-
eventName: `app description ${app.name}`,
50-
}}
51-
/>
52-
</div>
53-
<AppCard
54-
app={app}
55-
imageSize={16}
56-
disableLink
57-
matomoCategory={matomoCategory}
58-
matomoAction="highlights"
23+
<LinkOverlay
24+
href={`/apps/${slugify(app.name)}`}
25+
className="no-underline"
26+
customEventOptions={{
27+
eventCategory: matomoCategory,
28+
eventAction: "highlights",
29+
eventName: `app name ${app.name}`,
30+
}}
31+
>
32+
<div className="relative mb-2 aspect-[2/1] w-full">
33+
<Image
34+
src={app.bannerImage}
35+
alt={`${app.name} application banner showing the main interface`}
36+
fill
37+
className="rounded-xl object-cover"
5938
/>
60-
</BaseLink>
39+
</div>
40+
<div className="mb-4">
41+
<TruncatedText
42+
text={app.description}
43+
maxLines={2}
44+
matomoEvent={{
45+
eventCategory: matomoCategory,
46+
eventAction: "highlights_show_more",
47+
eventName: `app description ${app.name}`,
48+
}}
49+
/>
50+
</div>
51+
<AppCard
52+
app={app}
53+
imageSize={16}
54+
disableLink
55+
matomoCategory={matomoCategory}
56+
matomoAction="highlights"
57+
/>
6158
</LinkOverlay>
6259
</LinkBox>
6360
))

‎app/[locale]/apps/_components/TopApps.tsx‎

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Folder } from "lucide-react"
55
import { AppCategory, AppData } from "@/lib/types"
66

77
import { Button } from "@/components/ui/buttons/Button"
8-
import { BaseLink } from "@/components/ui/Link"
98
import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
109
import {
1110
Swiper,
@@ -92,48 +91,46 @@ const TopApps = ({ appsData }: TopAppsProps) => {
9291
<SwiperSlide key={category}>
9392
<div className="flex flex-col rounded-xl border">
9493
<LinkBox className="rounded-t-xl border-b p-4 hover:bg-background-highlight">
95-
<LinkOverlay asChild>
96-
<BaseLink
97-
href={`/apps/categories/${slugify(category)}`}
98-
className="text-body no-underline"
99-
customEventOptions={{
100-
eventCategory: "apps",
101-
eventAction: "categories",
102-
eventName: `topapps_category_name_${category}`,
103-
}}
104-
>
105-
<div className="flex flex-row items-center justify-between gap-2">
106-
<div className="flex items-center gap-2">
107-
<div className="rounded-lg border p-2">
108-
{(() => {
109-
// Find the category data by matching the name
110-
const categoryData = Object.values(
111-
appsCategories
112-
).find((cat) => cat.name === category)
113-
const CategoryIcon = categoryData?.icon
114-
return CategoryIcon ? (
115-
<CategoryIcon className="h-6 w-6" />
116-
) : (
117-
<Folder className="h-6 w-6" />
118-
)
119-
})()}
120-
</div>
121-
<p className="text-lg font-bold text-body no-underline group-hover:text-primary">
122-
{category}
123-
</p>
124-
</div>
125-
<div>
126-
<Button
127-
variant="outline"
128-
isSecondary
129-
size="sm"
130-
className="w-fit"
131-
>
132-
<p className="text-sm">See all</p>
133-
</Button>
94+
<LinkOverlay
95+
href={`/apps/categories/${slugify(category)}`}
96+
className="text-body no-underline"
97+
customEventOptions={{
98+
eventCategory: "apps",
99+
eventAction: "categories",
100+
eventName: `topapps_category_name_${category}`,
101+
}}
102+
>
103+
<div className="flex flex-row items-center justify-between gap-2">
104+
<div className="flex items-center gap-2">
105+
<div className="rounded-lg border p-2">
106+
{(() => {
107+
// Find the category data by matching the name
108+
const categoryData = Object.values(
109+
appsCategories
110+
).find((cat) => cat.name === category)
111+
const CategoryIcon = categoryData?.icon
112+
return CategoryIcon ? (
113+
<CategoryIcon className="h-6 w-6" />
114+
) : (
115+
<Folder className="h-6 w-6" />
116+
)
117+
})()}
134118
</div>
119+
<p className="text-lg font-bold text-body no-underline group-hover:text-primary">
120+
{category}
121+
</p>
122+
</div>
123+
<div>
124+
<Button
125+
variant="outline"
126+
isSecondary
127+
size="sm"
128+
className="w-fit"
129+
>
130+
<p className="text-sm">See all</p>
131+
</Button>
135132
</div>
136-
</BaseLink>
133+
</div>
137134
</LinkOverlay>
138135
</LinkBox>
139136
<div className="flex flex-col">

‎src/components/Roadmap/RoadmapActionCard/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const RoadmapActionCard = ({
4242
<Flex className="flex-1 flex-col justify-between gap-4 p-6">
4343
<h3 className="text-2xl">{title}</h3>
4444
<p className="flex-1">{description}</p>
45-
<LinkOverlay asChild>
45+
<LinkOverlay href={href} className="no-underline">
4646
<ButtonLink href={href}>{buttonText}</ButtonLink>
4747
</LinkOverlay>
4848
</Flex>

‎src/components/ui/link-box.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
import { type BaseHTMLAttributes, type ElementRef, forwardRef } from "react"
44
import { Slot } from "@radix-ui/react-slot"
55

6+
import { BaseLink } from "@/components/ui/Link"
7+
68
import { cn } from "@/lib/utils/cn"
79
import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
810

@@ -21,16 +23,16 @@ const LinkBox = forwardRef<LinkBoxElement, LinkBoxProps>(
2123

2224
LinkBox.displayName = "LinkBox"
2325

24-
type LinkOverlayElement = ElementRef<"a">
26+
type LinkOverlayElement = ElementRef<typeof BaseLink>
2527

26-
type LinkOverlayProps = BaseHTMLAttributes<HTMLAnchorElement> & {
28+
type LinkOverlayProps = React.ComponentProps<typeof BaseLink> & {
2729
asChild?: boolean
2830
matomoEvent?: MatomoEventOptions
2931
}
3032

3133
const LinkOverlay = forwardRef<LinkOverlayElement, LinkOverlayProps>(
3234
({ asChild, className, matomoEvent, ...props }, ref) => {
33-
const Comp = asChild ? Slot : "a"
35+
const Comp = asChild ? Slot : BaseLink
3436

3537
return (
3638
<Comp

0 commit comments

Comments
 (0)