mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
Merge pull request #26 from Portabase/feat/coming-soon-preview
feat(ui): add preview for upcoming notification provider
This commit is contained in:
Killian Larcher
@@ -2,12 +2,18 @@ import {Mail} from "lucide-react";
|
|||||||
import type {SVGProps} from 'react';
|
import type {SVGProps} from 'react';
|
||||||
|
|
||||||
export const getNotificationChannelIcon = (type: string) => {
|
export const getNotificationChannelIcon = (type: string) => {
|
||||||
const Icon = notificationTypes.find((t) => t.value === type)?.icon
|
const Icon = notificationProviders.find((t) => t.value === type)?.icon
|
||||||
return Icon ? <Icon className="h-4 w-4"/> : null
|
return Icon ? <Icon className="h-4 w-4"/> : null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type NotificationProps = {
|
||||||
|
value: string
|
||||||
|
label: string
|
||||||
|
icon: any
|
||||||
|
preview?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
export const notificationTypes = [
|
export const notificationProviders: Array<NotificationProps> = [
|
||||||
{value: "smtp", label: "Email", icon: Mail},
|
{value: "smtp", label: "Email", icon: Mail},
|
||||||
{value: "slack", label: "Slack", icon: SlackIcon},
|
{value: "slack", label: "Slack", icon: SlackIcon},
|
||||||
{value: "discord", label: "Discord", icon: DiscordIcon},
|
{value: "discord", label: "Discord", icon: DiscordIcon},
|
||||||
@@ -15,22 +21,45 @@ export const notificationTypes = [
|
|||||||
{value: "gotify", label: "Gotify", icon: GotifyIcon},
|
{value: "gotify", label: "Gotify", icon: GotifyIcon},
|
||||||
{value: "ntfy", label: "ntfy.sh", icon: NtfyIcon},
|
{value: "ntfy", label: "ntfy.sh", icon: NtfyIcon},
|
||||||
{value: "webhook", label: "Webhook", icon: WebhookIcon},
|
{value: "webhook", label: "Webhook", icon: WebhookIcon},
|
||||||
|
{value: "microsoft-teams", label: "Microsoft Teams", icon: MSTeamsIcon, preview: true}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
export function SlackIcon(props: SVGProps<SVGSVGElement>) {
|
export function SlackIcon(props: SVGProps<SVGSVGElement>) {
|
||||||
return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}><path fill="#e01e5a" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z"></path><path fill="#36c5f0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z"></path><path fill="#2eb67d" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z"></path><path fill="#ecb22e" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z"></path></svg>);
|
return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}>
|
||||||
|
<path fill="#e01e5a"
|
||||||
|
d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z"></path>
|
||||||
|
<path fill="#36c5f0"
|
||||||
|
d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z"></path>
|
||||||
|
<path fill="#2eb67d"
|
||||||
|
d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z"></path>
|
||||||
|
<path fill="#ecb22e"
|
||||||
|
d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z"></path>
|
||||||
|
</svg>);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function DiscordIcon(props: SVGProps<SVGSVGElement>) {
|
export function DiscordIcon(props: SVGProps<SVGSVGElement>) {
|
||||||
return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={199} viewBox="0 0 256 199" {...props}><path fill="#5865f2" d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"></path></svg>);
|
return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={199} viewBox="0 0 256 199" {...props}>
|
||||||
|
<path fill="#5865f2"
|
||||||
|
d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"></path>
|
||||||
|
</svg>);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TelegramIcon(props: SVGProps<SVGSVGElement>) {
|
export function TelegramIcon(props: SVGProps<SVGSVGElement>) {
|
||||||
return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}><defs><linearGradient id="SVGuySfwdaH" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stopColor="#2aabee"></stop><stop offset="100%" stopColor="#229ed9"></stop></linearGradient></defs><path fill="url(#SVGuySfwdaH)" d="M128 0C94.06 0 61.48 13.494 37.5 37.49A128.04 128.04 0 0 0 0 128c0 33.934 13.5 66.514 37.5 90.51C61.48 242.506 94.06 256 128 256s66.52-13.494 90.5-37.49c24-23.996 37.5-56.576 37.5-90.51s-13.5-66.514-37.5-90.51C194.52 13.494 161.94 0 128 0"></path><path fill="#fff" d="M57.94 126.648q55.98-24.384 74.64-32.152c35.56-14.786 42.94-17.354 47.76-17.441c1.06-.017 3.42.245 4.96 1.49c1.28 1.05 1.64 2.47 1.82 3.467c.16.996.38 3.266.2 5.038c-1.92 20.24-10.26 69.356-14.5 92.026c-1.78 9.592-5.32 12.808-8.74 13.122c-7.44.684-13.08-4.912-20.28-9.63c-11.26-7.386-17.62-11.982-28.56-19.188c-12.64-8.328-4.44-12.906 2.76-20.386c1.88-1.958 34.64-31.748 35.26-34.45c.08-.338.16-1.598-.6-2.262c-.74-.666-1.84-.438-2.64-.258c-1.14.256-19.12 12.152-54 35.686c-5.1 3.508-9.72 5.218-13.88 5.128c-4.56-.098-13.36-2.584-19.9-4.708c-8-2.606-14.38-3.984-13.82-8.41c.28-2.304 3.46-4.662 9.52-7.072"></path></svg>);
|
return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="SVGuySfwdaH" x1="50%" x2="50%" y1="0%" y2="100%">
|
||||||
|
<stop offset="0%" stopColor="#2aabee"></stop>
|
||||||
|
<stop offset="100%" stopColor="#229ed9"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path fill="url(#SVGuySfwdaH)"
|
||||||
|
d="M128 0C94.06 0 61.48 13.494 37.5 37.49A128.04 128.04 0 0 0 0 128c0 33.934 13.5 66.514 37.5 90.51C61.48 242.506 94.06 256 128 256s66.52-13.494 90.5-37.49c24-23.996 37.5-56.576 37.5-90.51s-13.5-66.514-37.5-90.51C194.52 13.494 161.94 0 128 0"></path>
|
||||||
|
<path fill="#fff"
|
||||||
|
d="M57.94 126.648q55.98-24.384 74.64-32.152c35.56-14.786 42.94-17.354 47.76-17.441c1.06-.017 3.42.245 4.96 1.49c1.28 1.05 1.64 2.47 1.82 3.467c.16.996.38 3.266.2 5.038c-1.92 20.24-10.26 69.356-14.5 92.026c-1.78 9.592-5.32 12.808-8.74 13.122c-7.44.684-13.08-4.912-20.28-9.63c-11.26-7.386-17.62-11.982-28.56-19.188c-12.64-8.328-4.44-12.906 2.76-20.386c1.88-1.958 34.64-31.748 35.26-34.45c.08-.338.16-1.598-.6-2.262c-.74-.666-1.84-.438-2.64-.258c-1.14.256-19.12 12.152-54 35.686c-5.1 3.508-9.72 5.218-13.88 5.128c-4.56-.098-13.36-2.584-19.9-4.708c-8-2.606-14.38-3.984-13.82-8.41c.28-2.304 3.46-4.662 9.52-7.072"></path>
|
||||||
|
</svg>);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export function NtfyIcon(props: SVGProps<SVGSVGElement>) {
|
export function NtfyIcon(props: SVGProps<SVGSVGElement>) {
|
||||||
|
|
||||||
return (<svg
|
return (<svg
|
||||||
@@ -126,7 +155,8 @@ export function GotifyIcon(props: SVGProps<SVGSVGElement>) {
|
|||||||
d="m258.9 119.7-9-2.7c-4.6-1.4-9.2-2.8-14-2.5-2.8.2-6.1 1.3-6.9 4-.6 2-1.6 7.3-1.3 7.9 1.5 3.4 13.9 6.7 18.3 6.7"
|
d="m258.9 119.7-9-2.7c-4.6-1.4-9.2-2.8-14-2.5-2.8.2-6.1 1.3-6.9 4-.6 2-1.6 7.3-1.3 7.9 1.5 3.4 13.9 6.7 18.3 6.7"
|
||||||
className="st1"
|
className="st1"
|
||||||
/>
|
/>
|
||||||
<path d="M392.6 177.9c-1.4 1.4-2.2 3.5-2.5 5.5-.2 1.4-.1 3 .5 4.3s1.8 2.3 3.1 3c1.3.6 2.8.9 4.3.9 1.1 0 2.3-.1 3.1-.9.6-.7.8-1.6.9-2.5.2-2.3-.1-4.7-.9-6.9-.4-1.1-.9-2.3-1.8-3.1-1.7-1.8-4.5-2.2-6.4-.5-.1 0-.2.1-.3.2" />
|
<path
|
||||||
|
d="M392.6 177.9c-1.4 1.4-2.2 3.5-2.5 5.5-.2 1.4-.1 3 .5 4.3s1.8 2.3 3.1 3c1.3.6 2.8.9 4.3.9 1.1 0 2.3-.1 3.1-.9.6-.7.8-1.6.9-2.5.2-2.3-.1-4.7-.9-6.9-.4-1.1-.9-2.3-1.8-3.1-1.7-1.8-4.5-2.2-6.4-.5-.1 0-.2.1-.3.2"/>
|
||||||
<path
|
<path
|
||||||
d="M358.5 164.2c-1-1 0-2.7 1-3.7 5.8-5.2 15.1-4.6 21.8-.6 10.9 6.6 15.6 19.9 17.2 32.5.6 5.2.9 10.6-.5 15.7s-4.6 9.9-9.3 12.1c-1.1.5-2.3.9-3.4.5s-1.9-1.8-1.2-2.8c-9.4-13.6-19-26.8-20.9-43.2-.5-4.1-1.8-7.4-4.7-10.5z"
|
d="M358.5 164.2c-1-1 0-2.7 1-3.7 5.8-5.2 15.1-4.6 21.8-.6 10.9 6.6 15.6 19.9 17.2 32.5.6 5.2.9 10.6-.5 15.7s-4.6 9.9-9.3 12.1c-1.1.5-2.3.9-3.4.5s-1.9-1.8-1.2-2.8c-9.4-13.6-19-26.8-20.9-43.2-.5-4.1-1.8-7.4-4.7-10.5z"
|
||||||
className="st2"
|
className="st2"
|
||||||
@@ -319,7 +349,8 @@ export function GotifyIcon(props: SVGProps<SVGSVGElement>) {
|
|||||||
d="M261.9 283.5c-.1 4.2 4.3 7.3 8.4 7.6s8.2-1.3 12.2-2.6c1.4-.4 2.9-.8 4.2-.2 1.8.9 2.7 4.1 1.8 5.9s-3.4 3.5-5.3 4.4c-6.5 3-12.9 3.6-19.9 2-5.3-1.2-11.3-4.3-13-13.5"
|
d="M261.9 283.5c-.1 4.2 4.3 7.3 8.4 7.6s8.2-1.3 12.2-2.6c1.4-.4 2.9-.8 4.2-.2 1.8.9 2.7 4.1 1.8 5.9s-3.4 3.5-5.3 4.4c-6.5 3-12.9 3.6-19.9 2-5.3-1.2-11.3-4.3-13-13.5"
|
||||||
className="st5"
|
className="st5"
|
||||||
/>
|
/>
|
||||||
<path d="M318.4 198.4c-2-.3-4.1.1-5.9 1.3-3.2 2.1-4.7 6.2-4.7 9.9 0 1.9.4 3.8 1.4 5.3 1.2 1.7 3.1 2.9 5.2 3.4 3.4.8 8.2.7 10.5-2.5 1-1.5 1.4-3.3 1.5-5.1.5-5.7-1.8-11.4-8-12.3" />
|
<path
|
||||||
|
d="M318.4 198.4c-2-.3-4.1.1-5.9 1.3-3.2 2.1-4.7 6.2-4.7 9.9 0 1.9.4 3.8 1.4 5.3 1.2 1.7 3.1 2.9 5.2 3.4 3.4.8 8.2.7 10.5-2.5 1-1.5 1.4-3.3 1.5-5.1.5-5.7-1.8-11.4-8-12.3"/>
|
||||||
<path
|
<path
|
||||||
d="M320.4 203.3c.9.3 1.7.8 2.1 1.7.4.8.4 1.7.3 2.5-.1 1-.6 2-1.5 2.7-.7.5-1.7.7-2.6.5s-1.7-.8-2.2-1.6c-1.1-1.6-.9-4.4.9-5.5.9-.4 2-.6 3-.3"
|
d="M320.4 203.3c.9.3 1.7.8 2.1 1.7.4.8.4 1.7.3 2.5-.1 1-.6 2-1.5 2.7-.7.5-1.7.7-2.6.5s-1.7-.8-2.2-1.6c-1.1-1.6-.9-4.4.9-5.5.9-.4 2-.6 3-.3"
|
||||||
style={{
|
style={{
|
||||||
@@ -485,3 +516,48 @@ export function WebhookIcon(props: SVGProps<SVGSVGElement>) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function MSTeamsIcon(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 239" {...props}>
|
||||||
|
<defs>
|
||||||
|
<path id="logosMicrosoftTeams0"
|
||||||
|
d="M136.93 64.476v12.8a32.674 32.674 0 0 1-5.953-.952a38.698 38.698 0 0 1-26.79-22.742h21.848c6.008.022 10.872 4.887 10.895 10.894Z"
|
||||||
|
opacity=".2"/>
|
||||||
|
</defs>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="logosMicrosoftTeams1" x1="17.372%" x2="82.628%" y1="-6.51%" y2="106.51%">
|
||||||
|
<stop offset="0%" stop-color="#5A62C3"/>
|
||||||
|
<stop offset="50%" stop-color="#4D55BD"/>
|
||||||
|
<stop offset="100%" stop-color="#3940AB"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path fill="#5059C9"
|
||||||
|
d="M178.563 89.302h66.125c6.248 0 11.312 5.065 11.312 11.312v60.231c0 22.96-18.613 41.574-41.573 41.574h-.197c-22.96.003-41.576-18.607-41.579-41.568V95.215a5.912 5.912 0 0 1 5.912-5.913Z"/>
|
||||||
|
<circle cx="223.256" cy="50.605" r="26.791" fill="#5059C9"/>
|
||||||
|
<circle cx="139.907" cy="38.698" r="38.698" fill="#7B83EB"/>
|
||||||
|
<path fill="#7B83EB"
|
||||||
|
d="M191.506 89.302H82.355c-6.173.153-11.056 5.276-10.913 11.449v68.697c-.862 37.044 28.445 67.785 65.488 68.692c37.043-.907 66.35-31.648 65.489-68.692v-68.697c.143-6.173-4.74-11.296-10.913-11.449Z"/>
|
||||||
|
<path
|
||||||
|
d="M142.884 89.302v96.268a10.96 10.96 0 0 1-6.787 10.062c-1.3.55-2.697.833-4.108.833H76.68c-.774-1.965-1.488-3.93-2.084-5.953a72.509 72.509 0 0 1-3.155-21.076v-68.703c-.143-6.163 4.732-11.278 10.895-11.43h60.547Z"
|
||||||
|
opacity=".1"/>
|
||||||
|
<path
|
||||||
|
d="M136.93 89.302v102.222c0 1.411-.283 2.808-.833 4.108a10.96 10.96 0 0 1-10.062 6.787H79.48c-1.012-1.965-1.965-3.93-2.798-5.954a59.049 59.049 0 0 1-2.084-5.953a72.508 72.508 0 0 1-3.155-21.076v-68.703c-.143-6.163 4.732-11.278 10.895-11.43h54.593Z"
|
||||||
|
opacity=".2"/>
|
||||||
|
<path
|
||||||
|
d="M136.93 89.302v90.315c-.045 5.998-4.896 10.85-10.895 10.895H74.597a72.508 72.508 0 0 1-3.155-21.076v-68.703c-.143-6.163 4.732-11.278 10.895-11.43h54.593Z"
|
||||||
|
opacity=".2"/>
|
||||||
|
<path
|
||||||
|
d="M130.977 89.302v90.315c-.046 5.998-4.897 10.85-10.895 10.895H74.597a72.508 72.508 0 0 1-3.155-21.076v-68.703c-.143-6.163 4.732-11.278 10.895-11.43h48.64Z"
|
||||||
|
opacity=".2"/>
|
||||||
|
<path
|
||||||
|
d="M142.884 58.523v18.753c-1.012.06-1.965.12-2.977.12c-1.012 0-1.965-.06-2.977-.12a32.674 32.674 0 0 1-5.953-.952a38.698 38.698 0 0 1-26.791-22.742a33.082 33.082 0 0 1-1.905-5.954h29.708c6.007.023 10.872 4.887 10.895 10.895Z"
|
||||||
|
opacity=".1"/>
|
||||||
|
<use href="#logosMicrosoftTeams0" opacity=".2"/>
|
||||||
|
<use href="#logosMicrosoftTeams0" opacity=".2"/>
|
||||||
|
<path d="M130.977 64.476v11.848a38.698 38.698 0 0 1-26.791-22.743h15.896c6.008.023 10.872 4.888 10.895 10.895Z"
|
||||||
|
opacity=".2"/>
|
||||||
|
<path fill="url(#logosMicrosoftTeams1)"
|
||||||
|
d="M10.913 53.581h109.15c6.028 0 10.914 4.886 10.914 10.913v109.151c0 6.027-4.886 10.913-10.913 10.913H10.913C4.886 184.558 0 179.672 0 173.645V64.495C0 58.466 4.886 53.58 10.913 53.58Z"/>
|
||||||
|
<path fill="#FFF" d="M94.208 95.125h-21.82v59.416H58.487V95.125H36.769V83.599h57.439z"/>
|
||||||
|
</svg>)
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ import {
|
|||||||
NotifierTestChannelButton
|
NotifierTestChannelButton
|
||||||
} from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-test-channel-button";
|
} from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-test-channel-button";
|
||||||
import {useEffect} from "react";
|
import {useEffect} from "react";
|
||||||
import {notificationTypes} from "@/components/wrappers/dashboard/admin/notifications/helpers";
|
import {notificationProviders} from "@/components/wrappers/dashboard/admin/notifications/helpers";
|
||||||
import {cn} from "@/lib/utils";
|
import {cn} from "@/lib/utils";
|
||||||
import {Card} from "@/components/ui/card";
|
import {Card} from "@/components/ui/card";
|
||||||
import {ArrowLeft} from "lucide-react";
|
import {ArrowLeft} from "lucide-react";
|
||||||
@@ -93,29 +93,54 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
|
|||||||
});
|
});
|
||||||
|
|
||||||
const provider = form.watch("provider");
|
const provider = form.watch("provider");
|
||||||
const selectedProviderDetails = notificationTypes.find(t => t.value === provider);
|
const selectedProviderDetails = notificationProviders.find(t => t.value === provider);
|
||||||
|
|
||||||
if (isCreate && !provider) {
|
if (isCreate && !provider) {
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 py-4">
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 py-4">
|
||||||
{notificationTypes.map((type) => {
|
{notificationProviders.map((type) => {
|
||||||
const Icon = type.icon;
|
const Icon = type.icon;
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
key={type.value}
|
key={type.value}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex flex-col items-center justify-center gap-3 p-4 cursor-pointer hover:bg-accent/50 hover:border-primary/50 transition-all",
|
"relative flex flex-col items-center justify-center gap-3 p-4 transition-all",
|
||||||
|
type.preview
|
||||||
|
? "cursor-not-allowed bg-gray-200 border-gray-300 opacity-70"
|
||||||
|
: "cursor-pointer hover:bg-accent/50 hover:border-primary/50"
|
||||||
)}
|
)}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
if (type.preview) return;
|
||||||
form.setValue("provider", type.value as any);
|
form.setValue("provider", type.value as any);
|
||||||
form.setValue("config", {});
|
form.setValue("config", {});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="h-10 w-10 bg-secondary rounded-full flex items-center justify-center">
|
{type.preview && (
|
||||||
<Icon className="h-6 w-6 text-foreground"/>
|
<div
|
||||||
|
className="absolute bottom-0 right-0 overflow-hidden w-20 h-20 pointer-events-none">
|
||||||
|
<div
|
||||||
|
className="absolute bottom-0 right-0 w-38 h-6 flex items-center justify-center
|
||||||
|
transform -rotate-45 translate-x-14 -translate-y-4"
|
||||||
|
style={{backgroundColor: "#FE6702"}}
|
||||||
|
>
|
||||||
|
<span className="text-white text-[8px] pr-3 font-medium text-center w-full">coming soon</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="font-medium text-sm">{type.label}</span>
|
</div>
|
||||||
|
)}
|
||||||
|
<div className={cn(
|
||||||
|
"h-10 w-10 rounded-full flex items-center justify-center",
|
||||||
|
type.preview ? "bg-gray-400" : "bg-secondary"
|
||||||
|
)}>
|
||||||
|
<Icon className={cn("h-6 w-6 text-foreground", type.preview && "text-gray-700")}/>
|
||||||
|
</div>
|
||||||
|
<span className={cn(
|
||||||
|
"font-medium text-sm align-middle text-center",
|
||||||
|
type.preview ? "text-gray-500" : "text-foreground"
|
||||||
|
)}>
|
||||||
|
{type.label}
|
||||||
|
</span>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
@@ -132,7 +157,8 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
|
|||||||
>
|
>
|
||||||
<div className="flex items-center gap-3 mb-2 p-3 bg-secondary/30 rounded-lg border border-border">
|
<div className="flex items-center gap-3 mb-2 p-3 bg-secondary/30 rounded-lg border border-border">
|
||||||
{selectedProviderDetails && (
|
{selectedProviderDetails && (
|
||||||
<div className="h-10 w-10 bg-background rounded-full flex items-center justify-center border border-border shadow-sm">
|
<div
|
||||||
|
className="h-10 w-10 bg-background rounded-full flex items-center justify-center border border-border shadow-sm">
|
||||||
<selectedProviderDetails.icon className="h-5 w-5"/>
|
<selectedProviderDetails.icon className="h-5 w-5"/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -163,7 +189,8 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
|
|||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Channel Name</FormLabel>
|
<FormLabel>Channel Name</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`} value={field.value ?? ""}/>
|
<Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`}
|
||||||
|
value={field.value ?? ""}/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage/>
|
<FormMessage/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|||||||
Reference in New Issue
Block a user