supabase/apps/studio/components/interfaces/Storage/AlphaNotice.tsx

import { ExternalLink } from 'lucide-react'
import Link from 'next/link'

import { BASE_PATH } from 'lib/constants'
import { Badge, Button } from 'ui'
import { Admonition } from 'ui-patterns'

export const AlphaNotice = ({ type }: { type: 'analytics' | 'vector' }) => {
  return (
    <Admonition showIcon={false} type="tip" className="relative mb-6 overflow-hidden">
      <div className="absolute -inset-16 z-0 opacity-50">
        <img
          src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
          alt="Supabase Grafana"
          className="w-full h-full object-cover object-right hidden dark:block"
        />
        <img
          src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
          alt="Supabase Grafana"
          className="w-full h-full object-cover object-right dark:hidden"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-background-alternative to-transparent" />
      </div>

      <div className="relative z-10 flex flex-col md:flex-row md:items-center gap-y-2 md:gap-x-8 justify-between px-2 py-1">
        <div className="flex flex-col gap-y-0.5">
          <div className="flex flex-col gap-y-2 items-start">
            <Badge variant="success" className="-ml-0.5 uppercase">
              New
            </Badge>
            <p className="text-sm font-medium">Introducing {type} buckets</p>
          </div>
          <p className="text-sm text-foreground-lighter text-balance">
            <span className="capitalize">{type}</span> buckets are now in private alpha. Expect
            rapid changes, limited features, and possible breaking updates. Please share feedback as
            we refine the experience and expand access.
          </p>
        </div>
        <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />} className="mt-2">
          <Link
            target="_blank"
            rel="noopener noreferrer"
            href={
              type === 'analytics'
                ? 'https://github.com/orgs/supabase/discussions/40116'
                : // [Joshen] To update with Vector specific GH discussion
                  'https://github.com/orgs/supabase/discussions/40116'
            }
          >
            Share feedback
          </Link>
        </Button>
      </div>
    </Admonition>
  )
}