92:I[903690,["/chat-static/_next/static/chunks/1lldpz2r73wcq.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1cse1cspi4pem.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/406xqgxrz-oqp.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1n2hc8s2n43mj.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0tks-20_fdj6k.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3o-xwwxiahfwj.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3wbz_5o44gxb_.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/138affqvk64dw.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/34znl7ychejgm.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2hrotm7ic439_.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/22rs7ss8bfi68.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3ylz1w0kb5r7l.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1x4e30619tyu9.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3yi1_k4iu7z3c.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/1lldpz2r73wcq.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1cse1cspi4pem.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/406xqgxrz-oqp.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1n2hc8s2n43mj.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0tks-20_fdj6k.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3o-xwwxiahfwj.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3wbz_5o44gxb_.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/138affqvk64dw.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/34znl7ychejgm.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2hrotm7ic439_.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/22rs7ss8bfi68.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3ylz1w0kb5r7l.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1x4e30619tyu9.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3yi1_k4iu7z3c.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA"],"SWRDataProvider"] 96:I[589831,["/chat-static/_next/static/chunks/1lldpz2r73wcq.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1cse1cspi4pem.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/406xqgxrz-oqp.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1n2hc8s2n43mj.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0tks-20_fdj6k.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3o-xwwxiahfwj.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3wbz_5o44gxb_.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/138affqvk64dw.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/34znl7ychejgm.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2hrotm7ic439_.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/22rs7ss8bfi68.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3ylz1w0kb5r7l.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1x4e30619tyu9.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3yi1_k4iu7z3c.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA"],"TemplateImage"] 97:I[507037,["/chat-static/_next/static/chunks/1lldpz2r73wcq.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1cse1cspi4pem.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/406xqgxrz-oqp.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1n2hc8s2n43mj.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0tks-20_fdj6k.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3o-xwwxiahfwj.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3wbz_5o44gxb_.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/138affqvk64dw.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/34znl7ychejgm.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/2hrotm7ic439_.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/22rs7ss8bfi68.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3ylz1w0kb5r7l.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/1x4e30619tyu9.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA","/chat-static/_next/static/chunks/3yi1_k4iu7z3c.js?dpl=dpl_HBA2up1rzJsRme2reNjyB87to1bA"],"PrefetchLinkAndRefreshOnHover"] 94:T6af8,[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import QRCode from "qrcode" interface TransformValues { // Hardcoded values - no longer adjustable useMatrix: boolean triangleMask: boolean triangleSize: number triangleX: number triangleY: number cropLeft: number cropTop: number cropRight: number cropBottom: number // Hardcoded gradient noise pattern settings noiseModuleSize: number whiteStopPoint: number blackStopPoint: number gradientIntensity: number gradientDirection: "tl-br" | "tr-bl" | "top-bottom" | "left-right" | "radial" // Homography matrix values (3x3) - hardcoded h11: number h12: number h13: number h21: number h22: number h23: number h31: number h32: number h33: number } export default function QRCodeGenerator() { const [text, setText] = useState("") const [debouncedText, setDebouncedText] = useState("") const [qrCodeUrl, setQrCodeUrl] = useState("") const [generatedText, setGeneratedText] = useState("") // Track what text the current QR code represents const [isDark, setIsDark] = useState(false) const [isGenerating, setIsGenerating] = useState(false) const [hasInitialized, setHasInitialized] = useState(false) // Track if we've loaded initial state const [noiseKey, setNoiseKey] = useState(0) // Key to trigger noise re-generation const canvasRef = useRef(null) const [transform] = useState({ // Hardcoded settings useMatrix: true, triangleMask: true, triangleSize: 720, // Double for higher resolution triangleX: 800, // Double for higher resolution triangleY: 452, // Double for higher resolution cropLeft: 440, // Double for higher resolution cropTop: 140, // Double for higher resolution cropRight: 1160, // Double for higher resolution cropBottom: 760, // Double for higher resolution // Hardcoded gradient noise pattern settings noiseModuleSize: 50, whiteStopPoint: 30, blackStopPoint: 50, gradientIntensity: 75, gradientDirection: "tl-br", // Hardcoded matrix values h11: 0.718, h12: 0.0, h13: 0.0, h21: 0.0, h22: 1.0, h23: 0.0, h31: 0.0, h32: 0.291, h33: 1.5, }) // Effect to read query parameter on mount and update state useEffect(() => { const params = new URLSearchParams(window.location.search) const initialText = params.get("text") if (initialText) { setText(initialText) setDebouncedText(initialText) // Also set debounced text to trigger generation immediately } setHasInitialized(true) // Mark as initialized }, []) // Debounce text input to improve performance useEffect(() => { const timer = setTimeout(() => { setDebouncedText(text) }, 300) // 300ms delay return () => clearTimeout(timer) }, [text]) const generateQRCode = async (value: string) => { if (!value.trim()) { setQrCodeUrl("") setGeneratedText("") setIsGenerating(false) return } setIsGenerating(true) try { const url = await QRCode.toDataURL(value, { width: 1024, // Higher resolution margin: 0, color: { dark: "#000000", light: "#FFFFFF", }, }) setQrCodeUrl(url) setGeneratedText(value) // Track what text this QR code represents } catch (error) { console.error("Error generating QR code:", error) } finally { setIsGenerating(false) } } // Generate QR code only when debounced text changes useEffect(() => { generateQRCode(debouncedText) }, [debouncedText]) // Update URL when debounced text changes (but only after initialization) useEffect(() => { if (!hasInitialized) return // Don't update URL until we've loaded initial state if (debouncedText.trim()) { const newUrl = `${window.location.pathname}?text=${encodeURIComponent(debouncedText.trim())}` window.history.replaceState({ path: newUrl }, "", newUrl) } else { // Clear query param when text is empty const newUrl = window.location.pathname window.history.replaceState({ path: newUrl }, "", newUrl) } }, [debouncedText, hasInitialized]) // Calculate gradient position based on direction const calculateGradientPosition = (x: number, y: number, maxX: number, maxY: number, direction: string): number => { switch (direction) { case "tl-br": // Top-left to bottom-right const maxDiagonal = Math.sqrt(maxX * maxX + maxY * maxY) const currentDiagonal = Math.sqrt(x * x + y * y) return currentDiagonal / maxDiagonal case "tr-bl": // Top-right to bottom-left const maxDiagonalTR = Math.sqrt(maxX * maxX + maxY * maxY) const currentDiagonalTR = Math.sqrt((maxX - x) * (maxX - x) + y * y) return currentDiagonalTR / maxDiagonalTR case "top-bottom": // Top to bottom return y / maxY case "left-right": // Left to right return x / maxX case "radial": // Radial from center const centerX = maxX / 2 const centerY = maxY / 2 const maxRadius = Math.sqrt(centerX * centerX + centerY * centerY) const currentRadius = Math.sqrt((x - centerX) * (x - centerX) + (y - centerY) * (y - centerY)) return Math.min(currentRadius / maxRadius, 1) default: return 0 } } // Generate random QR-like pattern with QR code at top-left const createExtendedQRPattern = (qrImg: HTMLImageElement): HTMLCanvasElement => { const extendedCanvas = document.createElement("canvas") const ctx = extendedCanvas.getContext("2d") if (!ctx) return extendedCanvas // Make the extended canvas much larger to fill with pattern const extendedSize = 2048 // Higher resolution extendedCanvas.width = extendedSize extendedCanvas.height = extendedSize // Fill with background color based on dark mode ctx.fillStyle = isDark ? "#000000" : "#ffffff" ctx.fillRect(0, 0, extendedSize, extendedSize) // Use hardcoded module size for noise pattern const moduleSize = transform.noiseModuleSize // Calculate how many modules fit in the extended canvas const extendedModules = Math.floor(extendedSize / moduleSize) // Calculate QR code placement based on module size const qrModulesNeeded = Math.ceil(qrImg.width / moduleSize) const qrStartX = 0 const qrStartY = 0 const qrEndX = qrModulesNeeded const qrEndY = qrModulesNeeded // Convert stop points to 0-1 range const whiteStop = transform.whiteStopPoint / 100 const blackStop = transform.blackStopPoint / 100 const intensity = transform.gradientIntensity / 100 // Generate gradient-based pattern for the entire extended canvas for (let y = 0; y < extendedModules; y++) { for (let x = 0; x < extendedModules; x++) { // Skip the area where the real QR code will be placed (top-left) if (x >= qrStartX && x < qrEndX && y >= qrStartY && y < qrEndY) { continue } // Calculate gradient position based on direction const gradientPosition = calculateGradientPosition( x, y, extendedModules, extendedModules, transform.gradientDirection, ) // Calculate noise probability with corrected math let noiseProbability = 0.5 // Default 50% for areas outside gradient influence if (gradientPosition <= whiteStop) { // Before white stop: pure white (0% black probability when intensity is 100%) noiseProbability = 0.5 * (1 - intensity) } else if (gradientPosition >= blackStop) { // After black stop: pure black (100% black probability when intensity is 100%) noiseProbability = 0.5 + 0.5 * intensity } else { // Between stops: smooth transition from white to black const transitionPosition = (gradientPosition - whiteStop) / (blackStop - whiteStop) const minProb = 0.5 * (1 - intensity) // White end probability const maxProb = 0.5 + 0.5 * intensity // Black end probability noiseProbability = minProb + (maxProb - minProb) * transitionPosition } // Clamp probability to valid range noiseProbability = Math.max(0, Math.min(1, noiseProbability)) // Generate black or white squares based on gradient probability const isBlack = Math.random() < noiseProbability // Invert colors in dark mode ctx.fillStyle = isDark ? (isBlack ? "#ffffff" : "#000000") : isBlack ? "#000000" : "#ffffff" ctx.fillRect(x * moduleSize, y * moduleSize, moduleSize, moduleSize) } } // Place the real QR code at the top-left, scaled to fit the module grid const qrX = qrStartX * moduleSize const qrY = qrStartY * moduleSize const qrSize = qrModulesNeeded * moduleSize // If in dark mode, we need to invert the QR code colors if (isDark) { // Create a temporary canvas to invert the QR code const tempQRCanvas = document.createElement("canvas") const tempQRCtx = tempQRCanvas.getContext("2d") if (tempQRCtx) { tempQRCanvas.width = qrImg.width tempQRCanvas.height = qrImg.height // Draw the original QR code tempQRCtx.drawImage(qrImg, 0, 0) // Get image data and invert colors const imageData = tempQRCtx.getImageData(0, 0, tempQRCanvas.width, tempQRCanvas.height) const data = imageData.data for (let i = 0; i < data.length; i += 4) { // Invert RGB values (keep alpha the same) data[i] = 255 - data[i] // Red data[i + 1] = 255 - data[i + 1] // Green data[i + 2] = 255 - data[i + 2] // Blue // data[i + 3] stays the same (Alpha) } tempQRCtx.putImageData(imageData, 0, 0) ctx.drawImage(tempQRCanvas, qrX, qrY, qrSize, qrSize) } } else { ctx.drawImage(qrImg, qrX, qrY, qrSize, qrSize) } return extendedCanvas } // Create equilateral triangle mask (remove bottom border section) const createTriangleMask = (canvas: HTMLCanvasElement) => { const ctx = canvas.getContext("2d") if (!ctx) return // Create a mask canvas const maskCanvas = document.createElement("canvas") const maskCtx = maskCanvas.getContext("2d") if (!maskCtx) return maskCanvas.width = canvas.width maskCanvas.height = canvas.height // Fill mask with black (hidden areas) maskCtx.fillStyle = "#000000" maskCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height) // Create equilateral triangle window (white area) const centerX = transform.triangleX const centerY = transform.triangleY const size = transform.triangleSize const height = (size * Math.sqrt(3)) / 2 maskCtx.fillStyle = "#ffffff" maskCtx.beginPath() // Top vertex maskCtx.moveTo(centerX, centerY - height / 2) // Bottom left vertex maskCtx.lineTo(centerX - size / 2, centerY + height / 2) // Bottom right vertex maskCtx.lineTo(centerX + size / 2, centerY + height / 2) maskCtx.closePath() maskCtx.fill() // Apply mask to canvas const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) const maskData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height) for (let i = 0; i < imageData.data.length; i += 4) { const maskValue = maskData.data[i] // Use red channel of mask if (maskValue === 0) { // Black area in mask - make transparent imageData.data[i + 3] = 0 // Set alpha to 0 } } ctx.putImageData(imageData, 0, 0) } // Matrix inversion function const invertMatrix = (H: number[]) => { const [a, b, c, d, e, f, g, h, i] = H const det = a * (e * i - f * h) - b * (d * i - f * g) + c * (d * h - e * g) if (Math.abs(det) < 1e-10) return null // Matrix is not invertible return [ (e * i - f * h) / det, (c * h - b * i) / det, (b * f - c * e) / det, (f * g - d * i) / det, (a * i - c * g) / det, (c * d - a * f) / det, (d * h - e * g) / det, (b * g - a * h) / det, (a * e - b * d) / det, ] } // Homography matrix transformation with proper coordinate mapping and cropping const applyHomographyTransform = (canvas: HTMLCanvasElement, img: HTMLImageElement) => { const ctx = canvas.getContext("2d") if (!ctx) return // Use crop dimensions for canvas size (higher resolution) const cropWidth = transform.cropRight - transform.cropLeft const cropHeight = transform.cropBottom - transform.cropTop canvas.width = cropWidth canvas.height = cropHeight // Clear canvas with background color based on dark mode ctx.fillStyle = isDark ? "#000000" : "#ffffff" ctx.fillRect(0, 0, canvas.width, canvas.height) // Enable image smoothing for better quality ctx.imageSmoothingEnabled = true ctx.imageSmoothingQuality = "high" // Get homography matrix from hardcoded values const H = [ transform.h11, transform.h12, transform.h13, transform.h21, transform.h22, transform.h23, transform.h31, transform.h32, transform.h33, ] // Invert the matrix for backward mapping const Hinv = invertMatrix(H) if (!Hinv) return // First, create the extended QR pattern const extendedPattern = createExtendedQRPattern(img) // Create a temporary canvas to draw the rotated extended pattern const tempCanvas = document.createElement("canvas") const tempCtx = tempCanvas.getContext("2d") if (!tempCtx) return // Enable high quality rendering tempCtx.imageSmoothingEnabled = true tempCtx.imageSmoothingQuality = "high" // Rotate the temp canvas 45 degrees const angle = (45 * Math.PI) / 180 const rotatedWidth = Math.abs(extendedPattern.width * Math.cos(angle)) + Math.abs(extendedPattern.height * Math.sin(angle)) const rotatedHeight = Math.abs(extendedPattern.width * Math.sin(angle)) + Math.abs(extendedPattern.height * Math.cos(angle)) tempCanvas.width = rotatedWidth tempCanvas.height = rotatedHeight tempCtx.translate(tempCanvas.width / 2, tempCanvas.height / 2) tempCtx.rotate(angle) tempCtx.translate(-extendedPattern.width / 2, -extendedPattern.height / 2) // Draw the extended QR pattern on temp canvas tempCtx.drawImage(extendedPattern, 0, 0, extendedPattern.width, extendedPattern.height) const tempImageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height) const tempData = tempImageData.data // Create a full-size working canvas first (higher resolution) const workingCanvas = document.createElement("canvas") const workingCtx = workingCanvas.getContext("2d") if (!workingCtx) return workingCanvas.width = 1600 // Higher resolution workingCanvas.height = 1600 // Clear working canvas with background color based on dark mode workingCtx.fillStyle = isDark ? "#000000" : "#ffffff" workingCtx.fillRect(0, 0, workingCanvas.width, workingCanvas.height) // Create working image data const workingImageData = workingCtx.createImageData(workingCanvas.width, workingCanvas.height) const workingData = workingImageData.data // Apply homography transformation to full working canvas for (let y = 0; y < workingCanvas.height; y++) { for (let x = 0; x < workingCanvas.width; x++) { // Normalize coordinates to [-1, 1] range const nx = (x / workingCanvas.width) * 2 - 1 const ny = (y / workingCanvas.height) * 2 - 1 // Apply inverse homography to find source coordinates const w = Hinv[6] * nx + Hinv[7] * ny + Hinv[8] if (Math.abs(w) > 1e-10) { const srcX = (Hinv[0] * nx + Hinv[1] * ny + Hinv[2]) / w const srcY = (Hinv[3] * nx + Hinv[4] * ny + Hinv[5]) / w // Convert back to pixel coordinates const pixelX = Math.round(((srcX + 1) * tempCanvas.width) / 2) const pixelY = Math.round(((srcY + 1) * tempCanvas.height) / 2) const dstIndex = (y * workingCanvas.width + x) * 4 // Check bounds and copy pixel data if (pixelX >= 0 && pixelX < tempCanvas.width && pixelY >= 0 && pixelY < tempCanvas.height) { const srcIndex = (pixelY * tempCanvas.width + pixelX) * 4 workingData[dstIndex] = tempData[srcIndex] // R workingData[dstIndex + 1] = tempData[srcIndex + 1] // G workingData[dstIndex + 2] = tempData[srcIndex + 2] // B workingData[dstIndex + 3] = 255 // A } else { // Out of bounds - fill with background color based on dark mode const bgColor = isDark ? 0 : 255 workingData[dstIndex] = bgColor // R workingData[dstIndex + 1] = bgColor // G workingData[dstIndex + 2] = bgColor // B workingData[dstIndex + 3] = 255 // A } } else { // Invalid transformation - fill with background color based on dark mode const dstIndex = (y * workingCanvas.width + x) * 4 const bgColor = isDark ? 0 : 255 workingData[dstIndex] = bgColor // R workingData[dstIndex + 1] = bgColor // G workingData[dstIndex + 2] = bgColor // B workingData[dstIndex + 3] = 255 // A } } } workingCtx.putImageData(workingImageData, 0, 0) // Apply triangle mask with bottom border to working canvas createTriangleMask(workingCanvas) // Now crop from the working canvas to the final canvas const cropImageData = workingCtx.getImageData(transform.cropLeft, transform.cropTop, cropWidth, cropHeight) ctx.putImageData(cropImageData, 0, 0) } // Update canvas when QR code, dark mode, or noise key changes useEffect(() => { if (qrCodeUrl && canvasRef.current) { const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { applyHomographyTransform(canvasRef.current!, img) } img.src = qrCodeUrl } }, [qrCodeUrl, isDark, noiseKey]) const handleInputChange = (e: React.ChangeEvent) => { const value = e.target.value setText(value) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (text.trim()) { generateQRCode(text.trim()) } } const downloadQRCode = () => { if (canvasRef.current) { // Download canvas content const link = document.createElement("a") link.download = "qrcel-qrcode.png" link.href = canvasRef.current.toDataURL() link.click() } } const toggleDarkMode = () => { setIsDark(!isDark) } const regenerateNoise = () => { setNoiseKey((prev) => prev + 1) } // Check if current QR code matches the input text const isQRCodeCurrent = qrCodeUrl && generatedText === text.trim() && !isGenerating return (

{/* Main Content */}

{/* Header and QR Code Area */}

{/* Header */} {/* QR Code Display Area - Fixed Height Container */}

{/* Fixed height container to prevent layout shift */}

{qrCodeUrl ? ( /* Show the QR code */

{/* Bottom Input Area */}

Built with{" "} v0 {" "} by{" "} @jacobmparis

) }88:["$","$L92",null,{"chatId":"bVQ6bCgZcBr","children":["$","$L93",null,{"data":{"@\"active-block\",\"bVQ6bCgZcBr\",":{"id":"dUKCYrMsv98","messageId":"qgNtCAIJ6kjLuLf9ehpB6Lfqk40fTM41","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"qr-code-generator","type":"code-project","project":"qr-code-generator"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"bVQ6bCgZcBr\",":false,"":null},"children":"$L95"}]}] 8d:["$","$L79","tSXOjooGIga",{"value":{"fallback":{"template:tSXOjooGIga:likes":{"likeCount":12,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L96",null,{"index":1,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/New%20Project%20%281%29-tMZQtjcXirFCZndX2HRG9HHAtYAgIL.png","alt":"","templateCanonId":"tSXOjooGIga","blockId":"296nJKujo6M"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L97",null,{"href":"/templates/tSXOjooGIga","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L97",null,{"href":"/templates/tSXOjooGIga","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L97",null,{"href":"/templates/tSXOjooGIga","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7e",null,{"teamId":"$undefined","authorId":"ykWjSNucFV3Qq53NhZh4ZaIN"}],["$","$L97",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/tSXOjooGIga","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"shadcn/v0 registry"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":""},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$L98"]}],"$L99","$L9a"]}]]}]}]]}]]}]}] 8e:["$","$L79","jSYDGSkRBFX",{"value":{"fallback":{"template:jSYDGSkRBFX:likes":{"likeCount":11,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L96",null,{"index":2,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/screenshots/jSYDGSkRBFX-rSLDaFYeuleQwVwHwA7VD5NqI3yUeu.jpg","alt":"","templateCanonId":"jSYDGSkRBFX","blockId":"b_3mi2DbTXleN"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L97",null,{"href":"/templates/jSYDGSkRBFX","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L97",null,{"href":"/templates/jSYDGSkRBFX","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L97",null,{"href":"/templates/jSYDGSkRBFX","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7e",null,{"teamId":"$undefined","authorId":"ykWjSNucFV3Qq53NhZh4ZaIN"}],["$","$L97",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/jSYDGSkRBFX","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"Neon + Stripe SaaS"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":""},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$L9b"]}],"$L9c","$L9d"]}]]}]}]]}]]}]}] 90:["$","$L79","mJ213GxiejJ",{"value":{"fallback":{"template:mJ213GxiejJ:likes":{"likeCount":7,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L96",null,{"index":1,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/screenshot-1753194979244-sfbXFr2XrMFfkSstD5dgaOKQXDCbn7.png","alt":"","templateCanonId":"mJ213GxiejJ","blockId":"b_9GGhZav1QjD"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L97",null,{"href":"/templates/mJ213GxiejJ","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L97",null,{"href":"/templates/mJ213GxiejJ","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L97",null,{"href":"/templates/mJ213GxiejJ","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7e",null,{"teamId":"team_S5XzLRwjjgoSIu8i1giOZOXS","authorId":"pcwfOAozke5DkDCcjqMLhzpK"}],["$","$L97",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/mJ213GxiejJ","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"Theme Editor"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":""},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$L9e"]}],"$L9f","$La0"]}]]}]}]]}]]}]}] 8f:["$","$L79","FlR7JxdFesy",{"value":{"fallback":{"template:FlR7JxdFesy:likes":{"likeCount":110,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L96",null,{"index":0,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/screenshots/FlR7JxdFesy-KAMXRR0MUXN0yUkRSLcyHKMkubFTKx.jpg","alt":"","templateCanonId":"FlR7JxdFesy","blockId":"b_umkj2YVEtQX"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L97",null,{"href":"/templates/FlR7JxdFesy","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L97",null,{"href":"/templates/FlR7JxdFesy","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L97",null,{"href":"/templates/FlR7JxdFesy","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7e",null,{"teamId":"$undefined","authorId":"dimIER5JTHMAB0NfVYOpkl4W"}],["$","$L97",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/FlR7JxdFesy","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"Task Manager"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":""},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$La1"]}],"$La2","$La3"]}]]}]}]]}]]}]}] 91:["$","$L79","RTz7dLt3u0c",{"value":{"fallback":{"template:RTz7dLt3u0c:likes":{"likeCount":212,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L96",null,{"index":2,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/thumbnail-m0y8FgcgFDPUi6eOvhkqObVrFOtl0Y.jpg","alt":"","templateCanonId":"RTz7dLt3u0c","blockId":"b_Laa3rB3mxTD"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L97",null,{"href":"/templates/RTz7dLt3u0c","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L97",null,{"href":"/templates/RTz7dLt3u0c","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L97",null,{"href":"/templates/RTz7dLt3u0c","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7e",null,{"teamId":"$undefined","authorId":"JwhYTwDmstkbxaA2Q8MC6mzv"}],["$","$L97",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/RTz7dLt3u0c","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"AppSport"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":""},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$La4"]}],"$La5","$La6"]}]]}]}]]}]]}]}]

qrcel.vercel.app

About

Tags

Share

About

Tags

Share

More from jacobparis

More Templates Like This