chore: bump version to 2.21.16 and refactor CookieBanner component

- Updated application version from 2.21.15 to 2.21.16 in package.json.
- Refactored CookieBanner to use dynamic import for improved performance and server-side rendering handling.
- Enhanced accessibility by updating the Dialog title structure in the CookieBanner component.
This commit is contained in:
gbuomprisco
2025-12-20 08:23:58 +01:00
parent 27bf08dca1
commit 26184ed082
2 changed files with 13 additions and 9 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "next-supabase-saas-kit-turbo", "name": "next-supabase-saas-kit-turbo",
"version": "2.21.15", "version": "2.21.16",
"private": true, "private": true,
"sideEffects": false, "sideEffects": false,
"engines": { "engines": {

View File

@@ -2,6 +2,8 @@
import { useCallback, useMemo, useState } from 'react'; import { useCallback, useMemo, useState } from 'react';
import dynamic from 'next/dynamic';
import { Dialog as DialogPrimitive } from 'radix-ui'; import { Dialog as DialogPrimitive } from 'radix-ui';
import { Button } from '../shadcn/button'; import { Button } from '../shadcn/button';
@@ -17,7 +19,11 @@ enum ConsentStatus {
Unknown = 'unknown', Unknown = 'unknown',
} }
export function CookieBanner() { export const CookieBanner = dynamic(async () => CookieBannerComponent, {
ssr: false,
});
export function CookieBannerComponent() {
const { status, accept, reject } = useCookieConsent(); const { status, accept, reject } = useCookieConsent();
if (!isBrowser()) { if (!isBrowser()) {
@@ -32,15 +38,13 @@ export function CookieBanner() {
<DialogPrimitive.Root open modal={false}> <DialogPrimitive.Root open modal={false}>
<DialogPrimitive.Content <DialogPrimitive.Content
onOpenAutoFocus={(e) => e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()}
className={`dark:shadow-primary-500/40 bg-background animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both fixed bottom-0 w-full max-w-lg border p-6 shadow-2xl delay-1000 duration-1000 lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`} className={`dark:shadow-primary-500/40 bg-background animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both fixed bottom-0 z-50 w-full max-w-lg border p-6 shadow-2xl delay-1000 duration-1000 lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
> >
<div className={'flex flex-col space-y-4'}> <DialogPrimitive.Title className="text-lg font-semibold">
<div> <Trans i18nKey={'cookieBanner.title'} />
<Heading level={3}> </DialogPrimitive.Title>
<Trans i18nKey={'cookieBanner.title'} />
</Heading>
</div>
<div className={'flex flex-col space-y-4'}>
<div className={'text-gray-500 dark:text-gray-400'}> <div className={'text-gray-500 dark:text-gray-400'}>
<Trans i18nKey={'cookieBanner.description'} /> <Trans i18nKey={'cookieBanner.description'} />
</div> </div>