66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import { useApp } from "@/contexts/AppContext";
|
||
|
|
|
||
|
|
interface ProtocolLinkProps {
|
||
|
|
icon: string;
|
||
|
|
label: string;
|
||
|
|
arrowIcon: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
function ProtocolLink({ icon, label, arrowIcon }: ProtocolLinkProps) {
|
||
|
|
return (
|
||
|
|
<div className="group cursor-pointer rounded-xl border border-border-gray dark:border-gray-600 bg-bg-subtle dark:bg-gray-700 px-4 py-3.5 flex items-center justify-between w-full transition-all hover:border-black dark:hover:border-gray-400">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Image
|
||
|
|
src={icon}
|
||
|
|
alt=""
|
||
|
|
width={20}
|
||
|
|
height={24}
|
||
|
|
className="transition-all group-hover:scale-110 group-hover:brightness-0 dark:group-hover:brightness-0 dark:group-hover:invert"
|
||
|
|
/>
|
||
|
|
<span className="text-body-small font-medium text-text-tertiary dark:text-gray-300 transition-all group-hover:font-bold group-hover:scale-[1.02] group-hover:text-text-primary dark:group-hover:text-white">
|
||
|
|
{label}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Image
|
||
|
|
src={arrowIcon}
|
||
|
|
alt=""
|
||
|
|
width={20}
|
||
|
|
height={24}
|
||
|
|
className="transition-all group-hover:scale-110 group-hover:brightness-0 dark:group-hover:brightness-0 dark:group-hover:invert"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ProtocolInformation() {
|
||
|
|
const { t } = useApp();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 px-6 py-8 flex flex-col gap-4 overflow-y-auto">
|
||
|
|
<h3 className="text-body-large font-bold text-text-primary dark:text-white">
|
||
|
|
{t("protocol.title")}
|
||
|
|
</h3>
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<ProtocolLink
|
||
|
|
icon="/component-17.svg"
|
||
|
|
label={t("protocol.whitepaper")}
|
||
|
|
arrowIcon="/component-18.svg"
|
||
|
|
/>
|
||
|
|
<ProtocolLink
|
||
|
|
icon="/component-19.svg"
|
||
|
|
label={t("protocol.documentation")}
|
||
|
|
arrowIcon="/component-110.svg"
|
||
|
|
/>
|
||
|
|
<ProtocolLink
|
||
|
|
icon="/component-111.svg"
|
||
|
|
label={t("protocol.github")}
|
||
|
|
arrowIcon="/component-112.svg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|