This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
website/components/design/IconLink/IconLink.tsx

40 lines
911 B
TypeScript
Raw Permalink Normal View History

import Link from "next/link"
import classNames from "clsx"
export interface IconLinkProps {
selected?: boolean
href: string
title?: string
className?: string
}
2022-05-12 20:35:46 +02:00
export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
props,
2022-05-12 20:35:46 +02:00
) => {
const { children, selected, href, title, className } = props
return (
2022-12-13 11:38:07 +01:00
<Link
href={href}
className="group relative flex w-full justify-center"
2022-12-13 11:38:07 +01:00
title={title}
>
<div
className={classNames("group flex w-full justify-center", className)}
2022-12-13 11:38:07 +01:00
>
{children}
<div className="absolute left-0 flex h-12 w-3 items-center">
2022-12-13 11:38:07 +01:00
<span
className={classNames(
"absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5",
2022-12-13 11:38:07 +01:00
{
"h-full": selected,
},
2022-12-13 11:38:07 +01:00
)}
></span>
</div>
2022-12-13 11:38:07 +01:00
</div>
</Link>
)
}