danabra.mov
an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1"use client";
2
3import Link, { useLinkStatus } from "next/link";
4import type { ReactNode } from "react";
5import "./Card.css";
6
7type Props = {
8 href: string;
9 accentColor: string;
10 backgroundColor: string;
11 children: ReactNode;
12};
13
14function CardBg({ accentColor, backgroundColor, children }: Omit<Props, "href">) {
15 const { pending } = useLinkStatus();
16
17 return (
18 <div
19 className={`Card-bg${pending ? " Card-bg--pending" : ""}`}
20 style={
21 {
22 "--accent-color": accentColor,
23 "--accent-color-transparent": `${accentColor}20`,
24 "--bg-color": backgroundColor,
25 } as React.CSSProperties
26 }
27 >
28 {children}
29 </div>
30 );
31}
32
33export function Card({ href, accentColor, backgroundColor, children }: Props) {
34 return (
35 <Link href={href} className="Card">
36 <CardBg accentColor={accentColor} backgroundColor={backgroundColor}>
37 {children}
38 </CardBg>
39 </Link>
40 );
41}