mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 14:49:10 +03:00
kemal.earth
f1eb1dc4c5
* feat: log drains card A little more control over our card and isolated so we can include pricing information * feat: separate vote link * feat: get the right page layout components * feat: tidy up table * feat: quick pick dropdown * feat: prettify name of destination * fix: checks for button and header * feat: rename http endpoint to custom * chore: copy update and remove github icon on vote * feat: add confirmation modal for when adding log drains * feat: sort table by name We dont have create_at for log drains so sorting the table by names * chore: sort by id instead * fix: mobile scaling of table * chore: clean up commented elements
35 lines
965 B
TypeScript
35 lines
965 B
TypeScript
import { Card } from 'ui'
|
|
|
|
interface LogDrainsCardProps {
|
|
title: string
|
|
description: string
|
|
rightLabel?: string
|
|
icon: React.ReactNode
|
|
onClick: () => void
|
|
}
|
|
|
|
export const LogDrainsCard = ({
|
|
title,
|
|
description,
|
|
rightLabel,
|
|
icon,
|
|
onClick,
|
|
}: LogDrainsCardProps) => {
|
|
return (
|
|
<button className="w-full h-full text-left" onClick={onClick}>
|
|
<Card className="p-6 cursor-pointer hover:bg-surface-200 hover:border-strong transition-colors h-48">
|
|
<div className="flex flex-col gap-5">
|
|
<div className="flex items-start justify-between w-full">
|
|
<div>{icon}</div>
|
|
<div className="text-xs text-foreground-light">{rightLabel}</div>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<h1 className="text-base">{title}</h1>
|
|
<p className="text-sm text-foreground-light leading-relaxed">{description}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</button>
|
|
)
|
|
}
|