diff --git a/dashboard/src/components/copy-button/index.tsx b/dashboard/src/components/copy-button/index.tsx index 0f11897..9b75626 100644 --- a/dashboard/src/components/copy-button/index.tsx +++ b/dashboard/src/components/copy-button/index.tsx @@ -1,4 +1,4 @@ -import { Button } from '@marzneshin/components'; +import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@marzneshin/components'; import CopyToClipboard from 'react-copy-to-clipboard'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -11,9 +11,10 @@ interface CopyToClipboardButtonProps { disabled?: boolean; successMessage: string; copyIcon?: LucideIcon; - copyLabel: string; - errorLabel: string; + copyLabel?: string; + errorLabel?: string; className?: string; + tooltipMsg?: string; } export const CopyToClipboardButton: React.FC = ({ @@ -22,7 +23,8 @@ export const CopyToClipboardButton: React.FC = ({ successMessage, copyIcon, copyLabel, - errorLabel, className + errorLabel, className, + tooltipMsg }) => { const { t } = useTranslation(); const [copied, setCopied] = useState(false); @@ -47,14 +49,26 @@ export const CopyToClipboardButton: React.FC = ({ } }; + const tooltip = tooltipMsg ? tooltipMsg : (copyLabel ? copyLabel : undefined) + const Icon = copied ? CopyCheck : (healthy ? (copyIcon ? copyIcon : ClipboardCopy) : CopyX) + const isWithLabel = successMessage && copyLabel && errorLabel return ( - - - + + + + + + + {tooltip && + + {tooltip} + + } + ); }; diff --git a/dashboard/src/features/users/dialogs/settings/user-info/qrcode.tsx b/dashboard/src/features/users/dialogs/settings/user-info/qrcode.tsx index 4ac0416..058f814 100644 --- a/dashboard/src/features/users/dialogs/settings/user-info/qrcode.tsx +++ b/dashboard/src/features/users/dialogs/settings/user-info/qrcode.tsx @@ -6,6 +6,7 @@ import { FC } from 'react' import { Card, CardContent, CardHeader, CardTitle } from '@marzneshin/components'; import { useTranslation } from 'react-i18next'; import { SubscriptionLinkButton } from './subcription-link-button'; +import { getSubscriptionLink } from '@marzneshin/utils'; interface QRCodeProps { entity: UserType @@ -14,9 +15,7 @@ interface QRCodeProps { export const QRCodeSection: FC = ( { entity } ) => { - const subscribeQrLink = String(entity.subscription_url).startsWith('/') - ? window.location.origin + entity.subscription_url - : String(entity.subscription_url); + const subscribeQrLink = getSubscriptionLink(entity.subscription_url); const { t } = useTranslation() return ( diff --git a/dashboard/src/features/users/dialogs/settings/user-info/subcription-link-button.tsx b/dashboard/src/features/users/dialogs/settings/user-info/subcription-link-button.tsx index 8f5a077..004369f 100644 --- a/dashboard/src/features/users/dialogs/settings/user-info/subcription-link-button.tsx +++ b/dashboard/src/features/users/dialogs/settings/user-info/subcription-link-button.tsx @@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next'; import { CopyToClipboardButton } from '@marzneshin/components'; import { FC } from 'react'; import { SquareCode } from 'lucide-react'; +import { getSubscriptionLink } from '@marzneshin/utils'; interface SubscriptionLinkButtonProps { subscriptionLink: string; @@ -12,7 +13,7 @@ export const SubscriptionLinkButton: FC = ({ subscr return ( void; @@ -46,6 +48,15 @@ export const columns = (actions: ColumnAction): ColumnDef[] => ([ }, { id: "actions", - cell: ({ row }) => + cell: ({ row }) =>
e.stopPropagation()}> + + +
}, ]); diff --git a/dashboard/src/routes/_dashboard.tsx b/dashboard/src/routes/_dashboard.tsx index dc569c2..e483770 100644 --- a/dashboard/src/routes/_dashboard.tsx +++ b/dashboard/src/routes/_dashboard.tsx @@ -5,7 +5,8 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup, - Toaster + Toaster, + TooltipProvider } from '@marzneshin/components' import { NavigationDirectory } from '@marzneshin/components/nav-dir'; import { useAuth } from '@marzneshin/features/auth' @@ -49,10 +50,12 @@ export const DashboardLayout = () => { -
- - -
+ +
+ + +
+
) : ( diff --git a/dashboard/src/utils/index.ts b/dashboard/src/utils/index.ts index d3ce67c..6fca071 100644 --- a/dashboard/src/utils/index.ts +++ b/dashboard/src/utils/index.ts @@ -2,3 +2,4 @@ export * from './cn' export * from './fetch' export * from './cn' export * from './query-client' +export * from './subscription-link' diff --git a/dashboard/src/utils/subscription-link.ts b/dashboard/src/utils/subscription-link.ts new file mode 100644 index 0000000..70c6b86 --- /dev/null +++ b/dashboard/src/utils/subscription-link.ts @@ -0,0 +1,4 @@ + +export const getSubscriptionLink = (url: string) => String(url).startsWith('/') + ? window.location.origin + url + : String(url);