You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.1 KiB
73 lines
2.1 KiB
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Button from "./button";
|
|
|
|
export type AdvisorAvatar = {
|
|
id: string;
|
|
src: string;
|
|
};
|
|
|
|
type AdvisorActionsCardProps = {
|
|
title: string;
|
|
description: string;
|
|
avatars: AdvisorAvatar[];
|
|
extraCount: number;
|
|
getAdvisorLabel: string;
|
|
getAdvisorHref: string;
|
|
className?: string;
|
|
};
|
|
|
|
export function AdvisorActionsCard({
|
|
title,
|
|
description,
|
|
avatars,
|
|
extraCount,
|
|
getAdvisorLabel,
|
|
getAdvisorHref,
|
|
className,
|
|
}: AdvisorActionsCardProps) {
|
|
return (
|
|
<section className={["space-y-3", className].filter(Boolean).join(" ")}>
|
|
<div className="rounded-[13px] border border-white/80 bg-white/72 px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
|
|
<h2 className="group-16 leading-none font-bold text-[#1C1C1C]">
|
|
{title}
|
|
</h2>
|
|
<p className="mt-2 max-w-[280px] group-10 leading-[1.45] font-semibold text-[#8A8A8A]">
|
|
{description}
|
|
</p>
|
|
|
|
<div className="mt-4 flex items-center justify-between gap-3">
|
|
<div className="flex items-center pl-1">
|
|
{avatars.map((avatar) => (
|
|
<span
|
|
key={avatar.id}
|
|
className="-ml-1.5 flex h-[30px] w-[30px] overflow-hidden rounded-full border-2 border-white bg-[#E7E7E7] first:ml-0"
|
|
>
|
|
<Image
|
|
src={avatar.src}
|
|
alt=""
|
|
width={30}
|
|
height={30}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</span>
|
|
))}
|
|
<span className="-ml-1.5 flex h-[30px] w-[30px] items-center justify-center rounded-full border-2 border-white bg-[#EDEEF1] group-10 font-semibold text-[#1C1C1C]">
|
|
+{extraCount}
|
|
</span>
|
|
</div>
|
|
|
|
<Button
|
|
className="w-auto rounded-[9px] border-none bg-[#EBEDF0] bg-none px-5 py-[13px] text-[#111111]! shadow-none"
|
|
href={getAdvisorHref}
|
|
>
|
|
{getAdvisorLabel}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default AdvisorActionsCard;
|