1+ import StackGrid , { transitions } from "react-stack-grid" ;
2+ import React from "react" ;
3+ import useWindowSize from 'react-use/lib/useWindowSize'
4+ import Confetti from 'react-confetti'
5+
6+ const { scaleDown } = transitions ;
7+ const images = [
8+ '/imgs/vasu/v0.png' ,
9+ '/imgs/vasu/v2.png' ,
10+ '/imgs/vasu/v8.png' ,
11+ '/imgs/vasu/v3.png' ,
12+ '/imgs/vasu/v4.png' ,
13+ '/imgs/vasu/v5.png' ,
14+ '/imgs/vasu/v6.png' ,
15+ '/imgs/vasu/v1.png' ,
16+ '/imgs/vasu/v7.png' ,
17+ ]
18+
19+ const VasImgComp = ( props ) => {
20+ console . log ( props ) ;
21+ return (
22+ < div key = { props . k } >
23+ < img src = { props . img } alt = "Vasu pic" className = "object-cover" />
24+ </ div >
25+ )
26+ }
27+
28+ const Banner = ( props ) => {
29+
30+
31+
32+ return (
33+ < div id = "banner" role = 'alert' className = { "absolute top-1/4 left-1/4 z-10 w-6/12 flex flex-col h-30 rounded-2xl bg-purple-400 border-t-4 rounded-b text-white px-4 py-3 shadow-md " + ( props . show ? "" : "hidden" ) } >
34+ < strong class = "font-bold py-6 text-2xl" > Happy Birthday!!! 🎂 🍰</ strong >
35+ < span class = "block sm:inline text-lg" > Hi Vasundhara, the very less time I have spent with you till now has been amazing and I want you to enjoy your birthday to the fullest. It's okay if we cannot celebrate your birthday this time together but I really hope we can be together for all the next amazing birthdays you are going to have. That being said, always carry that beautiful smile of yours which brightens up my day and I am sure the people around you. So may you have the best birthday. You are the best! Meet Soon.</ span >
36+ < span class = "absolute top-0 bottom-0 right-0 px-4 py-3" onClick = { ( ) => props . setShow ( false ) } >
37+ < svg class = "fill-current h-6 w-6 text-blue-500" role = "button" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 20 20" > < title > Close</ title > < path d = "M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" /> </ svg >
38+ </ span >
39+ </ div >
40+ )
41+ }
42+
43+
44+ const Vasundhara = ( ) => {
45+
46+ const [ show , setShow ] = React . useState ( true ) ;
47+ const { width, height } = useWindowSize ( )
48+ return (
49+ < div className = "w-full h-screen bg-gradient-to-bl from-blue-400 to-pink-500" >
50+ < Banner show = { show } setShow = { setShow } />
51+ < Confetti
52+ width = { width }
53+ height = { height }
54+ run = { show }
55+ />
56+ < div className = { show ? "blur-md" : "" } >
57+ < div className = "text-white font-bold text-7xl font-sans text-center py-10" > Vasundhara Chatterjee</ div >
58+ < div className = "font-bold text-center text-lg text-gray-200 pb-5" > I love you cause the entire universe helped me find you and you know how.🙃</ div >
59+ < div className = "grid grid-cols-10" >
60+ < StackGrid
61+ columnWidth = { 150 }
62+ duration = { 1000 }
63+ appearDelay = { 100 }
64+ gutterHeight = { 50 }
65+ gutterWidth = { 30 }
66+ appear = { scaleDown . appear }
67+ appeared = { scaleDown . appeared }
68+ enter = { scaleDown . enter }
69+ entered = { scaleDown . entered }
70+ leaved = { scaleDown . leaved }
71+ className = "col-start-2 col-span-8"
72+ >
73+ {
74+ images . map ( ( img , i ) => < VasImgComp img = { img } k = { i } /> )
75+ }
76+
77+
78+ </ StackGrid >
79+ </ div >
80+ </ div >
81+ </ div >
82+ )
83+ }
84+
85+ export default Vasundhara ;
0 commit comments