Модальные окнаcookielegaloverlay
Cookie Consent
Плавающий баннер файлов cookie в стеклянном стиле с кнопками согласия.
Живое превью
We use cookies to improve your experience. Learn more
Использование
Скопируйте и вставьте этот код в ваш React-компонент:
tsx
import { CookieBannerGlass } from 'react-component-kit-ui/overlays';
<CookieBannerGlass>Content</CookieBannerGlass>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/CookieBannerGlass.tsx + CookieBannerGlass.css:
CookieBannerGlass.tsx
'use client';
import './CookieBannerGlass.css';
/** CookieBannerGlass — ported from astro-component-kit. */
export interface CookieBannerGlassProps {
}
export function CookieBannerGlass({}: CookieBannerGlassProps) {
return (
<>
<div className="cookie-bar" data-rk-bdb372="">
<div className="text" data-rk-bdb372="">We use cookies to improve your experience. <a href="#" data-rk-bdb372="">Learn more</a></div>
<div className="acts" data-rk-bdb372=""><button className="opt" data-rk-bdb372="">Options</button><button className="acc" data-rk-bdb372="">Accept All</button></div>
</div>
</>
);
}
export default CookieBannerGlass;CookieBannerGlass.css
/* CookieBannerGlass — ported from astro-component-kit (overlays/CookieBannerGlass.astro) */
.cookie-bar:where([data-rk-bdb372]) { position: fixed; bottom: 2rem; left: 2rem; right: 2rem; max-width: 600px; margin: 0 auto; background: rgba(15,23,42,0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.text:where([data-rk-bdb372]) { color: #e2e8f0; font-size: 0.85rem; }
.acts:where([data-rk-bdb372]) { display: flex; gap: 0.75rem; }
button:where([data-rk-bdb372]) { padding: 0.5rem 1rem; border-radius: 8px; border: none; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.opt:where([data-rk-bdb372]) { background: transparent; color: #fff; border: 1px solid #334155; }
.acc:where([data-rk-bdb372]) { background: #6366f1; color: #fff; }Краткая информация
- Категория
- Модальные окна
- Имя файла
CookieBannerGlass.tsx- Зависимости
- Нет — чистый React + CSS
- Теги
- cookielegaloverlay