konnosDashboard
PromoToast.tsx69 lines · main
1'use client'
2
3import { hasConsented, LOCAL_STORAGE_KEYS } from 'common'
4import Link from 'next/link'
5import { useEffect, useState } from 'react'
6import { Button } from 'ui/src/components/Button/Button'
7import { cn } from 'ui/src/lib/utils/cn'
8
9import announcement from '../Banners/data.json'
10
11import './styles.css'
12
13const PromoToast = () => {
14 const [visible, setVisible] = useState(false)
15
16 useEffect(() => {
17 const shouldHide =
18 !hasConsented() || localStorage?.getItem(LOCAL_STORAGE_KEYS.HIDE_PROMO_TOAST) === 'true'
19
20 if (!shouldHide) {
21 setVisible(true)
22 }
23 }, [])
24
25 const handleHide = () => {
26 setVisible(false)
27 localStorage?.setItem(LOCAL_STORAGE_KEYS.HIDE_PROMO_TOAST, 'true')
28 }
29
30 if (!visible) return null
31
32 return (
33 <div
34 className={cn(
35 'opacity-0 translate-y-3 transition-all grid gap-2 fixed z-50 bottom-4 right-4 sm:bottom-8 sm:right-8 w-[calc(100vw-2rem)] sm:w-[320px] bg-alternative hover:bg-alternative border border-default rounded-sm p-6 shadow-lg overflow-hidden',
36 visible && 'opacity-100 translate-y-0'
37 )}
38 >
39 <video
40 src={`${process.env.NEXT_PUBLIC_BRIVEN_URL}/storage/v1/object/public/images/launch-week/lw15/assets/lw15-galaxy.mp4`}
41 autoPlay
42 loop
43 muted
44 className="absolute w-full h-full inset-0 object-cover z-0"
45 style={{
46 opacity: 0.05,
47 }}
48 poster={`${process.env.NEXT_PUBLIC_BRIVEN_URL}/storage/v1/object/public/images/launch-week/lw15/assets/lw15-galaxy.png`}
49 />
50 <div className="relative z-10 text-foreground-lighter uppercase flex flex-col text-sm w-full mb-2">
51 <span className="mb-1">{announcement.text}</span>
52 <p className="relative z-10 text-foreground flex flex-col text-xl w-full leading-7"></p>
53 </div>
54
55 <div className="relative z-10 flex items-center space-x-2">
56 <Button asChild type="secondary">
57 <Link target="_blank" rel="noreferrer" href={`https://supabase.com${announcement.link}`}>
58 Claim your ticket
59 </Link>
60 </Button>
61 <Button type="default" onClick={handleHide}>
62 Dismiss
63 </Button>
64 </div>
65 </div>
66 )
67}
68
69export default PromoToast