{"id":66460,"date":"2024-06-13T16:56:56","date_gmt":"2024-06-13T13:26:56","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/"},"modified":"2024-06-13T16:56:56","modified_gmt":"2024-06-13T13:26:56","slug":"next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/","title":{"rendered":"NEXT JS STARTER PACK &#8211; \u0627\u0646\u062c\u0645\u0646 DEV"},"content":{"rendered":"<p><\/p>\n<div data-article-id=\"1887209\" id=\"article-body\">\n<p>\u0633\u0644\u0627\u0645 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 frontend \u0645\u0646\u060c \u0627\u0645\u0631\u0648\u0632 \u0686\u0646\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0648 \u0628\u0633\u062a\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0628\u0639\u062f\u06cc js \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631\u060c \u0633\u0631\u06cc\u0639 \u062a\u0631\u060c \u0645\u0633\u062a\u0639\u062f \u062e\u0637\u0627\u060c \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0648 \u062a\u0627\u06cc\u067e \u0627\u06cc\u0645\u0646 \u0634\u0648\u062f.<\/p>\n<p>\u0628\u06cc\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645&#8230;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\" >\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%85%D8%B9%D8%B1%D9%81%DB%8C\" >\u0645\u0639\u0631\u0641\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#Tailwind_CSS\" >Tailwind CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%85%D8%AB%D8%A7%D9%84\" >\u0645\u062b\u0627\u0644<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#class%22text-center_font-sans_text-2xl_md_text-3xl_lg_text-4xl%22%3ETailwind_Card\" >class=\"text-center font-sans text-2xl md:text-3xl lg:text-4xl\"&gt;Tailwind Card<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D8%AE%D8%B1%D9%88%D8%AC%DB%8C\" >\u062e\u0631\u0648\u062c\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D8%B1%D8%A7%D8%A8%D8%B7_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C_%D8%A8%D8%B9%D8%AF%DB%8C\" >\u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0639\u062f\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%85%D8%AB%D8%A7%D9%84-2\" >\u0645\u062b\u0627\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D8%AE%D8%B1%D9%88%D8%AC%DB%8C-2\" >\u062e\u0631\u0648\u062c\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D9%81%D8%B1%D9%85_%D9%82%D9%84%D8%A7%D8%A8_%D9%88_%D8%B2%D9%88%D8%AF\" >\u0648\u0627\u06a9\u0646\u0634 \u0641\u0631\u0645 \u0642\u0644\u0627\u0628 \u0648 \u0632\u0648\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D8%A7%D8%B3%D9%86%D8%A7%D8%AF_%D9%88_%D9%85%D8%AF%D8%A7%D8%B1%DA%A9\" >\u0627\u0633\u0646\u0627\u062f \u0648 \u0645\u062f\u0627\u0631\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%85%D8%AB%D8%A7%D9%84-3\" >\u0645\u062b\u0627\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D8%AE%D8%B1%D9%88%D8%AC%DB%8C-3\" >\u062e\u0631\u0648\u062c\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%88%D8%B6%D8%B9%DB%8C%D8%AA\" >\u0648\u0636\u0639\u06cc\u062a<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%85%D8%AB%D8%A7%D9%84-4\" >\u0645\u062b\u0627\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D8%AE%D8%B1%D9%88%D8%AC%DB%8C-4\" >\u062e\u0631\u0648\u062c\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D8%A7%D8%B3%D9%84%DB%8C%D9%86%D8%AA_%D8%B2%DB%8C%D8%A8%D8%A7%D8%AA%D8%B1\" >\u0627\u0633\u0644\u06cc\u0646\u062a \u0632\u06cc\u0628\u0627\u062a\u0631<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%85%D8%B3%D8%AA%D9%86%D8%AF%D8%A7%D8%AA\" >\u0645\u0633\u062a\u0646\u062f\u0627\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/next-js-starter-pack-%d8%a7%d9%86%d8%ac%d9%85%d9%86-dev\/#%D9%85%D8%AB%D8%A7%D9%84-5\" >\u0645\u062b\u0627\u0644<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\"><\/span>\n<p>  \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%D8%B1%D9%81%DB%8C\"><\/span>\n<p>  \u0645\u0639\u0631\u0641\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062e\u0648\u0628\u060c \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0634\u0645\u0627 \u0642\u0628\u0644\u0627\u064b \u0645\u06cc\u200c\u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0627\u062f\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u0633\u0628\u06a9\u200c\u0647\u0627 \u0648 \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0631\u0645 \u0648 \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc\u060c \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c \u0627\u06cc\u062c\u0627\u062f \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a\u060c \u0648 \u063a\u06cc\u0631\u0647 \u0633\u0631 \u0648 \u06a9\u0627\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.  \u062f\u0631 \u0639\u0648\u0636\u060c \u0645\u0627 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tailwind_CSS\"><\/span>\n<p>  Tailwind CSS<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 css \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645\u060c \u0646\u0648\u0634\u062a\u0646 css \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0628\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u060c \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u060c \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647\u060c \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc css\u060c \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u06a9\u0645\u06a9\u06cc \u0648 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0622\u0634\u0641\u062a\u0647 \u0628\u0627\u0634\u062f.  \u0635\u0631\u0641\u0627\u064b \u062a\u0646\u0638\u06cc\u0645 \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc css \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0632\u0645\u0627\u0646 \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u0635\u0631\u0641 \u06a9\u0646\u062f.  Tailwind \u0646\u062c\u0627\u062a \u062f\u0647\u0646\u062f\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0627\u0633\u062a\u060c \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 CSS \u0627\u0648\u0644\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f flex\u060c grid\u060c text-center\u060c mt-10 \u0648 \u063a\u06cc\u0631\u0647 \u067e\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0647\u0631 \u0637\u0631\u062d\u06cc\u060c \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0634\u0645\u0627 \u0633\u0627\u062e\u062a\u0647 \u0634\u0648\u0646\u062f.  \u0627\u06cc\u0646 \u0633\u0631\u06cc\u0639\u060c \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u0627\u0633\u062a &#8211; \u0628\u0627 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0635\u0641\u0631.<\/p>\n<p>\u0645\u0633\u062a\u0646\u062f\u0627\u062a<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84\"><\/span>\n<p>  \u0645\u062b\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"mx-auto max-w-sm bg-gray-100 mt-20\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"rounded-lg bg-slate-900 py-3 text-slate-100\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><h2><span class=\"ez-toc-section\" id=\"class%22text-center_font-sans_text-2xl_md_text-3xl_lg_text-4xl%22%3ETailwind_Card\"><\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"text-center font-sans text-2xl md:text-3xl lg:text-4xl\"<\/span><span class=\"nt\">&gt;<\/span>Tailwind Card<span class=\"nt\"\/><span class=\"ez-toc-section-end\"><\/span><\/h2><\/span>\n  <span class=\"nt\"\/><\/p><\/span>\n  <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"bg-slate-00 text-balance p-5 font-sans text-base text-slate-900 md:text-lg\"<\/span><span class=\"nt\">&gt;<\/span>Tailwind is your savior for this problem, It utility-first CSS framework packed with classes like flex, grid, text-center, mt-10, etc that can be composed to build any design, directly in your markup. It's fast, flexible, and reliable \u2014 with zero-runtime.<span class=\"nt\"\/><\/p><\/span>\n  <span class=\"nt\"\/>\n<span class=\"nt\"\/><\/div><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AE%D8%B1%D9%88%D8%AC%DB%8C\"><\/span>\n<p>  \u062e\u0631\u0648\u062c\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3veoxv98wlkahk9o4kj7.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"729\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D8%A8%D8%B7_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C_%D8%A8%D8%B9%D8%AF%DB%8C\"><\/span>\n<p>  \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0639\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0627\u062c\u0632\u0627\u06cc \u0632\u06cc\u0628\u0627\u060c \u0628\u0633\u06cc\u0627\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u0634\u062f\u0647 \u0648 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0645\u0627\u0646\u0646\u062f \u062f\u06a9\u0645\u0647 \u0647\u0627\u060c \u0622\u06a9\u0627\u0631\u062f\u0626\u0648\u0646 \u0647\u0627\u060c \u06a9\u0627\u0631\u062a \u0647\u0627\u060c \u0641\u0647\u0631\u0633\u062a \u0647\u0627\u06cc \u0628\u0627\u0632\u0634\u0648\u060c \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc\u060c \u067e\u0627\u0648\u0631\u0642\u06cc\u060c \u0641\u0631\u0645 \u0647\u0627 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u0633\u062a\u0646\u062f\u0627\u062a<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84-2\"><\/span>\n<p>  \u0645\u062b\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code> <span class=\"o\">&lt;<\/span><span class=\"nx\">Card<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">py-4 w-fit bg-gray-200 text-slate-900<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n  <span class=\"o\">&lt;<\/span><span class=\"nx\">CardHeader<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">pb-0 pt-2 px-4 flex-col items-start<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-tiny uppercase font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Daily<\/span> <span class=\"nx\">Mix<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"nx\">small<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-default-500<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"mi\">12<\/span> <span class=\"nx\">Tracks<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/small<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"nx\">h4<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">font-bold text-large<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Frontend<\/span> <span class=\"nx\">Radio<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h4<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/CardHeader<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"o\">&lt;<\/span><span class=\"nx\">CardBody<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">overflow-visible py-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">Image<\/span>\n      <span class=\"nx\">alt<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Card background<\/span><span class=\"dl\">\"<\/span>\n      <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">object-cover rounded-xl<\/span><span class=\"dl\">\"<\/span>\n      <span class=\"nx\">src<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/nextui.org\/images\/hero-card-complete.jpeg<\/span><span class=\"dl\">\"<\/span>\n      <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">270<\/span><span class=\"p\">}<\/span>\n    <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/CardBody<\/span><span class=\"err\">&gt;\n<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Card<\/span><span class=\"err\">&gt;\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AE%D8%B1%D9%88%D8%AC%DB%8C-2\"><\/span>\n<p>  \u062e\u0631\u0648\u062c\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh4kbxc1x8fy6ka655eg4.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"652\" height=\"678\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D9%81%D8%B1%D9%85_%D9%82%D9%84%D8%A7%D8%A8_%D9%88_%D8%B2%D9%88%D8%AF\"><\/span>\n<p>  \u0648\u0627\u06a9\u0646\u0634 \u0641\u0631\u0645 \u0642\u0644\u0627\u0628 \u0648 \u0632\u0648\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\u0641\u0631\u0645 \u0642\u0644\u0627\u0628 React \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0631\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc\u060c \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648 \u0642\u0627\u0628\u0644 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627 \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0622\u0633\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<li>Zod \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0631\u0648\u0634 \u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0634\u0645\u0627 \u0628\u062f\u0648\u0646 \u0646\u06af\u0631\u0627\u0646\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u0648\u0634\u062a\u0646 \u0645\u0646\u0637\u0642 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u062f\u0627\u0631\u062f.<\/li>\n<li>@hookform\/resolvers \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062d\u0644\u200c\u06a9\u0646\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0641\u0631\u0645 \u0642\u0644\u0627\u0628 \u0648\u0627\u06a9\u0646\u0634 \u0627\u0633\u062a\u060c \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0647 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc zod \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u0641\u0631\u0645 \u0642\u0644\u0627\u0628 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D9%86%D8%A7%D8%AF_%D9%88_%D9%85%D8%AF%D8%A7%D8%B1%DA%A9\"><\/span>\n<p>  \u0627\u0633\u0646\u0627\u062f \u0648 \u0645\u062f\u0627\u0631\u06a9<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0634\u06a9\u0644 \u0642\u0644\u0627\u0628 \u0648\u0627\u06a9\u0646\u0634<br \/>\u0632\u0648\u062f<br \/>@hookform\/resolvers<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84-3\"><\/span>\n<p>  \u0645\u062b\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">FieldValues<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useForm<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-hook-form<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">zodResolver<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@hookform\/resolvers\/zod<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">z<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">zod<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ NEXT UI Components<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Modal<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ModalContent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ModalHeader<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ModalBody<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ModalFooter<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useDisclosure<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@nextui-org\/modal<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Button<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@nextui-org\/button<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">schema<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"nf\">object<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">z<\/span><span class=\"p\">.<\/span><span class=\"nf\">string<\/span><span class=\"p\">().<\/span><span class=\"nf\">min<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Name is required<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}),<\/span>\n  <span class=\"na\">age<\/span><span class=\"p\">:<\/span> <span class=\"nx\">z<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">number<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">invalid_type_error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Age must be a number<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">})<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">positive<\/span><span class=\"p\">({<\/span> <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Age must be positive<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">})<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">gt<\/span><span class=\"p\">(<\/span><span class=\"mi\">18<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Age should be greater than 18<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}),<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Form<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">register<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">handleSubmit<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">reset<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">watch<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">formState<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">errors<\/span><span class=\"p\">,<\/span> <span class=\"nx\">isSubmitSuccessful<\/span> <span class=\"p\">},<\/span>\n  <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useForm<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">all<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">resolver<\/span><span class=\"p\">:<\/span> <span class=\"nf\">zodResolver<\/span><span class=\"p\">(<\/span><span class=\"nx\">schema<\/span><span class=\"p\">),<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">onSubmit<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FieldValues<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">isSubmitSuccessful<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">onOpen<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">name<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">watch<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">name<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ NEXT UI MODAL STATES<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">isOpen<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onOpen<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onOpenChange<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useDisclosure<\/span><span class=\"p\">();<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">grid justify-center<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">form<\/span>\n        <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">grid gap-y-4 p-10 rounded-xl border border-white<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"nx\">onSubmit<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nf\">handleSubmit<\/span><span class=\"p\">(<\/span><span class=\"nx\">onSubmit<\/span><span class=\"p\">)}<\/span>\n      <span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-xl md:text-3xl font-sans font-bold text-center<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">USER<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">min-h-10 min-w-72<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full px-4 py-2 border border-slate-700 rounded-lg<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"p\">{...<\/span><span class=\"nf\">register<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">name<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)}<\/span>\n            <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Name<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">\/&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">?.<\/span><span class=\"nx\">message<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-red-500<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">?.<\/span><span class=\"nx\">name<\/span><span class=\"p\">?.<\/span><span class=\"nx\">message<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">string<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">}\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mb-6<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full px-4 py-2 border border-slate-700 rounded-lg<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">number<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Age<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"p\">{...<\/span><span class=\"nf\">register<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">age<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">valueAsNumber<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">})}<\/span>\n          <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"p\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">age<\/span><span class=\"p\">?.<\/span><span class=\"nx\">message<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-red-500<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">?.<\/span><span class=\"nx\">age<\/span><span class=\"p\">?.<\/span><span class=\"nx\">message<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">string<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">}\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">px-4 py-2 bg-blue-500 text-white w-fit rounded-lg cursor-pointer<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">submit<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"o\">\/&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/form<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"p\">{<\/span><span class=\"cm\">\/* NEXT UI MODAL *\/<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Modal<\/span>\n        <span class=\"nx\">isOpen<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">isOpen<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">onOpenChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onOpenChange<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">hideCloseButton<\/span>\n      <span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">ModalContent<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">font-sans<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{(<\/span><span class=\"nx\">onClose<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n            <span class=\"o\">&lt;&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">ModalHeader<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex flex-col gap-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Hey<\/span> <span class=\"p\">{<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/ModalHeader<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">ModalBody<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-2xl font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Thank<\/span> <span class=\"nx\">you<\/span> <span class=\"k\">for<\/span> <span class=\"nx\">filling<\/span> <span class=\"nx\">out<\/span> <span class=\"nx\">the<\/span> <span class=\"nx\">form<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ModalBody<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">ModalFooter<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Button<\/span>\n                  <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">danger<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">variant<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">solid<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">onPress<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n                    <span class=\"nf\">onClose<\/span><span class=\"p\">();<\/span>\n                    <span class=\"nf\">reset<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ Form reset<\/span>\n                  <span class=\"p\">}}<\/span>\n                <span class=\"o\">&gt;<\/span>\n                  <span class=\"nx\">Close<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Button<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ModalFooter<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"p\">)}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ModalContent<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Modal<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Form<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AE%D8%B1%D9%88%D8%AC%DB%8C-3\"><\/span>\n<p>  \u062e\u0631\u0648\u062c\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4ooa9vryuirkwgzvnftp.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"723\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%D8%B6%D8%B9%DB%8C%D8%AA\"><\/span>\n<p>  \u0648\u0636\u0639\u06cc\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0627\u0633\u0627\u0633\u0627\u064b \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a\u06cc \u0627\u0633\u062a \u062f\u0631\u0633\u062a \u0645\u0627\u0646\u0646\u062f redux \u0627\u0645\u0627 \u0648\u0632\u0646 \u0633\u0628\u06a9 \u062a\u0631\u060c \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u062a\u0631\u060c \u0633\u0627\u062f\u0647 \u0648 \u0633\u0627\u062f\u0647 \u062a\u0631.<\/p>\n<p>\u0645\u0633\u062a\u0646\u062f\u0627\u062a<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84-4\"><\/span>\n<p>  \u0645\u062b\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ store.ts<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">create<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">zustand<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">persist<\/span><span class=\"p\">,<\/span> <span class=\"nx\">createJSONStorage<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">zustand\/middleware<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ Define the state and action types<\/span>\n<span class=\"kr\">interface<\/span> <span class=\"nx\">State<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">loggedIn<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setLoggedIn<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">loggedIn<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Create the Zustand store with type definitions and persistence<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">useStore<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">create<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">State<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()(<\/span>\n  <span class=\"nf\">persist<\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">(<\/span><span class=\"kd\">set<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n      <span class=\"na\">loggedIn<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ use false for boolean<\/span>\n      <span class=\"na\">setLoggedIn<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">loggedIn<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">set<\/span><span class=\"p\">({<\/span> <span class=\"nx\">loggedIn<\/span> <span class=\"p\">}),<\/span>\n    <span class=\"p\">}),<\/span>\n    <span class=\"p\">{<\/span>\n      <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">food-storage<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ name of the item in the storage (must be unique)<\/span>\n      <span class=\"na\">storage<\/span><span class=\"p\">:<\/span> <span class=\"nf\">createJSONStorage<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">sessionStorage<\/span><span class=\"p\">),<\/span> <span class=\"c1\">\/\/ (optional) by default, 'localStorage' is used<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">),<\/span>\n<span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ App.tsx<\/span>\n<span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useStore<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/store\/useStore<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Zustand<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">loggedIn<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useStore<\/span><span class=\"p\">((<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">loggedIn<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">setLoggedIn<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useStore<\/span><span class=\"p\">((<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">setLoggedIn<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">bg-gray-900 text-white min-h-[calc(100vh-64px)] p-8<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">section<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex flex-col items-center gap-10<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex items-center gap-6<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">h3<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">User<\/span> <span class=\"o\">-<\/span> <span class=\"p\">{<\/span><span class=\"nx\">loggedIn<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Logged In<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Logged Out<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h3<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`px-4 py-2 inline-block rounded-lg text-white <\/span><span class=\"p\">${<\/span><span class=\"nx\">loggedIn<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">bg-red-500<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">bg-green-500<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setLoggedIn<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">loggedIn<\/span><span class=\"p\">)}<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">loggedIn<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Logout<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Login<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-lg font-sans mb-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Login<\/span> <span class=\"nx\">and<\/span> <span class=\"nx\">refresh<\/span> <span class=\"nx\">the<\/span> <span class=\"nx\">page<\/span><span class=\"p\">,<\/span> <span class=\"nx\">the<\/span> <span class=\"nx\">state<\/span> <span class=\"nx\">will<\/span> <span class=\"nx\">persist<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/section<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Zustand<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AE%D8%B1%D9%88%D8%AC%DB%8C-4\"><\/span>\n<p>  \u062e\u0631\u0648\u062c\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvuj328kidrx9t11afhsn.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"297\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl8a1wq4bimejmzgz9mdb.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"303\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D9%84%DB%8C%D9%86%D8%AA_%D8%B2%DB%8C%D8%A8%D8%A7%D8%AA%D8%B1\"><\/span>\n<p>  \u0627\u0633\u0644\u06cc\u0646\u062a \u0632\u06cc\u0628\u0627\u062a\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Prettier \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0642\u0627\u0644\u0628\u200c\u0628\u0646\u062f\u06cc \u06a9\u062f \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0645\u0633\u0627\u0626\u0644 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0642\u0627\u0644\u0628\u200c\u0628\u0646\u062f\u06cc \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u062d\u0644 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0642\u0627\u0644\u0628\u200c\u0628\u0646\u062f\u06cc \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u0632 eslint \u0628\u0631\u0627\u06cc \u06cc\u0627\u0641\u062a\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc \u067e\u0631\u062f\u0647\u200c\u0628\u0646\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0646\u0642\u0644\u200c\u0642\u0648\u0644\u200c\u0647\u0627\u06cc \u062a\u06a9 \u06cc\u0627 \u062f\u0648\u062a\u0627\u06cc\u06cc\u060c 100 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u062f\u0631 \u0647\u0631 \u062e\u0637\u060c \u0645\u062a\u063a\u06cc\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0634\u062f\u0647 \u0648 \u063a\u06cc\u0631\u0647. \u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0627\u06cc \u0631\u0641\u0639 \u0627\u0634\u06a9\u0627\u0644\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u06cc\u0646 \u0646\u0648\u0639 \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u0628\u0631\u0637\u0631\u0641 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B3%D8%AA%D9%86%D8%AF%D8%A7%D8%AA\"><\/span>\n<p>  \u0645\u0633\u062a\u0646\u062f\u0627\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0632\u06cc\u0628\u0627\u062a\u0631<br \/>\u0627\u0633\u0644\u06cc\u0646\u062a<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84-5\"><\/span>\n<p>  \u0645\u062b\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Focbtlqyb8fa5ccuycedn.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"129\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ficn6lh65tpmi4jrioswk.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"228\" title=\"\"><\/p>\n<p>\u0647\u0645\u06cc\u0646 \u0627\u0633\u062a \u0648 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u06cc\u062f \u0645\u062a\u0634\u06a9\u0631\u0645<br \/>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0645\u0646 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f &#8211;<br \/>\u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645 &#8211; https:\/\/www.instagram.com\/supremacism__shubh\/<br \/>\u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646 &#8211; https:\/\/www.linkedin.com\/in\/shubham-tiwari-b7544b193\/<br \/>\u0627\u06cc\u0645\u06cc\u0644 &#8211; shubhmtiwri00@gmail.com<\/p>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0644\u06cc\u0646\u06a9 \u0632\u06cc\u0631 \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u06cc\u062f \u0628\u0627 \u062a\u0634\u06a9\u0631\ud83d\udc47\ud83d\udc47<br \/>\u2615 &#8211;> https:\/\/www.buymeacoffee.com\/waaduheck <--<\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/www.instagram.com\/embed.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0633\u0644\u0627\u0645 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 frontend \u0645\u0646\u060c \u0627\u0645\u0631\u0648\u0632 \u0686\u0646\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0648 \u0628\u0633\u062a\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0628\u0639\u062f\u06cc js \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631\u060c \u0633\u0631\u06cc\u0639 \u062a\u0631\u060c \u0645\u0633\u062a\u0639\u062f \u062e\u0637\u0627\u060c \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0648 \u062a\u0627\u06cc\u067e \u0627\u06cc\u0645\u0646 \u0634\u0648\u062f. \u0628\u06cc\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645&#8230; \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628 \u0645\u0639\u0631\u0641\u06cc \u062e\u0648\u0628\u060c \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0634\u0645\u0627 \u0642\u0628\u0644\u0627\u064b \u0645\u06cc\u200c\u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u06cc\u06a9 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":66461,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media.dev.to\/cdn-cgi\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1rqctgz05o170g3nv58d.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-66460","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/66460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=66460"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/66460\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/66461"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=66460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=66460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=66460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}