@greatapps/common 1.1.255 → 1.1.257
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/account/AccountModals.mjs.map +1 -1
- package/dist/components/account/ConfigurationsMyAccountModal.mjs +1 -1
- package/dist/components/account/ConfigurationsMyAccountModal.mjs.map +1 -1
- package/dist/components/account/ConfirmDeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/ConfirmGlobalPreferencesModal.mjs.map +1 -1
- package/dist/components/account/DeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/DisableTwoFactorAuthModal.mjs.map +1 -1
- package/dist/components/account/IsntPossibleDeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/TwoFactorAuthModal.mjs.map +1 -1
- package/dist/components/account/hooks/useChangePhoneForm.mjs.map +1 -1
- package/dist/components/account/hooks/useTwoFactorAuthForm.mjs.map +1 -1
- package/dist/components/account/sections/ChangeEmailModal.mjs.map +1 -1
- package/dist/components/account/sections/ChangePasswordSection.mjs.map +1 -1
- package/dist/components/account/sections/ChangePhoneModal.mjs.map +1 -1
- package/dist/components/account/sections/MyProfileSection.mjs.map +1 -1
- package/dist/components/account/sections/PreferencesSection.mjs.map +1 -1
- package/dist/components/account/sections/SecuritySection.mjs.map +1 -1
- package/dist/components/embeds/CrispEmbed.mjs.map +1 -1
- package/dist/components/embeds/FrillEmbed.mjs.map +1 -1
- package/dist/components/handlers/SearchParamsHandler.mjs.map +1 -1
- package/dist/components/layouts/AppMobileNavBar.mjs +3 -2
- package/dist/components/layouts/AppMobileNavBar.mjs.map +1 -1
- package/dist/components/layouts/AppNavBar.mjs.map +1 -1
- package/dist/components/layouts/MdSideBarNavigation.mjs.map +1 -1
- package/dist/components/layouts/NavBar.mjs.map +1 -1
- package/dist/components/layouts/NotificationsPopover.mjs.map +1 -1
- package/dist/components/layouts/ProfilePopover.mjs.map +1 -1
- package/dist/components/layouts/UsersSelectorPopover.mjs.map +1 -1
- package/dist/components/modals/BuyCreditsModal.mjs.map +1 -1
- package/dist/components/modals/ModalManager.mjs.map +1 -1
- package/dist/components/modals/Modals.mjs.map +1 -1
- package/dist/components/navigation/AppNavigation.mjs +2 -1
- package/dist/components/navigation/AppNavigation.mjs.map +1 -1
- package/dist/components/navigation/CancelledSubscriptionBanner.mjs.map +1 -1
- package/dist/components/navigation/NavItemsContext.mjs.map +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/shells/TabsMobileShell.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/dist/components/pages/notifications/Notifications.mjs.map +1 -1
- package/dist/components/ui/buttons/Button.mjs.map +1 -1
- package/dist/components/ui/buttons/CancelButton.mjs.map +1 -1
- package/dist/components/ui/buttons/CopyButton.mjs.map +1 -1
- package/dist/components/ui/data-display/Accordion.mjs.map +1 -1
- package/dist/components/ui/data-display/Badge.mjs.map +1 -1
- package/dist/components/ui/data-display/Card.mjs.map +1 -1
- package/dist/components/ui/data-display/CardBrandIcons.mjs.map +1 -1
- package/dist/components/ui/data-display/CardItem.mjs.map +1 -1
- package/dist/components/ui/data-display/Pagination.mjs.map +1 -1
- package/dist/components/ui/data-display/PaymentInfoCard.mjs.map +1 -1
- package/dist/components/ui/data-display/ScrollArea.mjs.map +1 -1
- package/dist/components/ui/data-display/Separator.mjs.map +1 -1
- package/dist/components/ui/data-display/Table.mjs.map +1 -1
- package/dist/components/ui/data-display/Tabs.mjs.map +1 -1
- package/dist/components/ui/feedback/CircularProgress.mjs.map +1 -1
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs.map +1 -1
- package/dist/components/ui/feedback/LoadingOverlay.mjs.map +1 -1
- package/dist/components/ui/feedback/Progress.mjs.map +1 -1
- package/dist/components/ui/feedback/Skeleton.mjs.map +1 -1
- package/dist/components/ui/feedback/Toast.mjs.map +1 -1
- package/dist/components/ui/form/Calendar.mjs.map +1 -1
- package/dist/components/ui/form/Checkbox.mjs.map +1 -1
- package/dist/components/ui/form/ComboboxField.mjs.map +1 -1
- package/dist/components/ui/form/DatePicker.mjs.map +1 -1
- package/dist/components/ui/form/DateRangePicker.mjs.map +1 -1
- package/dist/components/ui/form/FormField.mjs.map +1 -1
- package/dist/components/ui/form/Input.mjs.map +1 -1
- package/dist/components/ui/form/InputOtp.mjs.map +1 -1
- package/dist/components/ui/form/PhoneInput.mjs.map +1 -1
- package/dist/components/ui/form/RadioGroup.mjs.map +1 -1
- package/dist/components/ui/form/Select.mjs +1 -1
- package/dist/components/ui/form/Select.mjs.map +1 -1
- package/dist/components/ui/form/Switch.mjs.map +1 -1
- package/dist/components/ui/form/Textarea.mjs.map +1 -1
- package/dist/components/ui/overlay/Command.mjs.map +1 -1
- package/dist/components/ui/overlay/Dialog.mjs.map +1 -1
- package/dist/components/ui/overlay/Popover.mjs.map +1 -1
- package/dist/components/ui/overlay/Sheet.mjs.map +1 -1
- package/dist/components/ui/overlay/Tooltip.mjs.map +1 -1
- package/dist/components/widgets/notifications/NotificationCard.mjs.map +1 -1
- package/dist/hooks/copy-to-clipboard.hook.mjs.map +1 -1
- package/dist/hooks/useDebounce.mjs.map +1 -1
- package/dist/hooks/useDebounceState.mjs.map +1 -1
- package/dist/hooks/useDebouncedEffect.mjs.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/infra/utils/clsx.mjs.map +1 -1
- package/dist/infra/utils/parser.mjs.map +1 -1
- package/dist/infra/utils/percentage.mjs.map +1 -1
- package/dist/middleware.mjs.map +1 -1
- package/dist/modules/accounts/actions/account-management.action.mjs.map +1 -1
- package/dist/modules/accounts/actions/find-current-account.action.mjs.map +1 -1
- package/dist/modules/accounts/actions/list-currencies.action.mjs.map +1 -1
- package/dist/modules/accounts/actions/list-timezones.action.mjs.map +1 -1
- package/dist/modules/accounts/hooks/current-account.hook.mjs.map +1 -1
- package/dist/modules/accounts/hooks/useAccountManagement.mjs.map +1 -1
- package/dist/modules/accounts/hooks/useCurrencies.mjs.map +1 -1
- package/dist/modules/accounts/hooks/useTimezones.mjs.map +1 -1
- package/dist/modules/accounts/services/account.service.mjs.map +1 -1
- package/dist/modules/auth/actions/validate-session.action.mjs.map +1 -1
- package/dist/modules/auth/hooks/login.hook.mjs.map +1 -1
- package/dist/modules/auth/hooks/logout.hook.mjs.map +1 -1
- package/dist/modules/auth/hooks/register.hook.mjs.map +1 -1
- package/dist/modules/cards/actions/list-cards.action.mjs.map +1 -1
- package/dist/modules/cards/hooks/cards.hook.mjs.map +1 -1
- package/dist/modules/cards/services/cards.service.mjs.map +1 -1
- package/dist/modules/cards/types.mjs.map +1 -1
- package/dist/modules/ia-credits/actions/list-ia-credits.action.mjs.map +1 -1
- package/dist/modules/plans/actions/find-plan-by-id.action.mjs.map +1 -1
- package/dist/modules/plans/hooks/use-has-plan-addon.hook.mjs.map +1 -1
- package/dist/modules/plans/hooks/use-plan-by-id.hook.mjs.map +1 -1
- package/dist/modules/plans/services/plans.service.mjs.map +1 -1
- package/dist/modules/plans/types/plan.type.mjs.map +1 -1
- package/dist/modules/projects/actions/add-project-user.action.mjs.map +1 -1
- package/dist/modules/projects/actions/list-all-account-users.action.mjs.map +1 -1
- package/dist/modules/projects/actions/list-available-users.action.mjs.map +1 -1
- package/dist/modules/projects/actions/list-project-users.action.mjs.map +1 -1
- package/dist/modules/projects/actions/remove-project-user.action.mjs.map +1 -1
- package/dist/modules/projects/hooks/add-project-user.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/list-all-account-users.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/list-available-users.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/list-project-users.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/remove-project-user.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/actions/calculate-subscription.action.mjs.map +1 -1
- package/dist/modules/subscriptions/actions/list-subscriptions.action.mjs.map +1 -1
- package/dist/modules/subscriptions/actions/update-subscription-plan.action.mjs.map +1 -1
- package/dist/modules/subscriptions/constants/query-keys.constants.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/calculate-subscription.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/find-active-subscription.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/list-subscriptions.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/update-subscription-plan.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/types/calculate-subscription.type.mjs.map +1 -1
- package/dist/modules/subscriptions/utils/build-plan-extras.mjs.map +1 -1
- package/dist/modules/subscriptions/utils/periodicity.mjs.map +1 -1
- package/dist/modules/subscriptions/utils/resolve-plan-extras-prices.mjs.map +1 -1
- package/dist/modules/users/action/find-user-by-id.action.mjs.map +1 -1
- package/dist/modules/users/action/list-messages.action.mjs.map +1 -1
- package/dist/modules/users/action/mark-all-messages-as-read.action.mjs.map +1 -1
- package/dist/modules/users/action/mark-message-as-read.action.mjs.map +1 -1
- package/dist/modules/users/hooks/messages.hook.mjs.map +1 -1
- package/dist/modules/users/services/messages.service.mjs.map +1 -1
- package/dist/modules/whitelabel/actions/find-whitelabel-styles.action.mjs.map +1 -1
- package/dist/modules/whitelabel/actions/find-whitelabel.action.mjs.map +1 -1
- package/dist/modules/whitelabel/actions/revalidate-whitelabel-styles.action.mjs.map +1 -1
- package/dist/modules/whitelabel/actions/revalidate-whitelabel.action.mjs.map +1 -1
- package/dist/modules/whitelabel/services/whitelabel-styles.service.mjs.map +1 -1
- package/dist/providers/whitelabel.provider.mjs.map +1 -1
- package/dist/store/useAccountModals.mjs.map +1 -1
- package/dist/store/useBuyCreditsModal.mjs.map +1 -1
- package/dist/store/useModalManager.mjs.map +1 -1
- package/dist/utils/countries.mjs.map +1 -1
- package/dist/utils/safeServerAction.mjs.map +1 -1
- package/dist/utils/withAction.mjs.map +1 -1
- package/package.json +89 -89
- package/src/components/account/AccountModals.tsx +17 -17
- package/src/components/account/ConfigurationsMyAccountModal.tsx +150 -150
- package/src/components/account/ConfirmDeleteAccountModal.tsx +55 -55
- package/src/components/account/ConfirmGlobalPreferencesModal.tsx +66 -66
- package/src/components/account/DeleteAccountModal.tsx +130 -130
- package/src/components/account/DisableTwoFactorAuthModal.tsx +86 -86
- package/src/components/account/IsntPossibleDeleteAccountModal.tsx +49 -49
- package/src/components/account/TwoFactorAuthModal.tsx +223 -223
- package/src/components/account/hooks/useChangePhoneForm.tsx +81 -81
- package/src/components/account/hooks/useTwoFactorAuthForm.tsx +101 -101
- package/src/components/account/sections/ChangeEmailModal.tsx +225 -225
- package/src/components/account/sections/ChangePasswordSection.tsx +64 -64
- package/src/components/account/sections/ChangePhoneModal.tsx +231 -231
- package/src/components/account/sections/MyProfileSection.tsx +327 -327
- package/src/components/account/sections/PreferencesSection.tsx +273 -273
- package/src/components/account/sections/SecuritySection.tsx +160 -160
- package/src/components/embeds/CrispEmbed.tsx +101 -101
- package/src/components/embeds/FrillEmbed.tsx +119 -119
- package/src/components/handlers/SearchParamsHandler.tsx +61 -61
- package/src/components/layouts/AppMobileNavBar.tsx +118 -114
- package/src/components/layouts/AppNavBar.tsx +51 -51
- package/src/components/layouts/MdSideBarNavigation.tsx +56 -56
- package/src/components/layouts/NavBar.tsx +120 -120
- package/src/components/layouts/NotificationsPopover.tsx +115 -115
- package/src/components/layouts/ProfilePopover.tsx +164 -164
- package/src/components/layouts/UsersSelectorPopover.tsx +238 -238
- package/src/components/modals/BuyCreditsModal.tsx +301 -301
- package/src/components/modals/ModalManager.tsx +29 -29
- package/src/components/modals/Modals.tsx +26 -26
- package/src/components/navigation/AppNavigation.tsx +2 -3
- package/src/components/navigation/CancelledSubscriptionBanner.tsx +69 -69
- package/src/components/navigation/NavItemsContext.ts +20 -20
- package/src/components/navigation/ProjectSelectorPopover.tsx +157 -157
- package/src/components/navigation/shells/TabsMobileShell.tsx +72 -72
- package/src/components/navigation/subcomponents/ProjectSelector.tsx +156 -156
- package/src/components/pages/notifications/Notifications.tsx +160 -160
- package/src/components/ui/buttons/Button.tsx +57 -57
- package/src/components/ui/buttons/CancelButton.tsx +14 -14
- package/src/components/ui/buttons/CopyButton.tsx +54 -54
- package/src/components/ui/data-display/Accordion.tsx +81 -81
- package/src/components/ui/data-display/Badge.tsx +47 -47
- package/src/components/ui/data-display/Card.tsx +93 -93
- package/src/components/ui/data-display/CardBrandIcons.tsx +336 -336
- package/src/components/ui/data-display/CardItem.tsx +75 -75
- package/src/components/ui/data-display/Pagination.tsx +126 -126
- package/src/components/ui/data-display/PaymentInfoCard.tsx +186 -186
- package/src/components/ui/data-display/ScrollArea.tsx +59 -59
- package/src/components/ui/data-display/Separator.tsx +29 -29
- package/src/components/ui/data-display/Table.tsx +117 -117
- package/src/components/ui/data-display/Tabs.tsx +67 -67
- package/src/components/ui/feedback/CircularProgress.tsx +75 -75
- package/src/components/ui/feedback/DefaultCircularProgress.tsx +61 -61
- package/src/components/ui/feedback/LoadingOverlay.tsx +31 -31
- package/src/components/ui/feedback/Progress.tsx +40 -40
- package/src/components/ui/feedback/Skeleton.tsx +5 -5
- package/src/components/ui/feedback/Toast.tsx +101 -101
- package/src/components/ui/form/Calendar.tsx +228 -228
- package/src/components/ui/form/Checkbox.tsx +31 -31
- package/src/components/ui/form/ComboboxField.tsx +154 -154
- package/src/components/ui/form/DatePicker.tsx +97 -97
- package/src/components/ui/form/DateRangePicker.tsx +108 -108
- package/src/components/ui/form/FormField.tsx +131 -131
- package/src/components/ui/form/Input.tsx +20 -20
- package/src/components/ui/form/InputOtp.tsx +80 -80
- package/src/components/ui/form/PhoneInput.tsx +205 -205
- package/src/components/ui/form/RadioGroup.tsx +45 -45
- package/src/components/ui/form/Select.tsx +200 -200
- package/src/components/ui/form/Switch.tsx +32 -32
- package/src/components/ui/form/Textarea.tsx +19 -19
- package/src/components/ui/overlay/Command.tsx +185 -185
- package/src/components/ui/overlay/Dialog.tsx +151 -151
- package/src/components/ui/overlay/Popover.tsx +49 -49
- package/src/components/ui/overlay/Sheet.tsx +166 -166
- package/src/components/ui/overlay/Tooltip.tsx +62 -62
- package/src/components/widgets/notifications/NotificationCard.tsx +68 -68
- package/src/hooks/copy-to-clipboard.hook.tsx +67 -67
- package/src/hooks/useDebounce.ts +26 -26
- package/src/hooks/useDebounceState.ts +11 -11
- package/src/hooks/useDebouncedEffect.ts +69 -69
- package/src/index.ts +376 -376
- package/src/infra/utils/clsx.ts +6 -6
- package/src/infra/utils/parser.ts +52 -52
- package/src/infra/utils/percentage.ts +42 -42
- package/src/middleware.ts +4 -4
- package/src/modules/accounts/actions/account-management.action.ts +91 -91
- package/src/modules/accounts/actions/find-current-account.action.ts +9 -9
- package/src/modules/accounts/actions/list-currencies.action.ts +8 -8
- package/src/modules/accounts/actions/list-timezones.action.ts +8 -8
- package/src/modules/accounts/hooks/current-account.hook.tsx +22 -22
- package/src/modules/accounts/hooks/useAccountManagement.ts +85 -85
- package/src/modules/accounts/hooks/useCurrencies.ts +15 -15
- package/src/modules/accounts/hooks/useTimezones.ts +15 -15
- package/src/modules/accounts/services/account.service.ts +236 -236
- package/src/modules/accounts/types.ts +214 -214
- package/src/modules/auth/actions/validate-session.action.ts +56 -56
- package/src/modules/auth/hooks/login.hook.tsx +13 -13
- package/src/modules/auth/hooks/logout.hook.tsx +11 -11
- package/src/modules/auth/hooks/register.hook.tsx +11 -11
- package/src/modules/cards/actions/list-cards.action.ts +8 -8
- package/src/modules/cards/hooks/cards.hook.ts +14 -14
- package/src/modules/cards/services/cards.service.ts +32 -32
- package/src/modules/cards/types.ts +32 -32
- package/src/modules/ia-credits/actions/list-ia-credits.action.ts +8 -8
- package/src/modules/plans/actions/find-plan-by-id.action.ts +8 -8
- package/src/modules/plans/hooks/use-has-plan-addon.hook.ts +17 -17
- package/src/modules/plans/hooks/use-plan-by-id.hook.ts +13 -13
- package/src/modules/plans/services/plans.service.ts +36 -36
- package/src/modules/plans/types/plan.type.ts +21 -21
- package/src/modules/projects/actions/add-project-user.action.ts +9 -9
- package/src/modules/projects/actions/list-all-account-users.action.ts +9 -9
- package/src/modules/projects/actions/list-available-users.action.ts +9 -9
- package/src/modules/projects/actions/list-project-users.action.ts +9 -9
- package/src/modules/projects/actions/remove-project-user.action.ts +9 -9
- package/src/modules/projects/hooks/add-project-user.hook.ts +69 -69
- package/src/modules/projects/hooks/list-all-account-users.hook.ts +34 -34
- package/src/modules/projects/hooks/list-available-users.hook.ts +33 -33
- package/src/modules/projects/hooks/list-project-users.hook.ts +33 -33
- package/src/modules/projects/hooks/remove-project-user.hook.ts +69 -69
- package/src/modules/subscriptions/actions/calculate-subscription.action.ts +9 -9
- package/src/modules/subscriptions/actions/list-subscriptions.action.ts +9 -9
- package/src/modules/subscriptions/actions/update-subscription-plan.action.ts +26 -26
- package/src/modules/subscriptions/constants/query-keys.constants.ts +1 -1
- package/src/modules/subscriptions/hooks/calculate-subscription.hook.ts +13 -13
- package/src/modules/subscriptions/hooks/find-active-subscription.hook.ts +19 -19
- package/src/modules/subscriptions/hooks/list-subscriptions.hook.ts +16 -16
- package/src/modules/subscriptions/hooks/update-subscription-plan.hook.ts +25 -25
- package/src/modules/subscriptions/types/billing-period.type.ts +1 -1
- package/src/modules/subscriptions/types/calculate-subscription.type.ts +75 -75
- package/src/modules/subscriptions/utils/build-plan-extras.ts +56 -56
- package/src/modules/subscriptions/utils/periodicity.ts +52 -52
- package/src/modules/subscriptions/utils/resolve-plan-extras-prices.ts +23 -23
- package/src/modules/users/action/find-user-by-id.action.ts +8 -8
- package/src/modules/users/action/list-messages.action.ts +12 -12
- package/src/modules/users/action/mark-all-messages-as-read.action.ts +8 -8
- package/src/modules/users/action/mark-message-as-read.action.ts +8 -8
- package/src/modules/users/hooks/messages.hook.ts +60 -60
- package/src/modules/users/services/messages.service.ts +48 -48
- package/src/modules/whitelabel/actions/find-whitelabel-styles.action.ts +14 -14
- package/src/modules/whitelabel/actions/find-whitelabel.action.ts +23 -23
- package/src/modules/whitelabel/actions/revalidate-whitelabel-styles.action.ts +10 -10
- package/src/modules/whitelabel/actions/revalidate-whitelabel.action.ts +19 -19
- package/src/modules/whitelabel/schema.ts +83 -81
- package/src/modules/whitelabel/services/whitelabel-styles.service.ts +129 -129
- package/src/modules/whitelabel/styles-schema.ts +37 -37
- package/src/providers/whitelabel.provider.tsx +54 -54
- package/src/store/useAccountModals.ts +55 -55
- package/src/store/useBuyCreditsModal.ts +25 -25
- package/src/store/useModalManager.ts +104 -104
- package/src/utils/countries.ts +224 -224
- package/src/utils/safeServerAction.ts +21 -21
- package/src/utils/withAction.ts +13 -13
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
import { IconClock } from '@tabler/icons-react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
import { cn } from '../../../infra/utils/clsx';
|
|
4
|
-
|
|
5
|
-
type NotificationCardProps = {
|
|
6
|
-
icon: ReactNode;
|
|
7
|
-
iconBgColor?: string;
|
|
8
|
-
title: string;
|
|
9
|
-
description?: string;
|
|
10
|
-
time: string;
|
|
11
|
-
actions?: ReactNode;
|
|
12
|
-
isUnread?: boolean;
|
|
13
|
-
showBorder?: boolean;
|
|
14
|
-
className?: string;
|
|
15
|
-
gapPx: number;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export default function NotificationCard({
|
|
19
|
-
icon,
|
|
20
|
-
iconBgColor,
|
|
21
|
-
title,
|
|
22
|
-
description,
|
|
23
|
-
time,
|
|
24
|
-
actions,
|
|
25
|
-
isUnread = false,
|
|
26
|
-
showBorder = true,
|
|
27
|
-
className,
|
|
28
|
-
gapPx = 16
|
|
29
|
-
}: NotificationCardProps) {
|
|
30
|
-
return (
|
|
31
|
-
<div
|
|
32
|
-
className={cn(
|
|
33
|
-
'flex flex-col lg:flex-row items-start p-4 lg:p-5 gap-3 lg:gap-4 relative',
|
|
34
|
-
showBorder && 'border-b border-gray-200',
|
|
35
|
-
className
|
|
36
|
-
)}
|
|
37
|
-
>
|
|
38
|
-
<div
|
|
39
|
-
className={cn(
|
|
40
|
-
'flex items-center justify-center size-10 rounded-full shrink-0',
|
|
41
|
-
iconBgColor
|
|
42
|
-
)}
|
|
43
|
-
>
|
|
44
|
-
{icon}
|
|
45
|
-
</div>
|
|
46
|
-
|
|
47
|
-
<div className="flex flex-col flex-1" style={{ gap: `${gapPx}px` }}>
|
|
48
|
-
<div className="flex flex-col gap-1">
|
|
49
|
-
<span className="paragraph-small-semibold text-gray-950">{title}</span>
|
|
50
|
-
{description && (
|
|
51
|
-
<span className="paragraph-small-regular text-gray-600">{description}</span>
|
|
52
|
-
)}
|
|
53
|
-
</div>
|
|
54
|
-
|
|
55
|
-
<div className="flex items-center gap-1.5">
|
|
56
|
-
<IconClock size={14} className="text-gray-400" />
|
|
57
|
-
<span className="paragraph-xsmall-medium text-gray-600">{time}</span>
|
|
58
|
-
</div>
|
|
59
|
-
|
|
60
|
-
{actions && <div className="flex items-center gap-2">{actions}</div>}
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
{isUnread && <div className="size-2 bg-pages-400 rounded-full shrink-0 mt-1" />}
|
|
64
|
-
</div>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export type { NotificationCardProps };
|
|
1
|
+
import { IconClock } from '@tabler/icons-react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { cn } from '../../../infra/utils/clsx';
|
|
4
|
+
|
|
5
|
+
type NotificationCardProps = {
|
|
6
|
+
icon: ReactNode;
|
|
7
|
+
iconBgColor?: string;
|
|
8
|
+
title: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
time: string;
|
|
11
|
+
actions?: ReactNode;
|
|
12
|
+
isUnread?: boolean;
|
|
13
|
+
showBorder?: boolean;
|
|
14
|
+
className?: string;
|
|
15
|
+
gapPx: number;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export default function NotificationCard({
|
|
19
|
+
icon,
|
|
20
|
+
iconBgColor,
|
|
21
|
+
title,
|
|
22
|
+
description,
|
|
23
|
+
time,
|
|
24
|
+
actions,
|
|
25
|
+
isUnread = false,
|
|
26
|
+
showBorder = true,
|
|
27
|
+
className,
|
|
28
|
+
gapPx = 16
|
|
29
|
+
}: NotificationCardProps) {
|
|
30
|
+
return (
|
|
31
|
+
<div
|
|
32
|
+
className={cn(
|
|
33
|
+
'flex flex-col lg:flex-row items-start p-4 lg:p-5 gap-3 lg:gap-4 relative',
|
|
34
|
+
showBorder && 'border-b border-gray-200',
|
|
35
|
+
className
|
|
36
|
+
)}
|
|
37
|
+
>
|
|
38
|
+
<div
|
|
39
|
+
className={cn(
|
|
40
|
+
'flex items-center justify-center size-10 rounded-full shrink-0',
|
|
41
|
+
iconBgColor
|
|
42
|
+
)}
|
|
43
|
+
>
|
|
44
|
+
{icon}
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div className="flex flex-col flex-1" style={{ gap: `${gapPx}px` }}>
|
|
48
|
+
<div className="flex flex-col gap-1">
|
|
49
|
+
<span className="paragraph-small-semibold text-gray-950">{title}</span>
|
|
50
|
+
{description && (
|
|
51
|
+
<span className="paragraph-small-regular text-gray-600">{description}</span>
|
|
52
|
+
)}
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div className="flex items-center gap-1.5">
|
|
56
|
+
<IconClock size={14} className="text-gray-400" />
|
|
57
|
+
<span className="paragraph-xsmall-medium text-gray-600">{time}</span>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
{actions && <div className="flex items-center gap-2">{actions}</div>}
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
{isUnread && <div className="size-2 bg-pages-400 rounded-full shrink-0 mt-1" />}
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export type { NotificationCardProps };
|
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { useState, useCallback, useRef, useEffect } from "react";
|
|
4
|
-
|
|
5
|
-
interface UseCopyToClipboardOptions {
|
|
6
|
-
feedbackDuration?: number;
|
|
7
|
-
onSuccess?: () => void;
|
|
8
|
-
onError?: (error: Error) => void;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
interface UseCopyToClipboardReturn {
|
|
12
|
-
isCopied: boolean;
|
|
13
|
-
copy: (text: string) => Promise<void>;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export default function useCopyToClipboard({
|
|
17
|
-
feedbackDuration = 2000,
|
|
18
|
-
onSuccess,
|
|
19
|
-
onError,
|
|
20
|
-
}: UseCopyToClipboardOptions = {}): UseCopyToClipboardReturn {
|
|
21
|
-
const [isCopied, setIsCopied] = useState(false);
|
|
22
|
-
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
23
|
-
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
return () => {
|
|
26
|
-
if (timeoutRef.current) {
|
|
27
|
-
clearTimeout(timeoutRef.current);
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
}, []);
|
|
31
|
-
|
|
32
|
-
const copy = useCallback(
|
|
33
|
-
async (text: string) => {
|
|
34
|
-
if (timeoutRef.current) {
|
|
35
|
-
clearTimeout(timeoutRef.current);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
try {
|
|
39
|
-
if (navigator.clipboard?.writeText) {
|
|
40
|
-
await navigator.clipboard.writeText(text);
|
|
41
|
-
} else {
|
|
42
|
-
const textarea = document.createElement("textarea");
|
|
43
|
-
textarea.value = text;
|
|
44
|
-
textarea.style.cssText = "position:fixed;top:-9999px;left:-9999px;opacity:0";
|
|
45
|
-
document.body.appendChild(textarea);
|
|
46
|
-
textarea.focus();
|
|
47
|
-
textarea.select();
|
|
48
|
-
const success = document.execCommand("copy");
|
|
49
|
-
document.body.removeChild(textarea);
|
|
50
|
-
if (!success) throw new Error("execCommand copy failed");
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
setIsCopied(true);
|
|
54
|
-
onSuccess?.();
|
|
55
|
-
|
|
56
|
-
timeoutRef.current = setTimeout(() => {
|
|
57
|
-
setIsCopied(false);
|
|
58
|
-
}, feedbackDuration);
|
|
59
|
-
} catch (error) {
|
|
60
|
-
onError?.(error instanceof Error ? error : new Error("Failed to copy"));
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
[feedbackDuration, onSuccess, onError],
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
return { isCopied, copy };
|
|
67
|
-
}
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useState, useCallback, useRef, useEffect } from "react";
|
|
4
|
+
|
|
5
|
+
interface UseCopyToClipboardOptions {
|
|
6
|
+
feedbackDuration?: number;
|
|
7
|
+
onSuccess?: () => void;
|
|
8
|
+
onError?: (error: Error) => void;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface UseCopyToClipboardReturn {
|
|
12
|
+
isCopied: boolean;
|
|
13
|
+
copy: (text: string) => Promise<void>;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default function useCopyToClipboard({
|
|
17
|
+
feedbackDuration = 2000,
|
|
18
|
+
onSuccess,
|
|
19
|
+
onError,
|
|
20
|
+
}: UseCopyToClipboardOptions = {}): UseCopyToClipboardReturn {
|
|
21
|
+
const [isCopied, setIsCopied] = useState(false);
|
|
22
|
+
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
23
|
+
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
return () => {
|
|
26
|
+
if (timeoutRef.current) {
|
|
27
|
+
clearTimeout(timeoutRef.current);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}, []);
|
|
31
|
+
|
|
32
|
+
const copy = useCallback(
|
|
33
|
+
async (text: string) => {
|
|
34
|
+
if (timeoutRef.current) {
|
|
35
|
+
clearTimeout(timeoutRef.current);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
try {
|
|
39
|
+
if (navigator.clipboard?.writeText) {
|
|
40
|
+
await navigator.clipboard.writeText(text);
|
|
41
|
+
} else {
|
|
42
|
+
const textarea = document.createElement("textarea");
|
|
43
|
+
textarea.value = text;
|
|
44
|
+
textarea.style.cssText = "position:fixed;top:-9999px;left:-9999px;opacity:0";
|
|
45
|
+
document.body.appendChild(textarea);
|
|
46
|
+
textarea.focus();
|
|
47
|
+
textarea.select();
|
|
48
|
+
const success = document.execCommand("copy");
|
|
49
|
+
document.body.removeChild(textarea);
|
|
50
|
+
if (!success) throw new Error("execCommand copy failed");
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
setIsCopied(true);
|
|
54
|
+
onSuccess?.();
|
|
55
|
+
|
|
56
|
+
timeoutRef.current = setTimeout(() => {
|
|
57
|
+
setIsCopied(false);
|
|
58
|
+
}, feedbackDuration);
|
|
59
|
+
} catch (error) {
|
|
60
|
+
onError?.(error instanceof Error ? error : new Error("Failed to copy"));
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
[feedbackDuration, onSuccess, onError],
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
return { isCopied, copy };
|
|
67
|
+
}
|
package/src/hooks/useDebounce.ts
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { useEffect, useState } from 'react';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Hook para aplicar debounce em valores
|
|
7
|
-
* @param value - Valor a ser debounced
|
|
8
|
-
* @param delay - Delay em milissegundos (padrão: 400ms)
|
|
9
|
-
* @returns Valor debounced
|
|
10
|
-
*/
|
|
11
|
-
export function useDebounce<T>(value: T, delay: number = 400, onDebounce?: () => void): T {
|
|
12
|
-
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
|
13
|
-
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
const handler = setTimeout(() => {
|
|
16
|
-
setDebouncedValue(value);
|
|
17
|
-
onDebounce?.();
|
|
18
|
-
}, delay);
|
|
19
|
-
|
|
20
|
-
return () => {
|
|
21
|
-
clearTimeout(handler);
|
|
22
|
-
};
|
|
23
|
-
}, [value, delay, onDebounce]);
|
|
24
|
-
|
|
25
|
-
return debouncedValue;
|
|
26
|
-
}
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Hook para aplicar debounce em valores
|
|
7
|
+
* @param value - Valor a ser debounced
|
|
8
|
+
* @param delay - Delay em milissegundos (padrão: 400ms)
|
|
9
|
+
* @returns Valor debounced
|
|
10
|
+
*/
|
|
11
|
+
export function useDebounce<T>(value: T, delay: number = 400, onDebounce?: () => void): T {
|
|
12
|
+
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
|
13
|
+
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
const handler = setTimeout(() => {
|
|
16
|
+
setDebouncedValue(value);
|
|
17
|
+
onDebounce?.();
|
|
18
|
+
}, delay);
|
|
19
|
+
|
|
20
|
+
return () => {
|
|
21
|
+
clearTimeout(handler);
|
|
22
|
+
};
|
|
23
|
+
}, [value, delay, onDebounce]);
|
|
24
|
+
|
|
25
|
+
return debouncedValue;
|
|
26
|
+
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { useState } from 'react';
|
|
4
|
-
import type React from 'react';
|
|
5
|
-
import { useDebounce } from './useDebounce';
|
|
6
|
-
|
|
7
|
-
export function useDebounceState<T>(initialValue: T, delay: number = 400): [T, React.Dispatch<React.SetStateAction<T>>] {
|
|
8
|
-
const [rawValue, setRawValue] = useState<T>(initialValue);
|
|
9
|
-
const debouncedValue = useDebounce(rawValue, delay);
|
|
10
|
-
return [debouncedValue, setRawValue];
|
|
11
|
-
}
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import type React from 'react';
|
|
5
|
+
import { useDebounce } from './useDebounce';
|
|
6
|
+
|
|
7
|
+
export function useDebounceState<T>(initialValue: T, delay: number = 400): [T, React.Dispatch<React.SetStateAction<T>>] {
|
|
8
|
+
const [rawValue, setRawValue] = useState<T>(initialValue);
|
|
9
|
+
const debouncedValue = useDebounce(rawValue, delay);
|
|
10
|
+
return [debouncedValue, setRawValue];
|
|
11
|
+
}
|
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { useEffect, useRef, useState, useCallback } from 'react';
|
|
4
|
-
|
|
5
|
-
interface UseDebouncedEffectOptions {
|
|
6
|
-
effect: () => void;
|
|
7
|
-
debouncedDeps: React.DependencyList;
|
|
8
|
-
immediateDeps?: React.DependencyList;
|
|
9
|
-
delay?: number;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Executes an effect with two trigger modes:
|
|
14
|
-
* - `debouncedDeps`: triggers the effect after a delay (resets on each change)
|
|
15
|
-
* - `immediateDeps`: triggers the effect immediately (also cancels any pending debounce)
|
|
16
|
-
*
|
|
17
|
-
* On mount, the effect fires once immediately via `immediateDeps`.
|
|
18
|
-
* The effect callback always uses the latest closure values via a ref.
|
|
19
|
-
*
|
|
20
|
-
* @returns `{ isDebouncing }` — true while waiting for a debounced trigger to fire
|
|
21
|
-
*/
|
|
22
|
-
export function useDebouncedEffect({
|
|
23
|
-
effect,
|
|
24
|
-
debouncedDeps,
|
|
25
|
-
immediateDeps = [],
|
|
26
|
-
delay = 500,
|
|
27
|
-
}: UseDebouncedEffectOptions) {
|
|
28
|
-
const [isDebouncing, setIsDebouncing] = useState(false);
|
|
29
|
-
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
30
|
-
const effectRef = useRef(effect);
|
|
31
|
-
effectRef.current = effect;
|
|
32
|
-
const hasMounted = useRef(false);
|
|
33
|
-
|
|
34
|
-
const clearTimer = useCallback(() => {
|
|
35
|
-
if (timerRef.current) {
|
|
36
|
-
clearTimeout(timerRef.current);
|
|
37
|
-
timerRef.current = null;
|
|
38
|
-
}
|
|
39
|
-
}, []);
|
|
40
|
-
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
clearTimer();
|
|
43
|
-
setIsDebouncing(false);
|
|
44
|
-
effectRef.current();
|
|
45
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
46
|
-
}, immediateDeps);
|
|
47
|
-
|
|
48
|
-
useEffect(() => {
|
|
49
|
-
if (!hasMounted.current) {
|
|
50
|
-
hasMounted.current = true;
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
clearTimer();
|
|
55
|
-
setIsDebouncing(true);
|
|
56
|
-
|
|
57
|
-
timerRef.current = setTimeout(() => {
|
|
58
|
-
setIsDebouncing(false);
|
|
59
|
-
effectRef.current();
|
|
60
|
-
}, delay);
|
|
61
|
-
|
|
62
|
-
return clearTimer;
|
|
63
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
64
|
-
}, [...debouncedDeps, delay]);
|
|
65
|
-
|
|
66
|
-
useEffect(() => clearTimer, [clearTimer]);
|
|
67
|
-
|
|
68
|
-
return { isDebouncing };
|
|
69
|
-
}
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useEffect, useRef, useState, useCallback } from 'react';
|
|
4
|
+
|
|
5
|
+
interface UseDebouncedEffectOptions {
|
|
6
|
+
effect: () => void;
|
|
7
|
+
debouncedDeps: React.DependencyList;
|
|
8
|
+
immediateDeps?: React.DependencyList;
|
|
9
|
+
delay?: number;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Executes an effect with two trigger modes:
|
|
14
|
+
* - `debouncedDeps`: triggers the effect after a delay (resets on each change)
|
|
15
|
+
* - `immediateDeps`: triggers the effect immediately (also cancels any pending debounce)
|
|
16
|
+
*
|
|
17
|
+
* On mount, the effect fires once immediately via `immediateDeps`.
|
|
18
|
+
* The effect callback always uses the latest closure values via a ref.
|
|
19
|
+
*
|
|
20
|
+
* @returns `{ isDebouncing }` — true while waiting for a debounced trigger to fire
|
|
21
|
+
*/
|
|
22
|
+
export function useDebouncedEffect({
|
|
23
|
+
effect,
|
|
24
|
+
debouncedDeps,
|
|
25
|
+
immediateDeps = [],
|
|
26
|
+
delay = 500,
|
|
27
|
+
}: UseDebouncedEffectOptions) {
|
|
28
|
+
const [isDebouncing, setIsDebouncing] = useState(false);
|
|
29
|
+
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
30
|
+
const effectRef = useRef(effect);
|
|
31
|
+
effectRef.current = effect;
|
|
32
|
+
const hasMounted = useRef(false);
|
|
33
|
+
|
|
34
|
+
const clearTimer = useCallback(() => {
|
|
35
|
+
if (timerRef.current) {
|
|
36
|
+
clearTimeout(timerRef.current);
|
|
37
|
+
timerRef.current = null;
|
|
38
|
+
}
|
|
39
|
+
}, []);
|
|
40
|
+
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
clearTimer();
|
|
43
|
+
setIsDebouncing(false);
|
|
44
|
+
effectRef.current();
|
|
45
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
46
|
+
}, immediateDeps);
|
|
47
|
+
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
if (!hasMounted.current) {
|
|
50
|
+
hasMounted.current = true;
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
clearTimer();
|
|
55
|
+
setIsDebouncing(true);
|
|
56
|
+
|
|
57
|
+
timerRef.current = setTimeout(() => {
|
|
58
|
+
setIsDebouncing(false);
|
|
59
|
+
effectRef.current();
|
|
60
|
+
}, delay);
|
|
61
|
+
|
|
62
|
+
return clearTimer;
|
|
63
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
64
|
+
}, [...debouncedDeps, delay]);
|
|
65
|
+
|
|
66
|
+
useEffect(() => clearTimer, [clearTimer]);
|
|
67
|
+
|
|
68
|
+
return { isDebouncing };
|
|
69
|
+
}
|