mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { useParams } from 'common'
|
||
import { ChevronDown } from 'lucide-react'
|
||
import Link from 'next/link'
|
||
import {
|
||
Button,
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuTrigger,
|
||
} from 'ui'
|
||
import { Admonition } from 'ui-patterns/admonition'
|
||
|
||
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
|
||
|
||
export const CustomEmailTemplateRestrictionAdmonition = () => {
|
||
const { ref: projectRef } = useParams()
|
||
const { data: selectedOrganization } = useSelectedOrganizationQuery()
|
||
const organizationSlug = selectedOrganization?.slug ?? '_'
|
||
|
||
return (
|
||
<Admonition
|
||
type="default"
|
||
layout="responsive"
|
||
title="Set up custom SMTP to edit templates"
|
||
description="Emails will be sent using the default templates. Set up custom SMTP to edit their subject and body."
|
||
actions={
|
||
<div className="flex w-full @lg:w-auto">
|
||
<Button
|
||
asChild
|
||
variant="default"
|
||
className="flex-1 rounded-r-none px-3 @lg:flex-none hover:z-10"
|
||
>
|
||
<Link href={`/project/${projectRef}/auth/smtp`}>Set up SMTP</Link>
|
||
</Button>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button
|
||
variant="default"
|
||
aria-label="More email template editing options"
|
||
className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px"
|
||
icon={<ChevronDown />}
|
||
/>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="w-52">
|
||
<DropdownMenuItem asChild>
|
||
<Link
|
||
href={`/org/${organizationSlug}/billing?panel=subscriptionPlan&source=authEmailTemplates`}
|
||
>
|
||
<div className="flex flex-col gap-y-0.5">
|
||
<p className="block text-foreground">Upgrade to Pro</p>
|
||
<p className="block text-foreground-lighter text-balance">
|
||
Customize templates while using Supabase’s email service
|
||
</p>
|
||
</div>
|
||
</Link>
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem asChild>
|
||
<Link href={`/project/${projectRef}/auth/hooks?hook=send-email`}>
|
||
<div className="flex flex-col gap-y-0.5">
|
||
<p className="block text-foreground">Configure Send Email hook</p>
|
||
<p className="block text-foreground-lighter text-balance">
|
||
Send auth emails through your own workflow
|
||
</p>
|
||
</div>
|
||
</Link>
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
}
|
||
/>
|
||
)
|
||
}
|