86:I[903690,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5"],"SWRDataProvider"] 8a:I[589831,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5"],"TemplateImage"] 8b:I[507037,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0i5jiecfjfl78.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3ot6rcyapaof_.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/1yuyyo11mati5.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_D4p4R1TzwQ5rGxH8B4zryeEypJp5"],"PrefetchLinkAndRefreshOnHover"] 88:T63d3,[V0_FILE]typescriptreact:file="components/sankey/index.tsx" isMerged="true" export { SankeyDiagram } from "./sankey-diagram" export type { SankeyData, SankeyNode, SankeyLink } from "./sankey-diagram" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { SankeyDiagram, type SankeyData, type SankeyDiagramHandle } from "@/components/sankey" import { useRef } from "react" import { Button } from "@/components/ui/button" export default function Home() { const energyDiagramRef = useRef(null) const salesDiagramRef = useRef(null) const colorDemoRef = useRef(null) const energyData: SankeyData = { nodes: [ { id: "coal", label: "Coal", color: "hsl(var(--chart-1))" }, { id: "gas", label: "Natural Gas", color: "hsl(var(--chart-2))" }, { id: "solar", label: "Solar", color: "hsl(var(--chart-4))" }, { id: "electricity", label: "Electricity", color: "hsl(var(--chart-3))" }, { id: "heat", label: "Heat", color: "hsl(var(--chart-5))" }, { id: "residential", label: "Residential", color: "hsl(var(--chart-1))" }, { id: "commercial", label: "Commercial", color: "hsl(var(--chart-2))" }, { id: "industrial", label: "Industrial", color: "hsl(var(--chart-3))" }, ], links: [ { source: "coal", target: "electricity", value: 350 }, { source: "gas", target: "electricity", value: 200 }, { source: "gas", target: "heat", value: 150 }, { source: "solar", target: "electricity", value: 100 }, { source: "electricity", target: "residential", value: 250 }, { source: "electricity", target: "commercial", value: 200 }, { source: "electricity", target: "industrial", value: 200 }, { source: "heat", target: "residential", value: 80 }, { source: "heat", target: "commercial", value: 70 }, ], } const salesData: SankeyData = { nodes: [ { id: "visitors", label: "Website Visitors", color: "hsl(var(--chart-1))" }, { id: "signups", label: "Sign Ups", color: "hsl(var(--chart-2))" }, { id: "trials", label: "Free Trials", color: "hsl(var(--chart-3))" }, { id: "customers", label: "Paying Customers", color: "hsl(var(--chart-4))" }, { id: "churn", label: "Churned", color: "hsl(var(--chart-5))" }, ], links: [ { source: "visitors", target: "signups", value: 5000 }, { source: "signups", target: "trials", value: 1200 }, { source: "trials", target: "customers", value: 450 }, { source: "trials", target: "churn", value: 750 }, ], } const colorDemoData: SankeyData = { nodes: [ { id: "a", label: "Source A" }, { id: "b", label: "Source B" }, { id: "c", label: "Target C" }, { id: "d", label: "Target D" }, { id: "e", label: "Final E" }, ], links: [ { source: "a", target: "c", value: 80 }, { source: "a", target: "d", value: 40 }, { source: "b", target: "c", value: 60 }, { source: "b", target: "d", value: 50 }, { source: "c", target: "e", value: 100 }, { source: "d", target: "e", value: 70 }, ], } return (

Sankey Diagram Library

A reusable component with zoom, pan, export, and flow conservation

Energy Flow Example

Visualizing energy sources to end-use consumption (zoom enabled)

Sales Funnel Example

Customer journey from visitor to paying customer (zoom enabled)

`${value.toLocaleString()} users`} enableZoom />

Color Scheme Examples

Different color palettes for various use cases

Pastel Colors

Vibrant Colors

Monochrome

Custom Colors

Usage

            {`import { SankeyDiagram, type SankeyData, type SankeyDiagramHandle } from "@/components/sankey"
import { useRef } from "react"

const diagramRef = useRef(null)

const data: SankeyData = {
  nodes: [
    { id: "a", label: "Node A" }, // color will be auto-assigned
    { id: "b", label: "Node B", color: "#FF6B6B" }, // or specify custom
  ],
  links: [
    { source: "a", target: "b", value: 100 },
  ],
}

// Export functionality



// Features:
// - Color schemes: "default" | "pastel" | "vibrant" | "monochrome" | "custom"
// - Zoom & Pan: enableZoom prop (scroll to zoom, drag to pan)
// - Flow conservation: ensures links never expand beyond source value
// - No backward flow: nodes are automatically positioned left-to-right

`}

) } [V0_FILE]typescriptreact:file="components/sankey/sankey-diagram.tsx" isEdit="true" isQuickEdit="true" "use client" import { Card } from "@/components/ui/card" import type React from "react" import { cn } from "@/lib/utils" import { useRef, useImperativeHandle, forwardRef, useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { ZoomIn, ZoomOut, Maximize2 } from "lucide-react" export interface SankeyNode { id: string label: string color?: string } export interface SankeyLink { source: string target: string value: number color?: string } export interface SankeyData { nodes: SankeyNode[] links: SankeyLink[] } interface SankeyDiagramProps { data: SankeyData width?: number height?: number className?: string nodeWidth?: number nodePadding?: number showValues?: boolean valueFormat?: (value: number) => string colorScheme?: "default" | "pastel" | "vibrant" | "monochrome" | "custom" customColors?: string[] enableZoom?: boolean } interface ProcessedNode extends SankeyNode { x: number y: number height: number value: number depth: number } interface ProcessedLink extends SankeyLink { sourceNode: ProcessedNode targetNode: ProcessedNode y0: number y1: number } function getNodeDepth(nodeId: string, links: SankeyLink[], cache = new Map()): number { if (cache.has(nodeId)) return cache.get(nodeId)! const incomingLinks = links.filter((link) => link.target === nodeId) if (incomingLinks.length === 0) { cache.set(nodeId, 0) return 0 } const depth = 1 + Math.max(...incomingLinks.map((link) => getNodeDepth(link.source, links, cache))) cache.set(nodeId, depth) return depth } function optimizeNodePositions(data: SankeyData, nodeDepths: Map): Map { const optimizedDepths = new Map(nodeDepths) // Ensure no link flows backwards data.links.forEach((link) => { const sourceDepth = optimizedDepths.get(link.source)! const targetDepth = optimizedDepths.get(link.target)! if (targetDepth <= sourceDepth) { // Push target node to the right optimizedDepths.set(link.target, sourceDepth + 1) } }) return optimizedDepths } function processData( data: SankeyData, width: number, height: number, nodeWidth: number, nodePadding: number, ): { nodes: ProcessedNode[]; links: ProcessedLink[] } { // Calculate node depths const nodeDepths = new Map() data.nodes.forEach((node) => { nodeDepths.set(node.id, getNodeDepth(node.id, data.links)) }) const optimizedDepths = optimizeNodePositions(data, nodeDepths) const maxDepth = Math.max(...Array.from(optimizedDepths.values())) const depthWidth = (width - nodeWidth * 2) / Math.max(1, maxDepth) const nodeValues = new Map() data.nodes.forEach((node) => { const inValue = data.links.filter((link) => link.target === node.id).reduce((sum, link) => sum + link.value, 0) const outValue = data.links.filter((link) => link.source === node.id).reduce((sum, link) => sum + link.value, 0) // Use the maximum of in/out values for proper sizing nodeValues.set(node.id, Math.max(inValue, outValue, 0.1)) // Ensure minimum value }) // Group nodes by depth const nodesByDepth = new Map() data.nodes.forEach((node) => { const depth = optimizedDepths.get(node.id)! if (!nodesByDepth.has(depth)) { nodesByDepth.set(depth, []) } nodesByDepth.get(depth)!.push(node) }) // Calculate total value per depth for scaling const totalValueByDepth = new Map() nodesByDepth.forEach((nodes, depth) => { const total = nodes.reduce((sum, node) => sum + nodeValues.get(node.id)!, 0) totalValueByDepth.set(depth, total) }) // Position nodes const processedNodes: ProcessedNode[] = [] const nodeMap = new Map() nodesByDepth.forEach((nodes, depth) => { const depthTotal = totalValueByDepth.get(depth)! const scale = (height - nodePadding * (nodes.length + 1)) / depthTotal let currentY = nodePadding nodes.forEach((node) => { const value = nodeValues.get(node.id)! const nodeHeight = Math.max(value * scale, 5) // Minimum height const processedNode: ProcessedNode = { ...node, x: nodeWidth + depth * depthWidth, y: currentY, height: nodeHeight, value, depth, } processedNodes.push(processedNode) nodeMap.set(node.id, processedNode) currentY += nodeHeight + nodePadding }) }) const sourceOffsets = new Map() const targetOffsets = new Map() const processedLinks: ProcessedLink[] = data.links.map((link) => { const sourceNode = nodeMap.get(link.source)! const targetNode = nodeMap.get(link.target)! const sourceOffset = sourceOffsets.get(link.source) || 0 const targetOffset = targetOffsets.get(link.target) || 0 // Calculate link height proportional to value, respecting conservation const sourceScale = link.value / sourceNode.value const targetScale = link.value / targetNode.value const linkHeightAtSource = sourceScale * sourceNode.height const linkHeightAtTarget = targetScale * targetNode.height const processedLink: ProcessedLink = { ...link, sourceNode, targetNode, y0: sourceNode.y + sourceOffset, y1: targetNode.y + targetOffset, } sourceOffsets.set(link.source, sourceOffset + linkHeightAtSource) targetOffsets.set(link.target, targetOffset + linkHeightAtTarget) return processedLink }) return { nodes: processedNodes, links: processedLinks } } function generateLinkPath(link: ProcessedLink, nodeWidth: number): string { const x0 = link.sourceNode.x + nodeWidth const x1 = link.targetNode.x // Calculate the horizontal distance for curve control const curvature = 0.5 const xi = x0 + (x1 - x0) * curvature // Calculate heights at source and target respecting flow conservation const sourceScale = link.value / link.sourceNode.value const targetScale = link.value / link.targetNode.value const linkHeightAtSource = sourceScale * link.sourceNode.height const linkHeightAtTarget = targetScale * link.targetNode.height const y0Top = link.y0 const y0Bottom = y0Top + linkHeightAtSource const y1Top = link.y1 const y1Bottom = y1Top + linkHeightAtTarget // Generate path with proper control points to prevent backflow return ` M ${x0},${y0Top} C ${xi},${y0Top} ${xi},${y1Top} ${x1},${y1Top} L ${x1},${y1Bottom} C ${xi},${y1Bottom} ${xi},${y0Bottom} ${x0},${y0Bottom} Z ` } const COLOR_SCHEMES = { default: [ "hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--chart-4))", "hsl(var(--chart-5))", ], pastel: ["#FFB3BA", "#BAFFC9", "#BAE1FF", "#FFFFBA", "#FFDFBA", "#E0BBE4"], vibrant: ["#FF6B6B", "#4ECDC4", "#45B7D1", "#FFA07A", "#98D8C8", "#F7DC6F"], monochrome: ["#2C3E50", "#34495E", "#5D6D7E", "#7F8C8D", "#95A5A6", "#BDC3C7"], custom: [] as string[], } export interface SankeyDiagramHandle { exportToPNG: (filename?: string) => void exportToSVG: (filename?: string) => void } export const SankeyDiagram = forwardRef(function SankeyDiagram( { data, width = 800, height = 400, className, nodeWidth = 20, nodePadding = 20, showValues = true, valueFormat = (value: number) => value.toLocaleString(), colorScheme = "default", customColors, enableZoom = true, }, ref, ) { const svgRef = useRef(null) const containerRef = useRef(null) const [zoom, setZoom] = useState(1) const [pan, setPan] = useState({ x: 0, y: 0 }) const [isDragging, setIsDragging] = useState(false) const [dragStart, setDragStart] = useState({ x: 0, y: 0 }) const colors = colorScheme === "custom" && customColors ? customColors : COLOR_SCHEMES[colorScheme] const getNodeColor = (node: SankeyNode, index: number): string => { if (node.color) return node.color return colors[index % colors.length] } const handleZoomIn = useCallback(() => { setZoom((prev) => Math.min(prev * 1.2, 5)) }, []) const handleZoomOut = useCallback(() => { setZoom((prev) => Math.max(prev / 1.2, 0.5)) }, []) const handleResetZoom = useCallback(() => { setZoom(1) setPan({ x: 0, y: 0 }) }, []) const handleMouseDown = useCallback( (e: React.MouseEvent) => { if (!enableZoom) return setIsDragging(true) setDragStart({ x: e.clientX - pan.x, y: e.clientY - pan.y }) }, [pan, enableZoom], ) const handleMouseMove = useCallback( (e: React.MouseEvent) => { if (!isDragging || !enableZoom) return setPan({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y, }) }, [isDragging, dragStart, enableZoom], ) const handleMouseUp = useCallback(() => { setIsDragging(false) }, []) const handleWheel = useCallback( (e: React.WheelEvent) => { if (!enableZoom) return e.preventDefault() const delta = e.deltaY > 0 ? 0.9 : 1.1 setZoom((prev) => Math.max(0.5, Math.min(5, prev * delta))) }, [enableZoom], ) useImperativeHandle(ref, () => ({ exportToPNG, exportToSVG, })) const exportToPNG = (filename = "sankey-diagram.png") => { if (!svgRef.current) return const svgElement = svgRef.current const svgData = new XMLSerializer().serializeToString(svgElement) const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d") const img = new Image() canvas.width = width canvas.height = height img.crossOrigin = "anonymous" img.onload = () => { if (ctx) { ctx.fillStyle = "white" ctx.fillRect(0, 0, width, height) ctx.drawImage(img, 0, 0) canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename a.click() URL.revokeObjectURL(url) } }) } } img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))) } const exportToSVG = (filename = "sankey-diagram.svg") => { if (!svgRef.current) return const svgElement = svgRef.current const svgData = new XMLSerializer().serializeToString(svgElement) const blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename a.click() URL.revokeObjectURL(url) } const { nodes, links } = processData(data, width, height, nodeWidth, nodePadding) return ( {enableZoom && (

)}

) })7f:["$","$L86",null,{"chatId":"jeiyWpU7luZ","children":["$","$L87",null,{"data":{"@\"active-block\",\"jeiyWpU7luZ\",":{"id":"b_P0oWgMoHSWi","messageId":"j5gU39XUxRgnyxfQqPzmFM3BsqiTF9uD","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Fixing link path rendering","taskNameComplete":"Fixed link path rendering"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"jeiyWpU7luZ\",":false,"":null},"children":"$L89"}]}] 83:["$","$L70","d7j5B58dlp4",{"value":{"fallback":{"template:d7j5B58dlp4:likes":{"likeCount":578,"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":[["$","$L8a",null,{"index":0,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/bg-cms-Fi4JAwUMCsspEmeUcX8kA4aGoTn1WX.jpg","alt":"","templateCanonId":"d7j5B58dlp4","blockId":"NBotRxWoGcT"}],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":[[["$","$L8b",null,{"href":"/templates/d7j5B58dlp4","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L8b",null,{"href":"/templates/d7j5B58dlp4","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":["$","$L8b",null,{"href":"/templates/d7j5B58dlp4","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":[["$","$L75",null,{"teamId":"$undefined","authorId":"VDU6E5GkKEuGFjcUpviPM733"}],["$","$L8b",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/d7j5B58dlp4","tabIndex":-1,"prefetch":false,"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":"Cms Full Form - Admin Dashboard Tailwind Templates"}],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}],"$L8c"]}],"$L8d","$L8e"]}]]}]}]]}]]}]}] 84:["$","$L70","xYqdqPAJD3j",{"value":{"fallback":{"template:xYqdqPAJD3j:likes":{"likeCount":763,"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":[["$","$L8a",null,{"index":1,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/screenshots/xYqdqPAJD3j-SX9gtP1uBqLlPG4K6K1bJ8h2LEmeI6.jpg","alt":"","templateCanonId":"xYqdqPAJD3j","blockId":"b_fJPuLbvkjxx"}],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":[[["$","$L8b",null,{"href":"/templates/xYqdqPAJD3j","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L8b",null,{"href":"/templates/xYqdqPAJD3j","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":["$","$L8b",null,{"href":"/templates/xYqdqPAJD3j","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":[["$","$L75",null,{"teamId":"$undefined","authorId":"C3yKsQns89u8bZx4QZRguEpG"}],["$","$L8b",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/xYqdqPAJD3j","tabIndex":-1,"prefetch":false,"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":"Custom Globe Component"}],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}],"$L8f"]}],"$L90","$L91"]}]]}]}]]}]]}]}] 85:["$","$L70","SGGKgsJdrxG",{"value":{"fallback":{"template:SGGKgsJdrxG:likes":{"likeCount":231,"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":[["$","$L8a",null,{"index":2,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/Screenshot-2026-01-17-at-11.47.11%E2%80%AFPM-xWghdBisESQU1iW8nWVRQTaYA1BmnS.jpg","alt":"","templateCanonId":"SGGKgsJdrxG","blockId":"b_P6CbgTwiGyX"}],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":[[["$","$L8b",null,{"href":"/templates/SGGKgsJdrxG","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L8b",null,{"href":"/templates/SGGKgsJdrxG","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":["$","$L8b",null,{"href":"/templates/SGGKgsJdrxG","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":[["$","$L75",null,{"teamId":"$undefined","authorId":"ypJr4iEotLD2uk4Onj0zM5lt"}],["$","$L8b",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/SGGKgsJdrxG","tabIndex":-1,"prefetch":false,"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":"Tasko - Modern Task Management Dashboard"}],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}],"$L92"]}],"$L93","$L94"]}]]}]}]]}]]}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This