61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { ComponentProps, useRef } from 'react';
|
|
import { clsx } from 'clsx/lite';
|
|
import Link from 'next/link';
|
|
import useVisibility from '@/utility/useVisibility';
|
|
import OGLoaderImage from './OGLoaderImage';
|
|
|
|
export type OGTilePropsCore = Omit<
|
|
ComponentProps<typeof OGTile>,
|
|
'title' | 'description' | 'path' | 'pathImage'
|
|
>;
|
|
|
|
export default function OGTile({
|
|
path,
|
|
pathImage,
|
|
description,
|
|
riseOnHover,
|
|
onVisible,
|
|
...props
|
|
}: {
|
|
description: string
|
|
pathImage: string
|
|
riseOnHover?: boolean
|
|
onVisible?: () => void
|
|
} & ComponentProps<typeof OGLoaderImage>) {
|
|
const ref = useRef<HTMLAnchorElement>(null);
|
|
|
|
useVisibility({ ref, onVisible });
|
|
|
|
return (
|
|
<Link
|
|
ref={ref}
|
|
href={path}
|
|
className={clsx(
|
|
'group',
|
|
'block w-full rounded-md overflow-hidden',
|
|
'border-medium shadow-xs',
|
|
riseOnHover && 'hover:-translate-y-1.5 transition-transform',
|
|
)}
|
|
>
|
|
<OGLoaderImage {...{ ...props, path: pathImage }} />
|
|
<div className={clsx(
|
|
'h-full flex flex-col gap-0.5 p-3',
|
|
'font-sans leading-tight',
|
|
'bg-gray-50 dark:bg-gray-900/50',
|
|
'group-active:bg-gray-50 dark:group-active:bg-gray-900/50',
|
|
'group-hover:bg-gray-100 dark:group-hover:bg-gray-900/70',
|
|
'border-t border-gray-200 dark:border-gray-800',
|
|
)}>
|
|
<div className="text-gray-800 dark:text-white font-medium">
|
|
{props.title}
|
|
</div>
|
|
<div className="text-medium">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|