mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 23:29:08 +03:00
753327d13e
* d5 init * LW12-5: Blog PostgREST (#28672) * add lw12 day 5 postgrest blog post * add images * Update apps/www/_blog/2024-08-16-postgrest-12-2.mdx Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com> --------- Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com> * LW12-5: Blog vec2pg (#28673) * add lw12 day 5 vec2pg blog post * Update apps/www/_blog/2024-08-16-vec2pg.mdx Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com> --------- Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com> * LW12-5: Blog pg_graphql (#28675) * add lw12 day 5 pg_graphql blog post * prettier fixes * Update apps/www/_blog/2024-08-16-pg_graphql-1-5-7.mdx Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com> --------- Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com> * LW12-5: Blog Wrappers (#28619) * blog: inital blog post for lw12 day 5 * blog: prettify blog post * blog: fix wrong section * fix: replace note tag * chore: adjust heading * format example code * update images * fix template repo link * add access control blog * add build items * remove full stop * LW12: Add python support blog post (#28682) * Adds the top 10 post * fix underscores in blog names * minor fixes * feat: intro/outro python blog * fix: format python doc * add summary build card * fix: python links * add video * Update apps/www/_blog/2024-08-16-python-support.mdx --------- Co-authored-by: Oliver Rice <github@oliverrice.com> Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com> Co-authored-by: Bo Lu <burmecia@users.noreply.github.com> Co-authored-by: Inian <inian1234@gmail.com> Co-authored-by: Guilherme Souza <grsouza@pm.me> Co-authored-by: awalias <antwilson@hotmail.co.uk> Co-authored-by: Ant Wilson <awalias@users.noreply.github.com>
77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import React, { ReactNode } from 'react'
|
|
import Link from 'next/link'
|
|
import { Badge, cn } from 'ui'
|
|
import { ArrowNarrowRightIcon } from '@heroicons/react/outline'
|
|
|
|
interface Props {
|
|
url: string
|
|
announcement: string | ReactNode
|
|
badge?: string | ReactNode
|
|
target?: '_self' | '_blank' | string
|
|
className?: string
|
|
hasArrow?: boolean
|
|
}
|
|
|
|
const AnnouncementBadge = ({
|
|
url,
|
|
announcement,
|
|
badge,
|
|
target = '_self',
|
|
className,
|
|
hasArrow = true,
|
|
}: Props) => (
|
|
<div className={cn('relative w-fit max-w-xl flex justify-center', className)}>
|
|
<Link
|
|
href={url}
|
|
target={target}
|
|
className={cn(
|
|
`
|
|
announcement-link
|
|
group/announcement
|
|
relative
|
|
flex flex-row
|
|
items-center
|
|
p-1 pr-3
|
|
text-sm
|
|
w-auto
|
|
gap-2
|
|
text-left
|
|
rounded-full
|
|
bg-opacity-20
|
|
border
|
|
border-background-surface-300
|
|
hover:border-foreground-muted
|
|
hover:border-opacity-30
|
|
shadow-md
|
|
overflow-hidden
|
|
focus-visible:outline-none focus-visible:ring-brand-600 focus-visible:ring-2 focus-visible:rounded-full
|
|
`,
|
|
!badge && 'px-4'
|
|
)}
|
|
>
|
|
{badge && (
|
|
<Badge variant="brand" size="large" className="py-1 announcement-badge">
|
|
{badge}
|
|
</Badge>
|
|
)}
|
|
<span className="text-foreground announcement-text">{announcement}</span>
|
|
{hasArrow && (
|
|
<ArrowNarrowRightIcon className="announcement-icon h-4 ml-2 -translate-x-1 text-foreground transition-transform group-hover/announcement:translate-x-0" />
|
|
)}
|
|
<div
|
|
className="absolute inset-0 -z-10 bg-gradient-to-br
|
|
opacity-70
|
|
group-hover/announcement:opacity-100
|
|
transition-opacity
|
|
overflow-hidden rounded-full
|
|
from-background-surface-100
|
|
to-background-surface-300
|
|
backdrop-blur-md
|
|
"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
)
|
|
|
|
export default AnnouncementBadge
|