Files
supabase/apps/docs/components/ButtonCard.tsx
Chris Chinchilla 309f4b2612 docs: Track 404 recommendation clicked (#46990)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added analytics telemetry for documentation 404 recommendation clicks,
recording the clicked destination and the originating page.

* **Improvements**
* Enhanced the ButtonCard component to optionally handle click actions
via an `onClick` callback and forward it to the underlying link element.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-17 22:56:53 +08:00

62 lines
1.4 KiB
TypeScript

import Image from 'next/legacy/image'
import Link from 'next/link'
import React, { FC } from 'react'
import { cn } from 'ui'
interface Props {
title: string
description?: string
to: string
icon?: string | any
children?: any
layout?: 'vertical' | 'horizontal'
className?: string
onClick?: () => void
}
const ButtonCard: FC<Props> = ({
children = undefined,
icon = undefined,
title,
description = '',
to,
layout = 'vertical',
className,
onClick,
}) => {
return (
<Link
href={to}
onClick={onClick}
className={cn(
'h-full block shadow-none bg-surface-100 rounded-sm transition',
'border border-transparent hover:border-overlay',
className
)}
>
{children ? (
children
) : (
<div
className={[
'px-6 py-4 gap-x-4 gap-y-2 flex',
`${layout === 'vertical' ? 'flex-col' : 'items-center'}`,
].join(' ')}
>
{icon && typeof icon == 'string' ? (
<div className="w-[24px] h-[24px]">
<Image className="m-0" src={icon} width={24} height={24} alt={title} />
</div>
) : (
icon
)}
<h3 className="my-0 text-base text-foreground">{title}</h3>
<p className="my-0 text-sm">{description}</p>
</div>
)}
</Link>
)
}
export default ButtonCard