{"id":89660,"date":"2024-12-24T15:13:17","date_gmt":"2024-12-24T11:43:17","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/"},"modified":"2024-12-24T15:13:17","modified_gmt":"2024-12-24T11:43:17","slug":"%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/","title":{"rendered":"\u0633\u0627\u062e\u062a Slack Clone \u0628\u0627 Next.js \u0648 TailwindCSS &#8211; \u0642\u0633\u0645\u062a \u0627\u0648\u0644"},"content":{"rendered":"<div data-article-id=\"2172665\" id=\"article-body\">\n<p>\u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0645\u0648\u0641\u0642\u06cc\u062a \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a \u0648 \u0627\u06cc\u062c\u0627\u062f \u0627\u0628\u0632\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0647 \u062a\u06cc\u0645 \u0647\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0628\u0647\u062a\u0631 \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0648 \u067e\u0627\u062f\u0627\u0634 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627\u0634\u062f. \u0628\u0627 \u062a\u0639\u062f\u0627\u062f \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0632 \u0627\u0641\u0631\u0627\u062f \u06a9\u0647 \u0627\u0632 \u062e\u0627\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u06cc \u06a9\u0647 \u0628\u0647 \u0647\u0645\u0647 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0627\u0632 \u0637\u0631\u06cc\u0642 \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc\u060c \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0648 \u0686\u062a\u200c\u0647\u0627\u06cc \u06af\u0631\u0648\u0647\u06cc \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u0646\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u0641\u0627\u0648\u062a \u0628\u0632\u0631\u06af\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0633\u0647 \u0642\u0633\u0645\u062a\u06cc\u060c \u0645\u0627 \u06cc\u06a9 \u06a9\u0644\u0648\u0646 Slack \u062e\u0648\u0627\u0647\u06cc\u0645 \u0633\u0627\u062e\u062a &#8211; \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0647 \u062a\u06cc\u0645 \u0647\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0628\u0627 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u0641\u0648\u0631\u06cc\u060c \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0648 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627 \u062f\u0631 \u062a\u0645\u0627\u0633 \u0628\u0627\u0634\u0646\u062f. \u0645\u0627 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React (Next.js)\u060c TailwindCSS\u060c Prisma \u0648 Stream SDK \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0648\u0644\u060c \u0628\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0648 \u0633\u0627\u062e\u062a\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0635\u0641\u062d\u0647 \u06a9\u0627\u0646\u0627\u0644\u060c \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u0628\u062e\u0634 \u062f\u0648\u0645\u060c \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc \u0648 \u06a9\u0627\u0646\u0627\u0644\u200c\u0647\u0627\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Stream React Chat SDK \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u062f\u0631 \u0642\u0633\u0645\u062a \u0633\u0648\u0645\u060c \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc (\u0645\u0627\u0646\u0646\u062f Slack Huddles) \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Stream React Video \u0648 Audio SDK \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0622\u062e\u0631\u06cc\u0646 \u0646\u06a9\u0627\u062a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647\u060c \u0634\u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0642\u0648\u06cc \u0633\u0627\u062e\u062a\u0647 \u0627\u06cc\u062f \u06a9\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0633\u0627\u0633\u06cc Slack \u0631\u0627 \u0645\u0646\u0639\u06a9\u0633 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u06af\u0627\u0647\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc \u0628\u0647 \u0638\u0627\u0647\u0631 \u0645\u062d\u0635\u0648\u0644 \u0646\u0647\u0627\u06cc\u06cc \u062f\u0627\u0631\u06cc\u0645:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=NoFzCn5sbts\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=NoFzCn5sbts<\/a><br \/>\n<\/iframe>\n<\/p>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0633\u062e\u0647 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0632\u0646\u062f\u0647 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u06a9\u062f \u0645\u0646\u0628\u0639 \u06a9\u0627\u0645\u0644 \u062f\u0631 GitHub \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645!<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 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=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><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\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/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\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<\/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\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<\/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\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D9%BE%D8%B1%DB%8C%D8%B3%D9%85%D8%A7_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u067e\u0631\u06cc\u0633\u0645\u0627 \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D9%86%D8%B5%D8%A8_%D9%BE%D8%B1%DB%8C%D8%B3%D9%85%D8%A7\" >\u0646\u0635\u0628 \u067e\u0631\u06cc\u0633\u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%B7%D8%B1%D8%AD%D9%88%D8%A7%D8%B1%D9%87_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D8%A7%D8%AC%D8%B1%D8%A7_Prisma_Migrations\" >\u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 Prisma Migrations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Prisma_Client_%D8%AF%D8%B1_%DA%A9%D8%AF\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Prisma Client \u062f\u0631 \u06a9\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D8%A8%D8%A7_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF\" >\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u06a9\u0627\u0631\u0645\u0646\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u06a9\u0627\u0631\u0645\u0646\u062f \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DB%8C%DA%A9_%D8%AD%D8%B3%D8%A7%D8%A8_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0645\u0646\u062f<\/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\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF\" >\u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 \u06a9\u0627\u0631\u0645\u0646\u062f<\/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\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D9%86%D8%B5%D8%A8_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF_%D8%AF%D8%B1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B4%D9%85%D8%A7\" >\u0646\u0635\u0628 \u06a9\u0627\u0631\u0645\u0646\u062f \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B5%D9%81%D8%AD%D8%A7%D8%AA_%D8%AB%D8%A8%D8%AA_%D9%86%D8%A7%D9%85_%D9%88_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\" >\u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0627\u062a \u062b\u0628\u062a \u0646\u0627\u0645 \u0648 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AF%D8%A7%D8%B4%D8%A8%D9%88%D8%B1%D8%AF_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\" >\u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%86%D9%88%D8%A7%D8%B1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C\" >\u0627\u06cc\u062c\u0627\u062f \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%84%DB%8C%D8%B3%D8%AA_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\" >\u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0644\u06cc\u0633\u062a \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D8%A7%D8%AF%D9%86_%D8%A2%D9%86_%D9%87%D9%85%D9%87_%D8%A8%D8%A7_%D9%87%D9%85\" >\u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0622\u0646 \u0647\u0645\u0647 \u0628\u0627 \u0647\u0645<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B3%D8%A7%D8%AE%D8%AA_Create_Workspace_API\" >\u0633\u0627\u062e\u062a Create Workspace API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B5%D9%81%D8%AD%D9%87_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\" >\u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C_%D8%B4%D9%85%D8%A7\" >\u0627\u06cc\u062c\u0627\u062f \u0627\u0648\u0644\u06cc\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0634\u0645\u0627<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A7%D8%B3%D8%AA%D8%B1%DB%8C%D9%85_%D8%AF%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%B4%D9%85%D8%A7\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0633\u062a\u0631\u06cc\u0645 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%D8%B3%D8%AA%D8%B1%DB%8C%D9%85_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0627\u0633\u062a\u0631\u06cc\u0645 \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%AD%D8%B3%D8%A7%D8%A8_%D8%AC%D8%B1%DB%8C%D8%A7%D9%86%DB%8C_%D8%B4%D9%85%D8%A7\" >\u0627\u06cc\u062c\u0627\u062f \u062d\u0633\u0627\u0628 \u062c\u0631\u06cc\u0627\u0646\u06cc \u0634\u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AC%D8%B1%DB%8C%D8%A7%D9%86_%D8%AC%D8%AF%DB%8C%D8%AF\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u0631\u06cc\u0627\u0646 \u062c\u062f\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D9%85%D8%AC%D9%88%D8%B2%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\" >\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u062c\u0648\u0632\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D9%86%D8%B5%D8%A8_Stream_SDK\" >\u0646\u0635\u0628 Stream SDK<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D9%87%D9%85%DA%AF%D8%A7%D9%85_%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF_%D8%A8%D8%A7_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%D8%B3%D8%AA%D8%B1%DB%8C%D9%85_%D8%B4%D9%85%D8%A7\" >\u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u06a9\u0627\u0631\u0645\u0646\u062f \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0631\u06cc\u0645 \u0634\u0645\u0627<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B3%D8%A7%D8%AE%D8%AA%D9%86_%D9%87%D8%A7%D8%A8_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\" >\u0633\u0627\u062e\u062a\u0646 \u0647\u0627\u0628 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_Layout\" >\u0627\u06cc\u062c\u0627\u062f Layout<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%85%D8%B3%DB%8C%D8%B1_API_Token\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0633\u06cc\u0631 API Token<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%AC%D8%B2%D8%A1_%D8%B3%D9%88%D8%A6%DB%8C%DA%86%D8%B1_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\" >\u062c\u0632\u0621 \u0633\u0648\u0626\u06cc\u0686\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D9%85%D9%88%D9%84%D9%81%D9%87_%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\" >\u0633\u0627\u062e\u062a \u0645\u0648\u0644\u0641\u0647 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%85%D9%88%D9%84%D9%81%D9%87_%D9%BE%DB%8C%D8%B4_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%DA%A9%D8%A7%D9%86%D8%A7%D9%84\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0648\u0644\u0641\u0647 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0646\u0627\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%86%D9%88%D8%A7%D8%B1_%DA%A9%D9%86%D8%A7%D8%B1%DB%8C\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%85%D8%B3%DB%8C%D8%B1_API_Workspace\" >\u0627\u06cc\u062c\u0627\u062f \u0645\u0633\u06cc\u0631 API Workspace<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B5%D9%81%D8%AD%D9%87_%DA%A9%D8%A7%D9%86%D8%A7%D9%84\" >\u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0647 \u06a9\u0627\u0646\u0627\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0635\u0641\u062d\u0647 \u0645\u0634\u062a\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B5%D9%81%D8%AD%D9%87_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\" >\u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-slack-clone-%d8%a8%d8%a7-next-js-%d9%88-tailwindcss-%d9%82%d8%b3%d9%85%d8%aa-%d8%a7%d9%88%d9%84\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\"><\/span>\n<p>  <strong>\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0698\u0647\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n<ul>\n<li>\n<p><strong>\u062f\u0631\u06a9 \u0627\u0648\u0644\u06cc\u0647 React<\/strong>: \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0633\u0627\u062e\u062a \u0627\u062c\u0632\u0627\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0648 \u062f\u0631\u06a9 \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u062c\u0632\u0627 \u0631\u0627\u062d\u062a \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>Node.js \u0648 npm<\/strong>: \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 Node.js \u0648 npm (Node Package Manager) \u0631\u0648\u06cc \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0628\u0627\u0634\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627 \u0648 \u0633\u0627\u062e\u062a \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0645\u0647\u0645 \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p><strong>\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 TypeScript\u060c Next.js \u0648 TailwindCSS Basics<\/strong>: \u0645\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0632\u06cc\u0627\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u0627\u0646\u0633\u062a\u0646 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0622\u0646 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87\"><\/span>\n<p>  <strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645. \u0645\u0627 \u0628\u0627 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u06a9\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0627\u0633\u062a \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0647 \u0645\u0627 \u062f\u0631 \u0634\u0631\u0648\u0639 \u0633\u0631\u06cc\u0639 \u06a9\u0645\u06a9 \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"c\"># Clone the repository<\/span>\ngit clone https:\/\/github.com\/TropicolX\/slack-clone.git\n\n<span class=\"c\"># Navigate into the project directory<\/span>\n<span class=\"nb\">cd <\/span>slack-clone\n\n<span class=\"c\"># Check out the starter branch<\/span>\ngit checkout starter\n\n<span class=\"c\"># Install the dependencies<\/span>\nnpm <span class=\"nb\">install<\/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<p>\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0628\u0627\u0634\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2nhi1vybjhb4ma1ffq5g.png\" alt=\"\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647\" loading=\"lazy\" width=\"416\" height=\"486\" title=\"\"><\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0647 \u06af\u0648\u0646\u0647 \u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u06a9\u062f \u0631\u0627 \u0645\u0631\u062a\u0628 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0622\u0646 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\n<p><strong>\u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627<\/strong>: \u0627\u06cc\u0646 \u067e\u0648\u0634\u0647 \u062f\u0627\u0631\u0627\u06cc \u062a\u0645\u0627\u0645 \u0642\u0633\u0645\u062a \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u0622\u06cc\u06a9\u0648\u0646 \u0647\u0627\u060c \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0648 \u0633\u0627\u06cc\u0631 \u0627\u062c\u0632\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p><strong>\u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0647\u0648\u06a9\u0633<\/strong>: \u067e\u0648\u0634\u0647 hooks \u062f\u0627\u0631\u0627\u06cc \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc React \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a <code>useClickOutside<\/code>\u060c \u06a9\u0647 \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u062e\u0627\u0635 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0641\u0647\u0631\u0633\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc Lib<\/strong>: \u0627\u06cc\u0646 \u067e\u0648\u0634\u0647 \u0634\u0627\u0645\u0644 \u062a\u0648\u0627\u0628\u0639 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0645\u0627\u0646\u0646\u062f <code>utils.ts<\/code> \u06a9\u0647 \u0648\u0638\u0627\u06cc\u0641 \u0645\u0634\u062a\u0631\u06a9 \u0631\u0627 \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  <strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u06cc \u0645\u0634\u0627\u0628\u0647 Slack\u060c \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc\u060c \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627\u060c \u0627\u0639\u0636\u0627 \u0648 \u062f\u0639\u0648\u062a \u0646\u0627\u0645\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0645\u0627 \u0627\u0632 Prisma \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u062a\u0639\u0627\u0645\u0644 \u0622\u0633\u0627\u0646 \u0628\u0627 \u0627\u06cc\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%D8%B1%DB%8C%D8%B3%D9%85%D8%A7_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  <strong>\u067e\u0631\u06cc\u0633\u0645\u0627 \u0686\u06cc\u0633\u062a\u061f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Prisma \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 ORM (\u0646\u06af\u0627\u0634\u062a \u0634\u06cc-\u0631\u0627\u0628\u0637\u0647 \u0627\u06cc) \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645 \u0648 \u067e\u0631\u0633 \u0648 \u062c\u0648\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645. \u0628\u0627 Prisma\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0633\u062a\u0642\u06cc\u0645 SQL\u060c \u0639\u0645\u0644\u06cc\u0627\u062a \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f\u060c \u06a9\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0633\u0627\u062f\u0647 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8_%D9%BE%D8%B1%DB%8C%D8%B3%D9%85%D8%A7\"><\/span>\n<p>  <strong>\u0646\u0635\u0628 \u067e\u0631\u06cc\u0633\u0645\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0646\u0635\u0628 Prisma \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0622\u0646 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install <\/span>prisma <span class=\"nt\">--save-dev<\/span>\nnpm <span class=\"nb\">install<\/span> @prisma\/client sqlite3\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<p>\u0631\u0627 <code>@prisma\/client<\/code> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0647 \u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0628\u0627 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0648 <code>sqlite3<\/code> \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0646\u0635\u0628\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f Prisma \u0631\u0627 \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx prisma init\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<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 Prisma \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06cc\u06a9 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <code>.env<\/code> \u0641\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0627\u062a\u0635\u0627\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%B7%D8%B1%D8%AD%D9%88%D8%A7%D8%B1%D9%87_%D9%BE%D8%A7%DB%8C%DA%AF%D8%A7%D9%87_%D8%AF%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  <strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0637\u0631\u062d \u0648\u0627\u0631\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645. \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>prisma\/schema.prisma<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">datasource<\/span> <span class=\"nx\">db<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">provider<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">sqlite<\/span><span class=\"dl\">\"<\/span>\n  <span class=\"nx\">url<\/span>      <span class=\"o\">=<\/span> <span class=\"nf\">env<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">DATABASE_URL<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">generator<\/span> <span class=\"nx\">client<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">provider<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">prisma-client-js<\/span><span class=\"dl\">\"<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">model<\/span> <span class=\"nx\">Workspace<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">id<\/span>           <span class=\"nb\">String<\/span>       <span class=\"p\">@<\/span><span class=\"nd\">id<\/span> <span class=\"p\">@<\/span><span class=\"nd\">default<\/span><span class=\"p\">(<\/span><span class=\"nf\">cuid<\/span><span class=\"p\">())<\/span>\n  <span class=\"nx\">name<\/span>         <span class=\"nb\">String<\/span>\n  <span class=\"nx\">image<\/span>        <span class=\"nb\">String<\/span><span class=\"p\">?<\/span>\n  <span class=\"nx\">ownerId<\/span>      <span class=\"nb\">String<\/span> \n  <span class=\"nx\">channels<\/span>     <span class=\"nx\">Channel<\/span><span class=\"p\">[]<\/span>    \n  <span class=\"nx\">memberships<\/span>  <span class=\"nx\">Membership<\/span><span class=\"p\">[]<\/span>\n  <span class=\"nx\">invitations<\/span> <span class=\"nx\">Invitation<\/span><span class=\"p\">[]<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">model<\/span> <span class=\"nx\">Channel<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">id<\/span>           <span class=\"nb\">String<\/span>       <span class=\"p\">@<\/span><span class=\"nd\">id<\/span> <span class=\"p\">@<\/span><span class=\"nd\">default<\/span><span class=\"p\">(<\/span><span class=\"nf\">cuid<\/span><span class=\"p\">())<\/span>\n  <span class=\"nx\">name<\/span>         <span class=\"nb\">String<\/span>\n  <span class=\"nx\">description<\/span>  <span class=\"nb\">String<\/span><span class=\"p\">?<\/span>\n  <span class=\"nx\">workspaceId<\/span>  <span class=\"nb\">String<\/span>\n  <span class=\"nx\">workspace<\/span>    <span class=\"nx\">Workspace<\/span>    <span class=\"p\">@<\/span><span class=\"nd\">relation<\/span><span class=\"p\">(<\/span><span class=\"nx\">fields<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">],<\/span> <span class=\"nx\">references<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">])<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">model<\/span> <span class=\"nx\">Membership<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">id<\/span>           <span class=\"nb\">String<\/span>       <span class=\"p\">@<\/span><span class=\"nd\">id<\/span> <span class=\"p\">@<\/span><span class=\"nd\">default<\/span><span class=\"p\">(<\/span><span class=\"nf\">cuid<\/span><span class=\"p\">())<\/span>\n  <span class=\"nx\">userId<\/span>       <span class=\"nb\">String<\/span>\n  <span class=\"nx\">email<\/span>        <span class=\"nb\">String<\/span>\n  <span class=\"nx\">workspaceId<\/span>  <span class=\"nb\">String<\/span>\n  <span class=\"nx\">workspace<\/span>    <span class=\"nx\">Workspace<\/span> <span class=\"p\">@<\/span><span class=\"nd\">relation<\/span><span class=\"p\">(<\/span><span class=\"nx\">fields<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">],<\/span> <span class=\"nx\">references<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">])<\/span>\n  <span class=\"nx\">role<\/span>         <span class=\"nb\">String<\/span><span class=\"p\">?<\/span>      <span class=\"p\">@<\/span><span class=\"nd\">default<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">member<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"nx\">joinedAt<\/span>     <span class=\"nx\">DateTime<\/span><span class=\"p\">?<\/span>    <span class=\"p\">@<\/span><span class=\"nd\">default<\/span><span class=\"p\">(<\/span><span class=\"nf\">now<\/span><span class=\"p\">())<\/span>\n  <span class=\"p\">@@<\/span><span class=\"nd\">unique<\/span><span class=\"p\">([<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">workspaceId<\/span><span class=\"p\">])<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">model<\/span> <span class=\"nx\">Invitation<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">id<\/span>            <span class=\"nx\">Int<\/span>        <span class=\"p\">@<\/span><span class=\"nd\">id<\/span> <span class=\"p\">@<\/span><span class=\"nd\">default<\/span><span class=\"p\">(<\/span><span class=\"nf\">autoincrement<\/span><span class=\"p\">())<\/span>\n  <span class=\"nx\">email<\/span>         <span class=\"nb\">String<\/span>\n  <span class=\"nx\">token<\/span>         <span class=\"nb\">String<\/span>     <span class=\"p\">@<\/span><span class=\"nd\">unique<\/span>\n  <span class=\"nx\">workspaceId<\/span>   <span class=\"nb\">String<\/span>\n  <span class=\"nx\">workspace<\/span>     <span class=\"nx\">Workspace<\/span>  <span class=\"p\">@<\/span><span class=\"nd\">relation<\/span><span class=\"p\">(<\/span><span class=\"nx\">fields<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">],<\/span> <span class=\"nx\">references<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">])<\/span>\n  <span class=\"nx\">invitedById<\/span>   <span class=\"nb\">String<\/span>\n  <span class=\"nx\">acceptedById<\/span>  <span class=\"nb\">String<\/span><span class=\"p\">?<\/span>\n  <span class=\"nx\">createdAt<\/span>     <span class=\"nx\">DateTime<\/span>   <span class=\"p\">@<\/span><span class=\"nd\">default<\/span><span class=\"p\">(<\/span><span class=\"nf\">now<\/span><span class=\"p\">())<\/span>\n  <span class=\"nx\">acceptedAt<\/span>    <span class=\"nx\">DateTime<\/span><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<p>\u0627\u06cc\u0646 \u0637\u0631\u062d\u060c \u0631\u0648\u0627\u0628\u0637 \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062f\u0631 \u06a9\u0644\u0648\u0646 Slack \u0645\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u0645\u062f\u0644 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li>\n<p><strong>\u0641\u0636\u0627\u06cc \u06a9\u0627\u0631<\/strong>: \u0646\u0645\u0627\u06cc\u0627\u0646\u06af\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0641\u0631\u0627\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631 \u0622\u0646 \u0647\u0645\u06a9\u0627\u0631\u06cc \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u0645\u0627\u0646\u0646\u062f \u0646\u0627\u0645 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc\u060c \u062a\u0635\u0648\u06cc\u0631\u060c \u0648 \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0646\u0627\u0644\u200c\u0647\u0627\u060c \u0639\u0636\u0648\u06cc\u062a\u200c\u0647\u0627 \u0648 \u062f\u0639\u0648\u062a\u200c\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0622\u0646 \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u0627\u0646\u0627\u0644<\/strong>: \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u06cc\u06a9 \u06a9\u0627\u0646\u0627\u0644 \u062f\u0631 \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0633\u062a. \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627 \u062c\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u062d\u062b \u0647\u0627\u06cc \u062e\u0627\u0635\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f \u0648 \u0628\u0647 \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062e\u0627\u0635 \u062a\u0639\u0644\u0642 \u062f\u0627\u0631\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0639\u0636\u0648\u06cc\u062a<\/strong>: \u067e\u06cc\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u06a9\u062f\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0647\u0633\u062a\u0646\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u062c\u0632\u0626\u06cc\u0627\u062a\u06cc \u0645\u0627\u0646\u0646\u062f \u0634\u0646\u0627\u0633\u0647 \u06a9\u0627\u0631\u0628\u0631\u060c \u0627\u06cc\u0645\u06cc\u0644\u060c \u0646\u0642\u0634 (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0639\u0636\u0648)\u060c \u0648 \u0632\u0645\u0627\u0646 \u067e\u06cc\u0648\u0633\u062a\u0646 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p><strong>\u062f\u0639\u0648\u062a\u0646\u0627\u0645\u0647<\/strong>: \u062f\u0639\u0648\u062a\u200c\u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0648\u0633\u062a\u0646 \u0628\u0647 \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0639\u0648\u062a\u200c\u0634\u0648\u0646\u062f\u0647 \u0631\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u06cc\u06a9 \u0631\u0645\u0632 \u0645\u0646\u062d\u0635\u0631\u0628\u0641\u0631\u062f \u0628\u0631\u0627\u06cc \u062f\u0639\u0648\u062a\u060c \u0627\u06cc\u0646\u06a9\u0647 \u0686\u0647 \u06a9\u0633\u06cc \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0639\u0648\u062a \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a \u0648 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u062f\u0639\u0648\u062a \u067e\u0630\u06cc\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<\/li>\n<\/ul>\n<p>\u0647\u0631 \u0645\u062f\u0644 \u062c\u0632\u0626\u06cc\u0627\u062a \u0648 \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u062e\u0627\u0635 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u062f\u060c \u06a9\u0647 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u060c \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u062a\u0635\u0627\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645. \u0628\u0647 \u0633\u0645\u062a \u062e\u0648\u062f \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u062f <code>.env<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"nx\">DATABASE_URL<\/span><span class=\"o\">=<\/span><span class=\"nx\">file<\/span><span class=\"p\">:.<\/span><span class=\"o\">\/<\/span><span class=\"nx\">dev<\/span><span class=\"p\">.<\/span><span class=\"nx\">db<\/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<p>\u0627\u06cc\u0646 SQLite \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0645\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0645\u062d\u0644\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u062d\u0627\u0644 \u062a\u0648\u0644\u06cc\u062f \u0628\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0648\u06cc\u062f\u060c \u0627\u0645\u0627 SQLite \u0628\u0631\u0627\u06cc \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u0632\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647 \u0633\u0631\u06cc\u0639 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D8%A7%D8%AC%D8%B1%D8%A7_Prisma_Migrations\"><\/span>\n<p>  <strong>\u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 Prisma Migrations<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062c\u062f\u0627\u0648\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0637\u0631\u062d \u0645\u0627\u060c \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx prisma migrate dev <span class=\"nt\">--name<\/span> init\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<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u062c\u062f\u0627\u0648\u0644 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u0644 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0637\u0648\u0644 \u062a\u0648\u0633\u0639\u0647 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0645\u0647\u0627\u062c\u0631\u062a\u060c \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631\u060c \u06a9\u0644\u0627\u06cc\u0646\u062a Prisma \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">npx<\/span> <span class=\"nx\">prisma<\/span> <span class=\"nx\">generate<\/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<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u06a9\u0644\u0627\u06cc\u0646\u062a Prisma \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f\u060c \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u06a9\u062f\u0645\u0627\u0646 \u0628\u0647 \u0637\u0648\u0631 \u0627\u06cc\u0645\u0646 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u0628\u0627 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Prisma_Client_%D8%AF%D8%B1_%DA%A9%D8%AF\"><\/span>\n<p>  <strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Prisma Client \u062f\u0631 \u06a9\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0634\u062a\u0631\u06cc Prisma \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f\u060c \u06cc\u06a9 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>prisma.ts<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>lib<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">PrismaClient<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@prisma\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">let<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">:<\/span> <span class=\"nx\">PrismaClient<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NODE_ENV<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">production<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">prisma<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">PrismaClient<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ @ts-expect-error global.prisma is used by @prisma\/client<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nb\">global<\/span><span class=\"p\">.<\/span><span class=\"nx\">prisma<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ @ts-expect-error global.prisma is used by @prisma\/client<\/span>\n    <span class=\"nb\">global<\/span><span class=\"p\">.<\/span><span class=\"nx\">prisma<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">PrismaClient<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"c1\">\/\/ @ts-expect-error global.prisma is used by @prisma\/client<\/span>\n  <span class=\"nx\">prisma<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">global<\/span><span class=\"p\">.<\/span><span class=\"nx\">prisma<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">prisma<\/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<p>\u0627\u06cc\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0637\u0645\u0626\u0646 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0645\u0627 \u0641\u0642\u0637 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0645\u0634\u062a\u0631\u06cc Prisma \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0645\u0627 \u062f\u0631 \u0637\u0648\u0644 \u062a\u0648\u0633\u0639\u0647 \u0627\u0632 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u062c\u0647\u0627\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u0632 \u0645\u0634\u06a9\u0644\u0627\u062a\u06cc \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u062a\u0639\u062f\u0627\u062f \u0632\u06cc\u0627\u062f\u06cc \u0627\u0632 \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u062c\u062f\u062f \u0645\u06a9\u0631\u0631 \u06cc\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u062c\u062f\u062f \u062f\u0627\u063a \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u0646\u062c\u0631 \u0628\u0647 \u0645\u0634\u06a9\u0644\u0627\u062a \u0627\u062a\u0635\u0627\u0644 \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D8%A8%D8%A7_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF\"><\/span>\n<p>  <strong>\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u06a9\u0627\u0631\u0645\u0646\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  <strong>\u06a9\u0627\u0631\u0645\u0646\u062f \u0686\u06cc\u0633\u062a\u061f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Clerk \u067e\u0644\u062a\u0641\u0631\u0645\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0627\u062c\u0632\u0627\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0622\u0645\u0627\u062f\u0647\u060c API\u0647\u0627 \u0648 \u062f\u0627\u0634\u0628\u0648\u0631\u062f\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u0627\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u062e\u0648\u062f\u062a\u0627\u0646 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0645\u0644 \u0628\u0633\u0627\u0632\u06cc\u062f\u060c Clerk \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648 \u062a\u0644\u0627\u0634 \u0635\u0631\u0641\u0647 \u062c\u0648\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u060c \u0645\u0627 \u0627\u0632 Clerk \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DB%8C%DA%A9_%D8%AD%D8%B3%D8%A7%D8%A8_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF\"><\/span>\n<p>  <strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0645\u0646\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx4td4l1v2faa2edjyqgq.png\" alt=\"\u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0645\u0646\u062f\" loading=\"lazy\" width=\"800\" height=\"434\" title=\"\"><\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0627 Clerk \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0645\u0646\u062f \u0628\u0631\u0648\u06cc\u062f \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0645\u06cc\u0644 \u06cc\u0627 \u06af\u0632\u06cc\u0646\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 \u06a9\u0627\u0631\u0645\u0646\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdmh15onnaplpoz51e1ri.png\" alt=\"\u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"414\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u062f\u0631 Clerk \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<ol>\n<li>\n<p>\u0628\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0631\u0648\u06cc\u062f \u0648 \u0631\u0648\u06cc &#8220;\u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f&#8221;<strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/strong>&#8220;.<\/p>\n<\/li>\n<li>\n<p>\u0646\u0627\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 &#8220;<strong>\u06a9\u0644\u0648\u0646 \u0634\u0644<\/strong>&#8220;.<\/p>\n<\/li>\n<li>\n<p>\u0632\u06cc\u0631 &#8220;<strong>\u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\u060c<\/strong>\u201d \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f <strong>\u0627\u06cc\u0645\u06cc\u0644<\/strong>\u060c <strong>\u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc<\/strong>\u060c \u0648 <strong>\u06af\u0648\u06af\u0644<\/strong>.<\/p>\n<\/li>\n<li>\n<p>\u0631\u0648\u06cc &#8221; \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/strong>&#8221; \u0628\u0631\u0627\u06cc \u062a\u06a9\u0645\u06cc\u0644 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a.<\/p>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpbb19j17d7bojoyz2pxo.png\" alt=\"\u0645\u0631\u0627\u062d\u0644 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u0646\u0634\u06cc\" loading=\"lazy\" width=\"800\" height=\"173\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647\u060c \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0634\u0645\u0627\u0633\u062a <strong>\u06a9\u0644\u06cc\u062f \u0642\u0627\u0628\u0644 \u0627\u0646\u062a\u0634\u0627\u0631<\/strong> \u0648 <strong>\u06a9\u0644\u06cc\u062f \u0645\u062e\u0641\u06cc<\/strong>&#8211; \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0632\u06cc\u0631\u0627 \u0628\u0639\u062f\u0627\u064b \u0628\u0647 \u0622\u0646\u0647\u0627 \u0646\u06cc\u0627\u0632 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp3upgo8qljh54zzmf2ef.png\" alt=\"\u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0646\u0627\u0645 \u0648 \u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc \u06a9\u0627\u0631\u0645\u0646\u062f\" loading=\"lazy\" width=\"800\" height=\"457\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0646\u0627\u0645 \u0648 \u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc \u0631\u0627 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062b\u0628\u062a \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<ol>\n<li>\n<p>\u0628\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f <strong>&#8220;\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc&#8221;<\/strong> \u0628\u0631\u06af\u0647<\/p>\n<\/li>\n<li>\n<p>\u062a\u062d\u062a &#8220;<strong>\u06a9\u0627\u0631\u0628\u0631 \u0648 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/strong>&#8220;\u060c \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f&#8221;<strong>\u0627\u06cc\u0645\u06cc\u0644\u060c \u062a\u0644\u0641\u0646\u060c \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc<\/strong>&#8220;.<\/p>\n<\/li>\n<li>\n<p>\u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 &#8220;<strong>\u0646\u0627\u0645<\/strong>&#8220;\u06af\u0632\u06cc\u0646\u0647 \u062f\u0631&#8221;<strong>\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0634\u062e\u0635\u06cc<\/strong>\u0628\u062e\u0634 &#8221; \u0648 \u0622\u0646 \u0631\u0627 \u0631\u0648\u0634\u0646 \u06a9\u0646\u06cc\u062f..<\/p>\n<\/li>\n<li>\n<p>\u0631\u0648\u06cc \u0646\u0645\u0627\u062f \u0686\u0631\u062e \u062f\u0646\u062f\u0647 \u062f\u0631 \u06a9\u0646\u0627\u0631 &#8221; \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<strong>\u0646\u0627\u0645<\/strong>&#8221; \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p>\u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u201d<strong>\u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f<\/strong>\u201d \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0634\u0645\u0627.<\/p>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF_%D8%AF%D8%B1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B4%D9%85%D8%A7\"><\/span>\n<p>  <strong>\u0646\u0635\u0628 \u06a9\u0627\u0631\u0645\u0646\u062f \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0633\u067e\u0633\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f Clerk \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 Next.js \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<ol>\n<li>\n<p>\u0628\u0633\u062a\u0647 Clerk \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> @clerk\/nextjs\n<\/code><\/pre>\n<\/li>\n<li>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>.env.local<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight docker\"><code>NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key\nCLERK_SECRET_KEY=your_clerk_secret_key\n<\/code><\/pre>\n<p>\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f <code>your_clerk_publishable_key<\/code> \u0648 <code>your_clerk_secret_key<\/code> \u0628\u0627 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627.<\/p>\n<\/li>\n<li>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a Clerk \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u0628\u0627\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0622\u0646 \u0628\u067e\u06cc\u0686\u06cc\u062f <code>ClerkProvider<\/code>. \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>app\/layout.tsx<\/code> \u0641\u0627\u06cc\u0644 \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"kd\">type<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Metadata<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ClerkProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"p\">...<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">RootLayout<\/span><span class=\"p\">({<\/span>\n  <span class=\"nx\">children<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}:<\/span> <span class=\"nb\">Readonly<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">{<\/span>\n  <span class=\"na\">children<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">ReactNode<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">ClerkProvider<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">html<\/span> <span class=\"nx\">lang<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">en<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">body<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-white bg-purple antialiased<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/body<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/html<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ClerkProvider<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B5%D9%81%D8%AD%D8%A7%D8%AA_%D8%AB%D8%A8%D8%AA_%D9%86%D8%A7%D9%85_%D9%88_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0627\u062a \u062b\u0628\u062a \u0646\u0627\u0645 \u0648 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u0627\u06cc\u062f \u0635\u0641\u062d\u0627\u062a \u062b\u0628\u062a \u0646\u0627\u0645 \u0648 \u0648\u0631\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Clerk&#39;s \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 <code><signup\/><\/code> \u0648 <code><signin\/><\/code> \u0627\u062c\u0632\u0627\u0621 \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627 \u0628\u0627 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0627\u062e\u0644\u06cc \u0647\u0645\u0631\u0627\u0647 \u0647\u0633\u062a\u0646\u062f \u0648 \u062a\u0645\u0627\u0645 \u0645\u0646\u0637\u0642 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0635\u0641\u062d\u0627\u062a \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ol>\n<li>\n<p><strong>URL \u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/strong>: \u0645\u0646\u0634\u06cc <code><signup\/><\/code> \u0648 <code><signin\/><\/code> \u0627\u062c\u0632\u0627 \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u0646\u062f \u062f\u0631 \u06a9\u062c\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0646\u062f. \u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>.env.local<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<pre class=\"highlight docker\"><code>NEXT_PUBLIC_CLERK_SIGN_IN_URL=\/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=\/sign-up\n<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong>: \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645 \u062f\u0631 <code>app\/sign-up\/[[...sign-up]]\/page.tsx<\/code>\u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SignUp<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Page<\/span><span class=\"p\">()<\/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\">sm:w-svw sm:h-svh bg-purple w-full h-full flex items-center justify-center<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">SignUp<\/span> <span class=\"o\">\/&gt;<\/span>\n    <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<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong>: \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>page.tsx<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>app\/sign-in\/[[...sign-in]]<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SignIn<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Page<\/span><span class=\"p\">()<\/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\">w-svw h-svh bg-purple flex items-center justify-center<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">SignIn<\/span> <span class=\"o\">\/&gt;<\/span>\n    <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<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u0645\u06cc\u0627\u0646 \u0627\u0641\u0632\u0627\u0631 \u06a9\u0627\u0631\u0645\u0646\u062f \u062e\u0648\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/strong>: \u0645\u0646\u0634\u06cc \u0628\u0627 \u0627\u0644\u0641 \u0645\u06cc \u0622\u06cc\u062f <code>clerkMiddleware()<\/code> \u06a9\u0645\u06a9\u06cc \u06a9\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Next.js \u0645\u0627 \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u06cc\u0627\u0646 \u0627\u0641\u0632\u0627\u0631 \u0628\u0631\u0627\u06cc \u0645\u062d\u0627\u0641\u0638\u062a \u0627\u0632 \u0628\u0631\u062e\u06cc \u0645\u0633\u06cc\u0631\u0647\u0627 \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0639\u0645\u0648\u0645\u06cc \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627\u060c \u0645\u0627 \u062a\u0646\u0647\u0627 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062b\u0628\u062a \u0646\u0627\u0645 \u0648 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0627\u0632 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0645\u062d\u0627\u0641\u0638\u062a \u06a9\u0646\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>middleware.ts<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>src<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">clerkMiddleware<\/span><span class=\"p\">,<\/span> <span class=\"nx\">createRouteMatcher<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs\/server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">isPublicRoute<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createRouteMatcher<\/span><span class=\"p\">([<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">\/sign-in(.*)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">\/sign-up(.*)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">]);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">clerkMiddleware<\/span><span class=\"p\">(<\/span><span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">auth<\/span><span class=\"p\">,<\/span> <span class=\"nx\">request<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nf\">isPublicRoute<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nx\">auth<\/span><span class=\"p\">.<\/span><span class=\"nf\">protect<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">config<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">matcher<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"c1\">\/\/ Skip Next.js internals and all static files, unless found in search params<\/span>\n    <span class=\"dl\">'<\/span><span class=\"s1\">\/((?!_next|[^?]*<\/span><span class=\"se\">\\\\<\/span><span class=\"s1\">.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"c1\">\/\/ Always run for API routes<\/span>\n    <span class=\"dl\">'<\/span><span class=\"s1\">\/(api|trpc)(.*)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">],<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdgood3kz60bnvn6nc590.png\" alt=\"\u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645\" loading=\"lazy\" width=\"800\" height=\"539\" title=\"\"><\/p>\n<p>\u0628\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644\u060c Clerk \u0628\u0627\u06cc\u062f \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u062f\u063a\u0627\u0645 \u0634\u0648\u062f \u0648 \u0635\u0641\u062d\u0627\u062a \u062b\u0628\u062a \u0646\u0627\u0645 \u0648 \u062b\u0628\u062a \u0646\u0627\u0645 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06a9\u0627\u0645\u0644\u0627\u064b \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0627\u0634\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AF%D8%A7%D8%B4%D8%A8%D9%88%D8%B1%D8%AF_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0648 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0632\u0645\u0627\u0646 \u0634\u0631\u0648\u0639 \u0633\u0627\u062e\u062a \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0633\u062a. \u0627\u06cc\u0646 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u0646\u0637\u0642\u0647 \u0627\u0635\u0644\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0642\u0633\u0645\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f\u060c \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u0646\u062f \u0648 \u062f\u0639\u0648\u062a \u0628\u0647 \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0628\u0628\u06cc\u0646\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u0628\u0627\u06cc\u062f \u0627\u062c\u0632\u0627\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u0627 \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%86%D9%88%D8%A7%D8%B1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0631\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u062f\u0631 \u0633\u0627\u06cc\u062a \u0647\u0627 \u062d\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f \u0648 \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062f\u0631 \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a\u060c \u0644\u06cc\u0646\u06a9 \u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0647 \u062c\u0627\u06cc\u06cc \u0646\u0645\u06cc \u0631\u0633\u0646\u062f. \u0645\u0648\u0631\u062f \u0645\u0641\u06cc\u062f \u0627\u0648\u0644\u06cc\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 &#8220;<strong>\u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong>\u062f\u06a9\u0645\u0647 \u062f\u0631\u0648\u0646 \u0622\u0646<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>Navbar.tsx<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>components<\/code> \u067e\u0648\u0634\u0647 \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ReactNode<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Button<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Button<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">NavbarProps<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">action<\/span><span class=\"p\">:<\/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=\"kd\">const<\/span> <span class=\"nx\">Navbar<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">action<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">NavbarProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">header<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">nav<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">bg-purple h-20<\/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 justify-between h-full px-[4vw] mx-auto<\/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 w-[125px] justify-start<\/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-1.5<\/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\">w-[26px] h-[26px]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">svg<\/span> <span class=\"nx\">xmlns<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/www.w3.org\/2000\/svg<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">viewBox<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">0 0 128 128<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">path<\/span>\n                    <span class=\"nx\">d<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">M27.255 80.719c0 7.33-5.978 13.317-13.309 13.317C6.616 94.036.63 88.049.63 80.719s5.987-13.317 13.317-13.317h13.309zm6.709 0c0-7.33 5.987-13.317 13.317-13.317s13.317 5.986 13.317 13.317v33.335c0 7.33-5.986 13.317-13.317 13.317-7.33 0-13.317-5.987-13.317-13.317zm0 0<\/span><span class=\"dl\">\"<\/span>\n                    <span class=\"nx\">fill<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">#de1c59<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"o\">\/&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">path<\/span>\n                    <span class=\"nx\">d<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">M47.281 27.255c-7.33 0-13.317-5.978-13.317-13.309C33.964 6.616 39.951.63 47.281.63s13.317 5.987 13.317 13.317v13.309zm0 6.709c7.33 0 13.317 5.987 13.317 13.317s-5.986 13.317-13.317 13.317H13.946C6.616 60.598.63 54.612.63 47.281c0-7.33 5.987-13.317 13.317-13.317zm0 0<\/span><span class=\"dl\">\"<\/span>\n                    <span class=\"nx\">fill<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">#35c5f0<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"o\">\/&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">path<\/span>\n                    <span class=\"nx\">d<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">M100.745 47.281c0-7.33 5.978-13.317 13.309-13.317 7.33 0 13.317 5.987 13.317 13.317s-5.987 13.317-13.317 13.317h-13.309zm-6.709 0c0 7.33-5.987 13.317-13.317 13.317s-13.317-5.986-13.317-13.317V13.946C67.402 6.616 73.388.63 80.719.63c7.33 0 13.317 5.987 13.317 13.317zm0 0<\/span><span class=\"dl\">\"<\/span>\n                    <span class=\"nx\">fill<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">#2eb57d<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"o\">\/&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">path<\/span>\n                    <span class=\"nx\">d<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">M80.719 100.745c7.33 0 13.317 5.978 13.317 13.309 0 7.33-5.987 13.317-13.317 13.317s-13.317-5.987-13.317-13.317v-13.309zm0-6.709c-7.33 0-13.317-5.987-13.317-13.317s5.986-13.317 13.317-13.317h33.335c7.33 0 13.317 5.986 13.317 13.317 0 7.33-5.987 13.317-13.317 13.317zm0 0<\/span><span class=\"dl\">\"<\/span>\n                    <span class=\"nx\">fill<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">#ebb02e<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"o\">\/&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/svg<\/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\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-[29px] font-outfit font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">slack<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/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=\"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\">hidden sm:flex items-center text-sm flex-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">ul<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex flex-1 leading-[1.555] -tracking-[.0012em]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">NavLink<\/span> <span class=\"nx\">dropdown<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Features<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/NavLink<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">NavLink<\/span> <span class=\"nx\">dropdown<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Solutions<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/NavLink<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">NavLink<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Enterprise<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/NavLink<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">NavLink<\/span> <span class=\"nx\">dropdown<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Resources<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/NavLink<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">NavLink<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Pricing<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/NavLink<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ul<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">hidden lg:flex mt-1 mr-6<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">svg<\/span>\n                <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">20<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">height<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">20<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">fill<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">white<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">xmlns<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/www.w3.org\/2000\/svg<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">path<\/span>\n                  <span class=\"nx\">d<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">m18.78 17.72c.1467.1467.22.3233.22.53 0 .2133-.0733.39-.22.53-.16.1467-.3367.22-.53.22-.2067 0-.3833-.0733-.53-.22l-4.47-4.47c-.6667.54-1.4067.9567-2.22 1.25-.8067.2933-1.65.44-2.53.44-1.36 0-2.61333-.3367-3.76-1.01s-2.05667-1.5833-2.73-2.73-1.01-2.4-1.01-3.76.33667-2.61333 1.01-3.76 1.58333-2.05667 2.73-2.73 2.4-1.01 3.76-1.01 2.6133.33667 3.76 1.01 2.0567 1.58333 2.73 2.73 1.01 2.4 1.01 3.76c0 .88-.1467 1.7267-.44 2.54-.2933.8067-.71 1.5433-1.25 2.21zm-10.28-3.22c1.08667 0 2.0867-.27 3-.81.92-.54 1.65-1.2667 2.19-2.18.54-.92.81-1.92333.81-3.01s-.27-2.08667-.81-3c-.54-.92-1.27-1.65-2.19-2.19-.9133-.54-1.91333-.81-3-.81s-2.09.27-3.01.81c-.91333.54-1.64 1.27-2.18 2.19-.54.91333-.81 1.91333-.81 3s.27 2.09.81 3.01c.54.9133 1.26667 1.64 2.18 2.18.92.54 1.92333.81 3.01.81z<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">stroke<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">#fff<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">strokeWidth<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.5<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/path<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/svg<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">form<\/span> <span class=\"nx\">action<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">action<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">Button<\/span>\n                <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">submit<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">variant<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">secondary<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">hidden lg:flex ml-2 py-0 w-[240px] h-[45px]<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Create<\/span> <span class=\"nx\">a<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">workspace<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Button<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/form<\/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=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/nav<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/header<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">NavLinkProps<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">dropdown<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">children<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ReactNode<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">NavLink<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">dropdown<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">NavLinkProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">li<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">p-[.25rem_.88rem]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-[15.5px] font-semibold flex items-center gap-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">{<\/span><span class=\"nx\">dropdown<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">svg<\/span>\n            <span class=\"nx\">xmlns<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/www.w3.org\/2000\/svg<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">8<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">height<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">5<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">viewBox<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">0 0 8 5<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">fill<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">none<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">path<\/span>\n              <span class=\"nx\">d<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">M7 1L4 4L1 1<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">stroke<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">white<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">strokeWidth<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">2<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">strokeLinecap<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">round<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">strokeLinejoin<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">round<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/svg<\/span><span class=\"err\">&gt;\n<\/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\">\/li<\/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\">Navbar<\/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<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0645\u0627 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u06cc\u0645 <code>Navbar<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u060c \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0644\u0648\u06af\u0648\u060c \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u0646\u06af\u0647\u062f\u0627\u0631\u0646\u062f\u0647 \u0645\u06a9\u0627\u0646\u060c \u0648 \u062f\u06a9\u0645\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u0633\u062a. \u0631\u0627 <code>Navbar<\/code> \u06cc\u06a9 \u0631\u0627 \u0646\u06cc\u0632 \u0645\u06cc \u06af\u06cc\u0631\u062f <code>action<\/code> \u067e\u0631\u0648\u067e\u0648\u0632\u0627\u0644\u060c \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f<strong>\u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong>\u062f\u06a9\u0645\u0647 &#39; \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062e\u0648\u0627\u0647\u0646\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0645\u06cc \u0627\u0641\u062a\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%84%DB%8C%D8%B3%D8%AA_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0644\u06cc\u0633\u062a \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062a\u0645\u0627\u0645 \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631\u060c \u0628\u0647 a \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 <code>WorkspaceList<\/code> \u062c\u0632\u0621 \u0627\u06cc\u0646 \u062c\u0632\u0621 \u062c\u0632\u0626\u06cc\u0627\u062a \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u0646\u062f \u06cc\u0627 \u062f\u0639\u0648\u062a \u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u067e\u0630\u06cc\u0631\u0646\u062f.<\/p>\n<p>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0627 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>\/components\/WorkspaceList.tsx<\/code> \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Workspace<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@prisma\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">Button<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Button<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">WorkspaceListProps<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">action<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">formData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FormData<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">actionText<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">buttonVariant<\/span><span class=\"p\">?:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">primary<\/span><span class=\"dl\">'<\/span> <span class=\"o\">|<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">secondary<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">workspaces<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nb\">Omit<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Workspace<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ownerId<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">&amp;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">memberCount<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">token<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">firstChannelId<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/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\">placeholderImage<\/span> <span class=\"o\">=<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/a.slack-edge.com\/80588\/img\/avatars-teams\/ava_0014-88.png<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">WorkspaceList<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span>\n  <span class=\"nx\">action<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">actionText<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">buttonVariant<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">primary<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">title<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">workspaces<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}:<\/span> <span class=\"nx\">WorkspaceListProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/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\">rounded-[9px] mb-12 border-[#fff3] border-4<\/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 bg-[#ecdeec] text-black p-4 text-lg rounded-t-[5px] min-h-[calc(50px+2rem)]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span>\n      <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\">flex flex-col rounded-b-[5px] bg-[#fff] [&amp;&gt;:not(:first-child)]:border [&amp;&gt;:not(:first-child)]:border-t-[#ebeaeb]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">workspaces<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">form<\/span> <span class=\"nx\">action<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">action<\/span><span class=\"p\">}<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">p-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n              <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">hidden<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">channelId<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">?.<\/span><span class=\"nx\">firstChannelId<\/span><span class=\"p\">}<\/span>\n            <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span> <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">hidden<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">token<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">?.<\/span><span class=\"nx\">token<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span> <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">hidden<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">workspaceId<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/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\">flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-0<\/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<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"p\">{<\/span><span class=\"cm\">\/* eslint-disable-next-line @next\/next\/no-img-element *\/<\/span><span class=\"p\">}<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">img<\/span>\n                  <span class=\"nx\">src<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">placeholderImage<\/span><span class=\"p\">}<\/span>\n                  <span class=\"nx\">alt<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">workspace-image<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">rounded-[5px] mr-4 h-[75px] w-[75px] object-cover<\/span><span class=\"dl\">\"<\/span>\n                <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 flex-col my-auto text-black<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-lg font-bold mb-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/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\">flex h-5<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-[#696969] text-[14.5px]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                      <span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">memberCount<\/span><span class=\"p\">}<\/span> <span class=\"nx\">member<\/span>\n                      <span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">memberCount<\/span> <span class=\"o\">!==<\/span> <span class=\"mi\">1<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">s<\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/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=\"sr\">\/div<\/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\">sm:ml-auto w-full sm:w-auto flex sm:block<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Button<\/span>\n                  <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">submit<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">variant<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">buttonVariant<\/span><span class=\"p\">}<\/span>\n                  <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">grow shrink-0<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">actionText<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>                <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=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/form<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/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\">WorkspaceList<\/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<ul>\n<li>\n<p>\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0686\u0646\u062f\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u0631\u062f:<\/p>\n<ul>\n<li>\n<code>action<\/code>: \u062a\u0627\u0628\u0639\u06cc \u06a9\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f \u0648\u0642\u062a\u06cc \u062f\u06a9\u0645\u0647 \u0639\u0645\u0644 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0645\u06cc \u0627\u0641\u062a\u062f.<\/li>\n<li>\n<code>actionText<\/code>: \u0645\u062a\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc.<\/li>\n<li>\n<code>buttonVariant<\/code>: \u0633\u0628\u06a9 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f\u060c \u06cc\u0627 &#8220;\u0627\u0635\u0644\u06cc&#8221; \u06cc\u0627 &#8220;\u062b\u0627\u0646\u0648\u06cc\u0647&#8221;.<\/li>\n<li>\n<code>title<\/code>: \u0639\u0646\u0648\u0627\u0646 \u0644\u06cc\u0633\u062a \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc.<\/li>\n<li>\n<code>workspaces<\/code>: \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0628\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u06cc\u0634\u062a\u0631.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0628\u0631\u0627\u06cc \u0647\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc\u060c \u0645\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u06cc\u0645:<\/p>\n<ul>\n<li>\n<strong>\u0646\u0627\u0645<\/strong>: \u0646\u0627\u0645 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc.<\/li>\n<li>\n<strong>\u062a\u0635\u0648\u06cc\u0631<\/strong>: \u0627\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u0646\u0634\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u062a\u0635\u0648\u06cc\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631 \u06cc\u0627 \u0645\u06a9\u0627\u0646\u200c\u0646\u0645\u0627.<\/li>\n<li>\n<strong>\u062a\u0639\u062f\u0627\u062f \u0627\u0639\u0636\u0627<\/strong>: \u062a\u0639\u062f\u0627\u062f \u0627\u0639\u0636\u0627 \u062f\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0647\u0631 \u0645\u0648\u0631\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0646\u06cc\u0632 \u0641\u0631\u0645\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0645\u062e\u0641\u06cc \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0641\u06cc\u0644\u062f\u0647\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u0645\u0627\u0646\u0646\u062f <code>channelId<\/code>\u060c <code>token<\/code>\u060c \u0648 <code>workspaceId<\/code>. \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0627\u06cc\u0646 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0642\u062f\u0627\u0645 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D8%A7%D8%AF%D9%86_%D8%A2%D9%86_%D9%87%D9%85%D9%87_%D8%A8%D8%A7_%D9%87%D9%85\"><\/span>\n<p>  <strong>\u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0622\u0646 \u0647\u0645\u0647 \u0628\u0627 \u0647\u0645<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0627\u062c\u0632\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0648\u0642\u062a \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645 \u0648 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645. \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>Navbar<\/code> \u0648 <code>WorkspaceList<\/code> \u0627\u062c\u0632\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0645\u0627.<\/p>\n<p>\u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>app\/page.tsx<\/code> \u0641\u0627\u06cc\u0644\u06cc \u0628\u0631\u0627\u06cc \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627 \u0648 \u0627\u06cc\u062c\u0627\u062f \u062f\u0627\u0634\u0628\u0648\u0631\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">Image<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/image<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">redirect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/navigation<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">currentUser<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs\/server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SignOutButton<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">Button<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/Button<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Navbar<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/Navbar<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">prisma<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/lib\/prisma<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">WorkspaceList<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/WorkspaceList<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">user<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">currentUser<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">userEmail<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">primaryEmailAddress<\/span><span class=\"p\">?.<\/span><span class=\"nx\">emailAddress<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">memberships<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">membership<\/span><span class=\"p\">.<\/span><span class=\"nf\">findMany<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"o\">!<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">include<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">include<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">_count<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">select<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">memberships<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">},<\/span>\n          <span class=\"p\">},<\/span>\n          <span class=\"na\">memberships<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">take<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n          <span class=\"na\">channels<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">take<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">select<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n              <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n            <span class=\"p\">},<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">workspaces<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">memberships<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">membership<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">workspace<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">membership<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">memberCount<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">_count<\/span><span class=\"p\">.<\/span><span class=\"nx\">memberships<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">firstChannelId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">channels<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">id<\/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\">invitations<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">invitation<\/span><span class=\"p\">.<\/span><span class=\"nf\">findMany<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userEmail<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">acceptedAt<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">include<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">include<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">_count<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">select<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">memberships<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">},<\/span>\n          <span class=\"p\">},<\/span>\n          <span class=\"na\">memberships<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">take<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">processedInvitations<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">invitations<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">invitation<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">workspace<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">invitation<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">memberCount<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">_count<\/span><span class=\"p\">.<\/span><span class=\"nx\">memberships<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">token<\/span><span class=\"p\">:<\/span> <span class=\"nx\">invitation<\/span><span class=\"p\">.<\/span><span class=\"nx\">token<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">acceptInvitation<\/span><span class=\"p\">(<\/span><span class=\"nx\">formData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FormData<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"dl\">'<\/span><span class=\"s1\">use server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">token<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">String<\/span><span class=\"p\">(<\/span><span class=\"nx\">formData<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">token<\/span><span class=\"dl\">'<\/span><span class=\"p\">));<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">invitation<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">invitation<\/span><span class=\"p\">.<\/span><span class=\"nf\">findUnique<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">token<\/span> <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">membership<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"o\">!<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userEmail<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">connect<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">invitation<\/span><span class=\"o\">!<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspaceId<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">},<\/span>\n        <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">user<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">invitation<\/span><span class=\"p\">.<\/span><span class=\"nf\">update<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">token<\/span> <span class=\"p\">},<\/span>\n      <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">acceptedAt<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(),<\/span>\n        <span class=\"na\">acceptedById<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"o\">!<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/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\">workspace<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nf\">findUnique<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">invitation<\/span><span class=\"o\">!<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspaceId<\/span> <span class=\"p\">},<\/span>\n      <span class=\"na\">select<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">channels<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">take<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">select<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nf\">redirect<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/client\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">workspace<\/span><span class=\"o\">!<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">workspace<\/span><span class=\"o\">!<\/span><span class=\"p\">.<\/span><span class=\"nx\">channels<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">launchChat<\/span><span class=\"p\">(<\/span><span class=\"nx\">formData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FormData<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"dl\">'<\/span><span class=\"s1\">use server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">workspaceId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">formData<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">workspaceId<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">channelId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">formData<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">channelId<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">redirect<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/client\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">channelId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">goToGetStartedPage<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"dl\">'<\/span><span class=\"s1\">use server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"nf\">redirect<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/get-started<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <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\">font-lato min-h-screen text-white<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Navbar<\/span> <span class=\"nx\">action<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">goToGetStartedPage<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>      <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\">mt-9 max-w-[62.875rem] mx-auto px-[4vw]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"cm\">\/* Workspaces *\/<\/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\">flex items-center gap-1 mb-6<\/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\">src<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/a.slack-edge.com\/6c404\/marketing\/img\/homepage\/bold-existing-users\/waving-hand.gif<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">52<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">height<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">56<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">alt<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">waving-hand<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">unoptimized<\/span>\n          <span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-[40px] sm:text-[55.5px] leading-[1.12] font-outfit font-semibold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"nx\">Welcome<\/span> <span class=\"nx\">back<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/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\">mb-12<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">workspaces<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">WorkspaceList<\/span>\n              <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`Workspaces for <\/span><span class=\"p\">${<\/span><span class=\"nx\">userEmail<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">workspaces<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">workspaces<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">action<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">launchChat<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">actionText<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Launch Slack<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"o\">\/&gt;<\/span>\n          <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/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-lg font-bold pt-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">You<\/span> <span class=\"nx\">are<\/span> <span class=\"nx\">not<\/span> <span class=\"nx\">a<\/span> <span class=\"nx\">member<\/span> <span class=\"k\">of<\/span> <span class=\"kr\">any<\/span> <span class=\"nx\">workspaces<\/span> <span class=\"nx\">yet<\/span><span class=\"p\">.<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"p\">)}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">{<\/span><span class=\"cm\">\/* Create new workspace *\/<\/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\">rounded-[9px] mb-12 border-[#fff3] border-4<\/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 flex-col sm:grid items-center bg-[#fff] p-4 grid-rows-[1fr] grid-cols-[200px_1fr_auto] rounded-[5px]<\/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\">src<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/a.slack-edge.com\/613463e\/marketing\/img\/homepage\/bold-existing-users\/create-new-workspace-module\/woman-with-laptop-color-background.png<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">200<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">height<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">121<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">rounded-[5px] m-[-1rem_-1rem_-47px]<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">alt<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">woman-with-laptop<\/span><span class=\"dl\">\"<\/span>\n            <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\">mt-[50px] text-center sm:text-start mb-3 sm:my-0 pr-4 tracking-[.02em] text-[17.8px] text-black<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">strong<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"p\">{<\/span><span class=\"nx\">workspaces<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span>\n                  <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Want to use Slack with a different team?<\/span><span class=\"dl\">'<\/span>\n                  <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Want to get started with Slack?<\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/strong<\/span><span class=\"err\">&gt;\n<\/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\">form<\/span> <span class=\"nx\">action<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">goToGetStartedPage<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">Button<\/span> <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">submit<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">variant<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">secondary<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"nx\">Create<\/span> <span class=\"nx\">a<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">workspace<\/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\">\/form<\/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=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">{<\/span><span class=\"cm\">\/* Invitations *\/<\/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\">mb-12<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">processedInvitations<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">WorkspaceList<\/span>\n              <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`Invitations for <\/span><span class=\"p\">${<\/span><span class=\"nx\">userEmail<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">workspaces<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">processedInvitations<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">action<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">acceptInvitation<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">actionText<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Accept invite<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">buttonVariant<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">secondary<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"o\">\/&gt;<\/span>\n          <span class=\"p\">)}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">SignOutButton<\/span> <span class=\"nx\">redirectUrl<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/sign-in<\/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 flex-col sm:flex-row items-center justify-center mb-12<\/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\">mr-2 text-lg leading-[1.555] tracking-[-.0012em]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Not<\/span> <span class=\"nx\">seeing<\/span> <span class=\"nx\">your<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">?<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-lg leading-[1.555] tracking-[.012em] text-[#36c5f0] ml-2 flex items-center gap-[9px]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Try<\/span> <span class=\"nx\">using<\/span> <span class=\"nx\">a<\/span> <span class=\"nx\">different<\/span> <span class=\"nx\">email<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">svg<\/span>\n                <span class=\"nx\">xmlns<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/www.w3.org\/2000\/svg<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-[19px] h-[13px]<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">fill<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">none<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">path<\/span>\n                  <span class=\"nx\">d<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">M1 6a.5.5 0 0 0 0 1V6zM12.854.646a.5.5 0 0 0-.708.708l.708-.708zM18 6.5l.354.354a.5.5 0 0 0 0-.708L18 6.5zm-5.854 5.146a.5.5 0 0 0 .708.708l-.708-.708zM1 7h16.5V6H1v1zm16.646-.854l-5.5 5.5.708.708 5.5-5.5-.708-.708zm-5.5-4.792l2.75 2.75.708-.708-2.75-2.75-.708.708zm2.75 2.75l2.75 2.75.708-.708-2.75-2.75-.708.708z<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">fill<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">#36c5f0<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"o\">\/&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/svg<\/span><span class=\"err\">&gt;\n<\/span>            <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=\"sr\">\/SignOutButton<\/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<\/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<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u0642\u0633\u0645\u062a \u0627\u0632 \u06a9\u062f \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li>\n<p><strong>\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u0628\u0631<\/strong>: \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0644\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Clerk \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong>: \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u062a\u0645\u0627\u0645 \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0622\u0646\u0647\u0627 \u062a\u0639\u0644\u0642 \u062f\u0627\u0631\u062f \u0648 \u0647\u0631 \u062f\u0639\u0648\u062a \u0646\u0627\u0645\u0647 \u062f\u0631 \u0627\u0646\u062a\u0638\u0627\u0631\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u062a\u0648\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u0642\u062f\u0627\u0645\u0627\u062a<\/strong>: \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0633\u0647 \u200b\u200b\u062a\u0627\u0628\u0639 \u0627\u0635\u0644\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\n<code>acceptInvitation()<\/code>: \u062f\u0639\u0648\u062a \u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0645\u0646\u0627\u0633\u0628 \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<code>launchChat()<\/code>: \u0686\u062a \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0631\u0627 \u0628\u0627 \u0647\u062f\u0627\u06cc\u062a \u0628\u0647 URL \u0635\u062d\u06cc\u062d \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<code>goToGetStartedPage()<\/code>: \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0628\u0647 \u0635\u0641\u062d\u0647 &#8220;\u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631&#8221; \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u0627 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u06cc\u0645 <code>Navbar<\/code>\u060c <code>WorkspaceList<\/code>\u060c \u0648 \u0645\u0646\u0634\u06cc <code>SignOutButton<\/code> \u062f\u06a9\u0645\u0647 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u062e\u0648\u0634\u0627\u0645\u062f\u06af\u0648\u06cc\u06cc.<\/p>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Falu67mqb2l1mvbkl2nrl.png\" alt=\"\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc\" loading=\"lazy\" width=\"800\" height=\"475\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_Create_Workspace_API\"><\/span>\n<p>  <strong>\u0633\u0627\u062e\u062a Create Workspace API<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 API \u0628\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u062f \u0648 \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u062f \u062c\u0632\u0626\u06cc\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>\/api\/workspaces\/create<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u0633\u067e\u0633 \u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>route.ts<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NextResponse<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">auth<\/span><span class=\"p\">,<\/span> <span class=\"nx\">currentUser<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs\/server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">prisma<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/lib\/prisma<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">generateChannelId<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">generateToken<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">generateWorkspaceId<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">isEmail<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/lib\/utils<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">POST<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Request<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">auth<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">userId<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Authentication required<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">401<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">user<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">currentUser<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">userEmail<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">primaryEmailAddress<\/span><span class=\"p\">?.<\/span><span class=\"nx\">emailAddress<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">body<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">request<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">workspaceName<\/span><span class=\"p\">,<\/span> <span class=\"nx\">channelName<\/span><span class=\"p\">,<\/span> <span class=\"nx\">emails<\/span><span class=\"p\">,<\/span> <span class=\"nx\">imageUrl<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">body<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Validate input<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span>\n      <span class=\"o\">!<\/span><span class=\"nx\">workspaceName<\/span> <span class=\"o\">||<\/span>\n      <span class=\"o\">!<\/span><span class=\"nx\">channelName<\/span> <span class=\"o\">||<\/span>\n      <span class=\"o\">!<\/span><span class=\"nb\">Array<\/span><span class=\"p\">.<\/span><span class=\"nf\">isArray<\/span><span class=\"p\">(<\/span><span class=\"nx\">emails<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span>\n      <span class=\"nx\">emails<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span>\n    <span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Invalid input data<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">400<\/span> <span class=\"p\">}<\/span>\n      <span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Validate emails<\/span>\n    <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">email<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">emails<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nf\">isEmail<\/span><span class=\"p\">(<\/span><span class=\"nx\">email<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span>\n          <span class=\"p\">{<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Invalid email address: <\/span><span class=\"p\">${<\/span><span class=\"nx\">email<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span> <span class=\"p\">},<\/span>\n          <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">400<\/span> <span class=\"p\">}<\/span>\n        <span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Create workspace<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">workspace<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nf\">generateWorkspaceId<\/span><span class=\"p\">(),<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspaceName<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">imageUrl<\/span> <span class=\"o\">||<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">ownerId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Create initial channel<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">channel<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">channel<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nf\">generateChannelId<\/span><span class=\"p\">(),<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">channelName<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Add authenticated user as admin<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">membership<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userEmail<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">connect<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">},<\/span>\n        <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">admin<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Invite provided emails<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">invitations<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">skippedEmails<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">errors<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n\n    <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">email<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">emails<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ Check if an invitation already exists<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">existingInvitation<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">invitation<\/span><span class=\"p\">.<\/span><span class=\"nf\">findFirst<\/span><span class=\"p\">({<\/span>\n          <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">email<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">acceptedAt<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">});<\/span>\n\n        <span class=\"c1\">\/\/ check if the user is already a member<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">existingMembership<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">membership<\/span><span class=\"p\">.<\/span><span class=\"nf\">findFirst<\/span><span class=\"p\">({<\/span>\n          <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">email<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">});<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">existingInvitation<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">skippedEmails<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">email<\/span><span class=\"p\">);<\/span>\n          <span class=\"k\">continue<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">existingMembership<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">skippedEmails<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">email<\/span><span class=\"p\">);<\/span>\n          <span class=\"k\">continue<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">email<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">userEmail<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">skippedEmails<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">email<\/span><span class=\"p\">);<\/span>\n          <span class=\"k\">continue<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"c1\">\/\/ Generate token<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">token<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">generateToken<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"c1\">\/\/ Create invitation<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">invitation<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">invitation<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">({<\/span>\n          <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">email<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">token<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">invitedById<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">});<\/span>\n\n        <span class=\"nx\">invitations<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">invitation<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Error inviting <\/span><span class=\"p\">${<\/span><span class=\"nx\">email<\/span><span class=\"p\">}<\/span><span class=\"s2\">:`<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">({<\/span> <span class=\"nx\">email<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span> <span class=\"p\">});<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Return response<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Workspace created successfully<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">channel<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">channel<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">channelName<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">invitationsSent<\/span><span class=\"p\">:<\/span> <span class=\"nx\">invitations<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">invitationsSkipped<\/span><span class=\"p\">:<\/span> <span class=\"nx\">skippedEmails<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">errors<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">207<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">200<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error creating workspace:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Internal server error<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">500<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nf\">$disconnect<\/span><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<p>\u0627\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 API \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc \u0627\u0641\u062a\u062f:<\/p>\n<ul>\n<li>\n<p><strong>\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/strong>: \u0627\u0628\u062a\u062f\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631. \u0641\u0642\u0637 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646\u06cc \u06a9\u0647 \u0648\u0627\u0631\u062f \u0633\u06cc\u0633\u062a\u0645 \u0634\u062f\u0647 \u0627\u0646\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0648\u0631\u0648\u062f\u06cc<\/strong>: \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647\u060c \u0645\u0627\u0646\u0646\u062f \u0646\u0627\u0645 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc\u060c \u0646\u0627\u0645 \u06a9\u0627\u0646\u0627\u0644 \u0648 \u0644\u06cc\u0633\u062a \u0627\u06cc\u0645\u06cc\u0644\u060c \u0635\u062d\u06cc\u062d \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u06cc\u062c\u0627\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0648 \u06a9\u0627\u0646\u0627\u0644<\/strong>: \u0633\u067e\u0633 API \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0648\u0644\u06cc\u0646 \u06a9\u0627\u0646\u0627\u0644 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u062f\u0645\u06cc\u0646<\/strong>: \u06a9\u0627\u0631\u0628\u0631\u06cc \u06a9\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062f\u06cc\u0631 \u0622\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0631\u0633\u0627\u0644 \u062f\u0639\u0648\u062a\u0646\u0627\u0645\u0647<\/strong>: \u062f\u0639\u0648\u062a\u200c\u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0622\u062f\u0631\u0633\u200c\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0627\u0632 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u062f\u0639\u0648\u062a \u0634\u062f\u0647\u200c\u0627\u0646\u062f\u060c \u0642\u0628\u0644\u0627\u064b \u0639\u0636\u0648 \u0634\u062f\u0647\u200c\u0627\u0646\u062f \u06cc\u0627 \u0645\u0639\u062a\u0628\u0631 \u0646\u06cc\u0633\u062a\u0646\u062f\u060c \u0635\u0631\u0641\u0646\u0638\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c API \u067e\u0627\u0633\u062e\u06cc \u0631\u0627 \u0628\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f\u060c \u06a9\u0627\u0646\u0627\u0644 \u0648 \u062a\u0639\u062f\u0627\u062f \u062f\u0639\u0648\u062a\u200c\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647 \u06cc\u0627 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B5%D9%81%D8%AD%D9%87_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0635\u0641\u062d\u0647 \u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627 \u067e\u0631 \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 API \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>get-started<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062f\u0627\u062e\u0644 <code>\/app<\/code>\u060c \u0633\u067e\u0633 \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>page.tsx<\/code> \u062f\u0631 \u0622\u0646 \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/navigation<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">isUrl<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/lib\/utils<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ArrowDropdown<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/ArrowDropdown<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Avatar<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/Avatar<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Button<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/Button<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Hash<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Hash<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Home<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Home<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">MoreHoriz<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/MoreHoriz<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">RailButton<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/RailButton<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">SidebarButton<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/SidebarButton<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Tags<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/Tags<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">TextField<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/TextField<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">pattern<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`(http)?s?:?(\\\/\\\/[^\"']*\\.(?:png|jpg|jpeg|gif|png|svg))`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">GetStarted<\/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\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRouter<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">workspaceName<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setWorkspaceName<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">channelName<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setChannelName<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">emails<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setEmails<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">([]);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">imageUrl<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setImageUrl<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLoading<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">allFieldsValid<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Boolean<\/span><span class=\"p\">(<\/span>\n    <span class=\"nx\">workspaceName<\/span> <span class=\"o\">&amp;&amp;<\/span>\n      <span class=\"nx\">channelName<\/span> <span class=\"o\">&amp;&amp;<\/span>\n      <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">imageUrl<\/span> <span class=\"o\">||<\/span> <span class=\"p\">(<\/span><span class=\"nf\">isUrl<\/span><span class=\"p\">(<\/span><span class=\"nx\">imageUrl<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nc\">RegExp<\/span><span class=\"p\">(<\/span><span class=\"nx\">pattern<\/span><span class=\"p\">).<\/span><span class=\"nf\">test<\/span><span class=\"p\">(<\/span><span class=\"nx\">imageUrl<\/span><span class=\"p\">)))<\/span> <span class=\"o\">&amp;&amp;<\/span>\n      <span class=\"nx\">emails<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">onSubmit<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"na\">e<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FormEvent<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">HTMLFormElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">allFieldsValid<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">stopPropagation<\/span><span class=\"p\">();<\/span>\n\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/api\/workspaces\/create<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n          <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span>\n            <span class=\"na\">workspaceName<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspaceName<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">(),<\/span>\n            <span class=\"na\">channelName<\/span><span class=\"p\">:<\/span> <span class=\"nx\">channelName<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">(),<\/span>\n            <span class=\"nx\">emails<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">imageUrl<\/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\">result<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Workspace created successfully!<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span> <span class=\"nx\">channel<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">result<\/span><span class=\"p\">;<\/span>\n          <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/client\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">channel<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Error: <\/span><span class=\"p\">${<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error creating workspace:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n        <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">An unexpected error occurred.<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n  <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\">client font-lato w-screen h-screen flex flex-col<\/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\">absolute w-full h-full bg-theme-gradient<\/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\">relative w-full h-10 flex items-center justify-between pr-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;&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\">w-screen h-[calc(100svh-40px)] grid grid-cols-[70px_auto]<\/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\">hidden relative w-[4.375rem] sm:flex flex-col items-center overflow-hidden gap-3 pt-2 z-[1000] bg-transparent<\/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\">w-9 h-9 mb-[5px]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">Avatar<\/span>\n              <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">36<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">borderRadius<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">8<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">fontSize<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">20<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">fontWeight<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">600<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">data<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspaceName<\/span><span class=\"p\">,<\/span> <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">imageUrl<\/span> <span class=\"p\">}}<\/span>\n            <span class=\"sr\">\/<\/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\">relative flex flex-col items-center w-[3.25rem]<\/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\">relative<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">RailButton<\/span>\n                <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Home<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Home<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">filled<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span>\n                <span class=\"nx\">active<\/span>\n              <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\">absolute w-full h-full top-0 left-0<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <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\">relative opacity-30<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">RailButton<\/span>\n                <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">More<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">MoreHoriz<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span>\n              <span class=\"sr\">\/<\/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\">absolute w-full h-full top-0 left-0<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/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=\"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\">relative w-svw h-full sm:h-auto sm:w-auto flex mr-1 mb-1 rounded-md overflow-hidden border border-solid border-[#797c814d]<\/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\">hidden w-[275px] relative px-2 sm:flex flex-col flex-shrink-0 gap-3 min-w-0 min-h-0 max-h-[calc(100svh-44px)] bg-[#10121499] border-r-[1px] border-solid border-r-[#797c814d]<\/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\">pl-1 w-full h-[49px] flex items-center justify-between<\/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\">max-w-[calc(100%-80px)]<\/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\">w-fit max-w-full rounded-md py-[3px] px-2 flex items-center text-white hover:bg-hover-gray<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">truncate text-[18px] font-[900] leading-[1.33334]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"p\">{<\/span><span class=\"nx\">workspaceName<\/span><span class=\"p\">}<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/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=\"sr\">\/div<\/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><span class=\"nx\">channelName<\/span> <span class=\"o\">&amp;&amp;<\/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\">w-full flex flex-col<\/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\">h-7 -ml-1.5 flex items-center px-4 text-[15px] leading-7<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">hover:bg-hover-gray rounded-md<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">ArrowDropdown<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--icon-gray)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/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=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex px-[5px] max-w-full rounded-md text-sidebar-gray font-medium hover:bg-hover-gray<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"nx\">Channels<\/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\">SidebarButton<\/span> <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Hash<\/span><span class=\"p\">}<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">channelName<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/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=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute w-full h-full top-0 left-0<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n          <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\">bg-[#1a1d21] grow p-16 flex flex-col<\/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\">max-w-[705px] flex flex-col gap-8<\/span><span class=\"dl\">\"<\/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\">max-w-[632px] font-sans font-bold mb-2 text-[45px] leading-[46px] text-white<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"nx\">Create<\/span> <span class=\"nx\">a<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">workspace<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">form<\/span> <span class=\"nx\">onSubmit<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onSubmit<\/span><span class=\"p\">}<\/span> <span class=\"nx\">action<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{}}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">contents<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">TextField<\/span>\n                  <span class=\"nx\">label<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Workspace name<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">workspaceName<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">workspaceName<\/span><span class=\"p\">}<\/span>\n                  <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setWorkspaceName<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n                  <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Enter a name for your workspace<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">required<\/span>\n                <span class=\"o\">\/&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">TextField<\/span>\n                  <span class=\"nx\">label<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span><span class=\"o\">&gt;<\/span>\n                      <span class=\"nx\">Workspace<\/span> <span class=\"nx\">image<\/span><span class=\"p\">{<\/span><span class=\"dl\">'<\/span><span class=\"s1\"> <\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span>\n                      <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-[#9a9b9e] ml-0.5<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"nx\">optional<\/span><span class=\"p\">)<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>                  <span class=\"p\">}<\/span>\n                  <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">workspaceImage<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">url<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">imageUrl<\/span><span class=\"p\">}<\/span>\n                  <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setImageUrl<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n                  <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Paste an image URL<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">pattern<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`(http)?s?:?(\\\/\\\/[^\"']*\\.(?:png|jpg|jpeg|gif|png|svg))`<\/span><span class=\"p\">}<\/span>\n                  <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Image URL must start with \"http:\/\/\" or \"https:\/\/\" and end with \".png\", \".jpg\", \".jpeg\", \".gif\", or \".svg\"<\/span><span class=\"dl\">'<\/span>\n                <span class=\"o\">\/&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">TextField<\/span>\n                  <span class=\"nx\">label<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Channel name<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">channelName<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">channelName<\/span><span class=\"p\">}<\/span>\n                  <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n                    <span class=\"nf\">setChannelName<\/span><span class=\"p\">(<\/span>\n                      <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">.<\/span><span class=\"nf\">toLowerCase<\/span><span class=\"p\">().<\/span><span class=\"nf\">replace<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/<\/span><span class=\"se\">\\s<\/span><span class=\"sr\">\/g<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">-<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n                    <span class=\"p\">)<\/span>\n                  <span class=\"p\">}<\/span>\n                  <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Enter a name for your first channel<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">maxLength<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">80<\/span><span class=\"p\">}<\/span>\n                  <span class=\"nx\">required<\/span>\n                <span class=\"o\">\/&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Button<\/span>\n                  <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">submit<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">disabled<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">emails<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">}<\/span>\n                  <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-fit order-5 capitalize py-2 hover:bg-[#592a5a] hover:border-[#592a5a]<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"nx\">loading<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">loading<\/span><span class=\"p\">}<\/span>\n                <span class=\"o\">&gt;<\/span>\n                  <span class=\"nx\">Submit<\/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\">\/form<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">Tags<\/span>\n                <span class=\"nx\">values<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">emails<\/span><span class=\"p\">}<\/span>\n                <span class=\"nx\">setValues<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">setEmails<\/span><span class=\"p\">}<\/span>\n                <span class=\"nx\">label<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Invite members<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Enter email addresses<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"o\">\/&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/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=\"sr\">\/div<\/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=\"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\">GetStarted<\/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<p>\u062f\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627:<\/p>\n<ul>\n<li>\n<p>\u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062c\u0632\u0626\u06cc\u0627\u062a\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u060c \u0627\u0632 \u062c\u0645\u0644\u0647:<\/p>\n<ul>\n<li>\n<strong>\u0646\u0627\u0645 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong>: \u0646\u0627\u0645 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc.<\/li>\n<li>\n<strong>\u0646\u0627\u0645 \u06a9\u0627\u0646\u0627\u0644<\/strong>: \u0646\u0627\u0645 \u0627\u0648\u0644\u06cc\u0646 \u06a9\u0627\u0646\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<strong>\u0627\u06cc\u0645\u06cc\u0644 \u0627\u0639\u0636\u0627 \u0628\u0631\u0627\u06cc \u062f\u0639\u0648\u062a<\/strong>: \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0641\u0647\u0631\u0633\u062a\u06cc \u0627\u0632 \u0622\u062f\u0631\u0633 \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062f\u0639\u0648\u062a \u0627\u0639\u0636\u0627 \u0628\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0648\u0627\u0631\u062f \u06a9\u0646\u0646\u062f.<\/li>\n<li>\n<strong>\u062a\u0635\u0648\u06cc\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)<\/strong>: \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u06cc\u06a9 URL \u062a\u0635\u0648\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0641\u0631\u0645 \u0627\u0632 <code>useState<\/code> \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>allFieldsValid<\/code> \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u062a\u0645\u0627\u0645 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u067e\u0631 \u0634\u062f\u0647 \u0627\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0641\u0631\u0645 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f\u060c \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <code>POST<\/code> \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0647 <code>\/api\/workspaces\/create<\/code> \u0645\u0633\u06cc\u0631\u060c \u0639\u0628\u0648\u0631 \u0627\u0632 \u062c\u0632\u0626\u06cc\u0627\u062a \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc. \u062f\u0631 \u0635\u0648\u0631\u062a \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0648\u062f\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u060c \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u0646 \u0631\u0627\u0628\u0637 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u067e\u0631\u062f\u0627\u0632\u0634 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u060c \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0628\u0635\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06cc\u0627 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u062e\u0637\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0628\u0631\u0648\u0632 \u0645\u0634\u06a9\u0644.<\/p>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3c3qw72e5ktinpv75ycn.png\" alt=\"\u0635\u0641\u062d\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"475\" title=\"\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C_%D8%B4%D9%85%D8%A7\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u0648\u0644\u06cc\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0634\u0645\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0633\u0627\u062e\u062a\u0646 API \u0648 \u0635\u0641\u062d\u0647 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0631\u0627 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0633\u0627\u0646\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u0632\u0645\u0627\u0646 \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0648\u0644\u06cc\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0645\u0637\u0627\u0628\u0642 \u0627\u0646\u062a\u0638\u0627\u0631 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<ol>\n<li>\n<p><strong>\u0628\u0647 \u0635\u0641\u062d\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0631\u0648\u06cc\u062f<\/strong>: \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f <code>\/get-started<\/code> \u0635\u0641\u062d\u0647<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u0634\u062e\u0635\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u067e\u0631 \u06a9\u0646\u06cc\u062f<\/strong>: \u0646\u0627\u0645 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc\u060c \u0646\u0627\u0645 \u06a9\u0627\u0646\u0627\u0644 \u0648 \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0639\u0636\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0639\u0648\u062a \u06a9\u0646\u06cc\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0635\u0648\u06cc\u0631 (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)<\/strong>: \u062f\u0631 \u0635\u0648\u0631\u062a \u062a\u0645\u0627\u06cc\u0644\u060c \u06cc\u06a9 URL \u062a\u0635\u0648\u06cc\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0634\u062e\u0635\u06cc \u062a\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0641\u0631\u0645 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f<\/strong>: \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u00ab\u0627\u0631\u0633\u0627\u0644\u00bb \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u06cc\u062c\u0627\u062f \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f<\/strong>: \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0647\u0645\u0647 \u0627\u0639\u0636\u0627\u06cc \u062f\u0639\u0648\u062a \u0634\u062f\u0647 \u062f\u0639\u0648\u062a \u0646\u0627\u0645\u0647 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f<\/strong>: \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u062f\u0631 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0634\u0645\u0627 \u0641\u0647\u0631\u0633\u062a \u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u0648 \u06a9\u0627\u0646\u0627\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3s6b90ljzuwttgg7fgwq.gif\" alt=\"\u0627\u06cc\u062c\u0627\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"400\" title=\"\"><\/p>\n<p>\u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062c\u0631\u06cc\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A7%D8%B3%D8%AA%D8%B1%DB%8C%D9%85_%D8%AF%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%B4%D9%85%D8%A7\"><\/span>\n<p>  <strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0633\u062a\u0631\u06cc\u0645 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D8%B1%DB%8C%D9%85_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  <strong>\u0627\u0633\u062a\u0631\u06cc\u0645 \u0686\u06cc\u0633\u062a\u061f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Stream \u067e\u0644\u062a\u0641\u0631\u0645\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0686\u062a \u0648 \u0648\u06cc\u062f\u06cc\u0648\u06cc \u063a\u0646\u06cc \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0646\u062f. \u0628\u0647 \u062c\u0627\u06cc \u067e\u0631\u062f\u0627\u062e\u062a\u0646 \u0628\u0647 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0627\u06cc\u062c\u0627\u062f \u0686\u062a \u0648 \u0648\u06cc\u062f\u06cc\u0648 \u0627\u0632 \u067e\u0627\u06cc\u0647\u060c \u0627\u0633\u062a\u0631\u06cc\u0645 API \u0648 SDK \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u0633\u0631\u06cc\u0639 \u0648 \u0622\u0633\u0627\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u060c \u0645\u0627 \u0627\u0632 React SDK Stream \u0628\u0631\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648 \u0648 React Chat SDK \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0686\u062a \u0648 \u062a\u0645\u0627\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u062f\u0631 Slack clone \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%AD%D8%B3%D8%A7%D8%A8_%D8%AC%D8%B1%DB%8C%D8%A7%D9%86%DB%8C_%D8%B4%D9%85%D8%A7\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f \u062d\u0633\u0627\u0628 \u062c\u0631\u06cc\u0627\u0646\u06cc \u0634\u0645\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Falqjfxgq9b840qfqptvh.png\" alt=\"\u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645 \u062c\u0631\u06cc\u0627\u0646\u06cc\" loading=\"lazy\" width=\"800\" height=\"504\" title=\"\"><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Stream\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<ol>\n<li>\n<p><strong>\u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0646\u06cc\u062f<\/strong>: \u0628\u0647 \u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645 Stream \u0628\u0631\u0648\u06cc\u062f \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0645\u06cc\u0644 \u06cc\u0627 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0646\u0645\u0627\u06cc\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0646\u06cc\u062f<\/strong>:<\/p>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>* After signing up, you'll be asked for additional information, such as your role and industry.\n\n* Select the **\"Chat Messaging\"** and **\"Video and Audio\"** options since we need these tools for our app.\n\n    ![Strem sign up options](https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1726664432078\/966254af-e0b3-4a54-b395-52667e6374b7.png)\n\n* Click **\"Complete Signup\"** to continue.\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<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0627\u0633\u062a\u0631\u06cc\u0645 \u062e\u0648\u062f \u0647\u062f\u0627\u06cc\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AC%D8%B1%DB%8C%D8%A7%D9%86_%D8%AC%D8%AF%DB%8C%D8%AF\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u0631\u06cc\u0627\u0646 \u062c\u062f\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F10rp8spkd6wddmyrixqi.png\" alt=\"\u0641\u0631\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"420\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0627\u06a9\u0627\u0646\u062a \u0627\u0633\u062a\u0631\u06cc\u0645\u060c \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<ol>\n<li>\n<p><strong>\u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong>: \u062f\u0631 \u062f\u0627\u0634\u0628\u0648\u0631\u062f Stream \u062e\u0648\u062f\u060c \u0631\u0648\u06cc &#8221; \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/strong>\u062f\u06a9\u0645\u0647 &#8220;<\/p>\n<\/li>\n<li>\n<p><strong>\u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f<\/strong>:<\/p>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>* **App Name**: Enter a name like \"**Slack Clone**\" or any other name you choose.\n\n* **Region**: Pick the region nearest to you for the best performance.\n\n* **Environment**: Keep it set to \"**Development**\".\n\n* Click the \"**Create App**\" to finish.\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<ol>\n<li>\n<p><strong>\u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc API \u062e\u0648\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f<\/strong>: \u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u0628\u0647 \u0645\u0633\u06cc\u0631 &#8220;<strong>\u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647<\/strong>\u0628\u062e\u0634 &#8220;. \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 Stream \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0647 \u0627\u06cc\u0646 \u06a9\u0644\u06cc\u062f\u0647\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjopcd6ggynewvlhsr90l.png\" alt=\"\u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc API \u062c\u0631\u06cc\u0627\u0646\u06cc\" loading=\"lazy\" width=\"800\" height=\"168\" title=\"\"><\/p>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D9%85%D8%AC%D9%88%D8%B2%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\"><\/span>\n<p>  <strong>\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u062c\u0648\u0632\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645\u060c \u062e\u0648\u0627\u0646\u062f\u0646 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627 \u0648 \u0627\u0646\u062c\u0627\u0645 \u0633\u0627\u06cc\u0631 \u0627\u0642\u062f\u0627\u0645\u0627\u062a\u060c \u0628\u0627\u06cc\u062f \u0645\u062c\u0648\u0632\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u062f\u0631 \u062f\u0627\u0634\u0628\u0648\u0631\u062f Stream \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6uv4bzbbj1quc7ieic8y.png\" alt=\"\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0646\u0642\u0634 \u0647\u0627 \u0648 \u0645\u062c\u0648\u0632\u0647\u0627\" loading=\"lazy\" width=\"800\" height=\"420\" title=\"\"><\/p>\n<ol>\n<li>\n<p>\u0628\u0647 &#8220;<strong>\u0646\u0642\u0634 \u0647\u0627 \u0648 \u0645\u062c\u0648\u0632\u0647\u0627<\/strong>&#8220;\u0628\u0631\u06af\u0647 \u0632\u06cc\u0631&#8221;<strong>\u0686\u062a \u067e\u06cc\u0627\u0645<\/strong>&#8220;<\/p>\n<\/li>\n<li>\n<p>\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f &#8220;<strong>\u06a9\u0627\u0631\u0628\u0631<\/strong>&#8220;\u0646\u0642\u0634 \u0648 \u0627\u0646\u062a\u062e\u0627\u0628&#8221;<strong>\u067e\u06cc\u0627\u0645 \u0631\u0633\u0627\u0646\u06cc<\/strong>&#8221; \u062f\u0627\u0645\u0646\u0647<\/p>\n<\/li>\n<li>\n<p>\u0631\u0648\u06cc \u201d \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<strong>\u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f<\/strong>\u201d \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0645\u062c\u0648\u0632\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>* Create Message\n\n* Read Channel\n\n* Read Channel Members\n\n* Create Reaction\n\n* Upload Attachments\n\n* Create Attachments\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<ol>\n<li>\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u062a\u0627\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8_Stream_SDK\"><\/span>\n<p>  <strong>\u0646\u0635\u0628 Stream SDK<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Stream \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Next.js\u060c \u0628\u0627\u06cc\u062f \u0686\u0646\u062f SDK \u0646\u0635\u0628 \u06a9\u0646\u06cc\u0645:<\/p>\n<ol>\n<li>\n<p><strong>SDK \u0647\u0627 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/strong>: \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> @stream-io\/node-sdk @stream-io\/video-react-sdk stream-chat-react stream-chat\n<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u062a\u0646\u0638\u06cc\u0645 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc<\/strong>: \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc Stream API \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>.env.local<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<pre class=\"highlight shell\"><code><span class=\"nv\">NEXT_PUBLIC_STREAM_API_KEY<\/span><span class=\"o\">=<\/span>your_stream_api_key\n<span class=\"nv\">STREAM_API_SECRET<\/span><span class=\"o\">=<\/span>your_stream_api_secret\n<\/code><\/pre>\n<p>\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f <code>your_stream_api_key<\/code> \u0648 <code>your_stream_api_secret<\/code> \u0628\u0627 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062f\u0627\u0634\u0628\u0648\u0631\u062f Stream \u0634\u0645\u0627.<\/p>\n<\/li>\n<li>\n<p><strong>\u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 Stylesheets:<\/strong> Stream SDK \u0647\u0627 \u062f\u0627\u0631\u0627\u06cc \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0622\u0645\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627\u06cc \u0686\u062a \u0648 \u0648\u06cc\u062f\u06cc\u0648 \u0647\u0633\u062a\u0646\u062f. \u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f <code>app\/layout.tsx<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ app\/layout.tsx<\/span>\n<span class=\"p\">...<\/span> \n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@stream-io\/video-react-sdk\/dist\/css\/styles.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stream-chat-react\/dist\/css\/v2\/index.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/globals.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">...<\/span>\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D9%87%D9%85%DA%AF%D8%A7%D9%85_%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF_%D8%A8%D8%A7_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%D8%B3%D8%AA%D8%B1%DB%8C%D9%85_%D8%B4%D9%85%D8%A7\"><\/span>\n<p>  <strong>\u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u06a9\u0627\u0631\u0645\u0646\u062f \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0631\u06cc\u0645 \u0634\u0645\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0628\u06cc\u0646 \u06a9\u0627\u0631\u0645\u0646\u062f \u0648 \u062c\u0631\u06cc\u0627\u0646\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0648\u0628 \u0647\u0648\u06a9\u06cc \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u062f:<\/p>\n<ol>\n<li>\n<strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc ngrok:<\/strong> \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0648\u0628 \u0647\u0648\u06a9 \u0647\u0627 \u0628\u0647 \u06cc\u06a9 URL \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0639\u0645\u0648\u0645 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f\u060c \u0645\u0627 \u0627\u0632 ngrok \u0628\u0631\u0627\u06cc \u0627\u0641\u0634\u0627\u06cc \u0633\u0631\u0648\u0631 \u0645\u062d\u0644\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062a\u0648\u0646\u0644 ngrok \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>* Go to the [ngrok website](https:\/\/dashboard.ngrok.com\/signup) and sign up for a free account.\n\n* [Download and install ngrok](https:\/\/dashboard.ngrok.com\/get-started\/setup), then start a tunnel to your local server (assuming it's running on port 3000):\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 plaintext\"><code>    ```bash\n    ngrok http 3000 --domain=YOUR_DOMAIN\n    ```\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 plaintext\"><code>    Replace `YOUR_DOMAIN` with the [generated ngrok domain](https:\/\/dashboard.ngrok.com\/cloud-edge\/domains).\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<ol>\n<li><strong>\u06cc\u06a9 Webhook Endpoint \u062f\u0631 Clerk \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/strong><\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>* **Navigate to Webhooks**: In your\u00a0[Clerk dashboard](https:\/\/dashboard.clerk.com\/last-active?path=webhooks), navigate to the \u201c**Configure**\u201d tab\u00a0and select \"**Webhooks**.\u201d\n\n* **Add a New Endpoint**:\n\n    * Click \"**Add Endpoint**\" and enter your ngrok URL, followed by `\/api\/webhooks` (e.g., `https:\/\/your-subdomain.ngrok.io\/api\/webhooks`).\n\n    * Under \u201c**Subscribe to events**\u201d, select `user.created` and `user.updated`.\n\n    * Click \"**Create**\".\n\n* **Get the Signing Secret**: Copy the signing secret provided and add it to your `.env.local` file:\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 plaintext\"><code>    ```dockerfile\n    WEBHOOK_SECRET=your_clerk_webhook_signing_secret\n    ```\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 plaintext\"><code>    Replace `your_clerk_webhook_signing_secret` with the signing secret from the webhooks page.\n\n    ![Signing secret](https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1726741867125\/7c6ffd89-36ac-4c4b-a5e0-bd665796612d.png)\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<ol>\n<li>\n<p><strong>Svix \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/strong> \u0645\u0627 \u0628\u0647 Svix \u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0648 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0648\u0628 \u0647\u0648\u06a9 \u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u067e\u06a9\u06cc\u062c \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install <\/span>svix\n<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>Webhook Endpoint \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/strong> \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u0627\u06cc\u062f \u0645\u0633\u06cc\u0631\u06cc \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0628\u0627\u0631 \u0648\u0628 \u0647\u0648\u06a9 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>\/app\/api\/webhooks<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>route.ts<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Webhook<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">svix<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">headers<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/headers<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">WebhookEvent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs\/server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">StreamClient<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@stream-io\/node-sdk<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">API_KEY<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_STREAM_API_KEY<\/span><span class=\"o\">!<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">SECRET<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">STREAM_API_SECRET<\/span><span class=\"o\">!<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">WEBHOOK_SECRET<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">WEBHOOK_SECRET<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">POST<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Request<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">client<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">StreamClient<\/span><span class=\"p\">(<\/span><span class=\"nx\">API_KEY<\/span><span class=\"p\">,<\/span> <span class=\"nx\">SECRET<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">WEBHOOK_SECRET<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">Please add WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local<\/span><span class=\"dl\">'<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Get the headers<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">headerPayload<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">headers<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">svix_id<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">headerPayload<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">svix-id<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">svix_timestamp<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">headerPayload<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">svix-timestamp<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">svix_signature<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">headerPayload<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">svix-signature<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ If there are no headers, error out<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">svix_id<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">svix_timestamp<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">svix_signature<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error occured -- no svix headers<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">400<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Get the body<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">payload<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">body<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">payload<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Create a new Svix instance with your secret.<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">wh<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Webhook<\/span><span class=\"p\">(<\/span><span class=\"nx\">WEBHOOK_SECRET<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">let<\/span> <span class=\"nx\">evt<\/span><span class=\"p\">:<\/span> <span class=\"nx\">WebhookEvent<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"c1\">\/\/ Verify the payload with the headers<\/span>\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">evt<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">wh<\/span><span class=\"p\">.<\/span><span class=\"nf\">verify<\/span><span class=\"p\">(<\/span><span class=\"nx\">body<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">svix-id<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"nx\">svix_id<\/span><span class=\"p\">,<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">svix-timestamp<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"nx\">svix_timestamp<\/span><span class=\"p\">,<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">svix-signature<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"nx\">svix_signature<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">})<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">WebhookEvent<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error verifying webhook:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error occured<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">400<\/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\">eventType<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">evt<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"k\">switch <\/span><span class=\"p\">(<\/span><span class=\"nx\">eventType<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">case<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">user.created<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span>\n    <span class=\"k\">case<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">user.updated<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">newUser<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">evt<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">await<\/span> <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nf\">upsertUsers<\/span><span class=\"p\">([<\/span>\n        <span class=\"p\">{<\/span>\n          <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">newUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">user<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">newUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">first_name<\/span><span class=\"p\">}<\/span><span class=\"s2\"> <\/span><span class=\"p\">${<\/span><span class=\"nx\">newUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">last_name<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">custom<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"na\">username<\/span><span class=\"p\">:<\/span> <span class=\"nx\">newUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">username<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">newUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">email_addresses<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">email_address<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n          <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">newUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">has_image<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">newUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">image_url<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">]);<\/span>\n      <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">default<\/span><span class=\"p\">:<\/span>\n      <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Webhook processed<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">200<\/span> <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<p>\u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0648\u0628 \u0647\u0648\u06a9:<\/p>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>* We use Svix's `Webhook` class to verify incoming requests. If the request is valid, we sync the user data with Stream using the `upsertUsers` method for `user.created` and `user.updated` events.\n\n* For `user.created` and `user.updated` events, we sync the user data with Stream using `upsertUsers`.\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<ol>\n<li>\n<p><strong>Webhook Endpoint \u0631\u0627 \u0639\u0645\u0648\u0645\u06cc \u06a9\u0646\u06cc\u062f<\/strong>: \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc webhook \u0631\u0627 \u0628\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0639\u0645\u0648\u0645\u06cc \u062f\u0631 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc\u0627\u0646\u200c\u0627\u0641\u0632\u0627\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 Clerk \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0627\u0632 \u00ab\u062e\u0627\u0631\u062c\u00bb \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. \u0628\u0647 \u0633\u0645\u062a \u062e\u0648\u062f \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u062f <code>middleware.ts<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">clerkMiddleware<\/span><span class=\"p\">,<\/span> <span class=\"nx\">createRouteMatcher<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs\/server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">isPublicRoute<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createRouteMatcher<\/span><span class=\"p\">([<\/span>\n  <span class=\"p\">...<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">\/api\/webhooks(.*)<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">]);<\/span>\n<span class=\"p\">...<\/span>\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644\u060c \u0627\u0633\u062a\u0631\u06cc\u0645 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA%D9%86_%D9%87%D8%A7%D8%A8_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0633\u0627\u062e\u062a\u0646<\/strong> \u0647\u0627\u0628 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0631\u06a9\u0632 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0628\u062e\u0634 \u0645\u0631\u06a9\u0632\u06cc \u06a9\u0644\u0648\u0646 Slack \u0645\u0627 \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631 \u0622\u0646 \u0686\u062a \u06a9\u0646\u0646\u062f\u060c \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0631\u0642\u0631\u0627\u0631 \u06a9\u0646\u0646\u062f \u0648 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u0646\u062f. \u0647\u0645\u0647 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u0631\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f &#8211; \u0645\u0627\u0646\u0646\u062f \u0646\u062d\u0648\u0647 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0627\u0646\u0627\u0644\u200c\u0647\u0627 \u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637\u06cc Slack &#8211; \u06a9\u0647 \u0627\u0631\u062a\u0628\u0627\u0637 \u0648 \u06a9\u0627\u0631 \u0628\u0627 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0622\u0633\u0627\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_Layout\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f Layout<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u062a\u0645\u0627\u0645 \u0641\u0639\u0627\u0644\u06cc\u062a \u0647\u0627 \u062f\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0628\u062e\u0634 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc\u060c \u0646\u0627\u062d\u06cc\u0647 \u0686\u062a \u0648 huddle \u0631\u0627 \u06af\u0631\u062f \u0647\u0645 \u0645\u06cc \u0622\u0648\u0631\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>client<\/code> \u067e\u0648\u0634\u0647 \u062f\u0631 <code>app<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u0648 \u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>layout.tsx<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ReactNode<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">Channel<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Invitation<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Membership<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Workspace<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">PrismaWorkspace<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@prisma\/client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">UserButton<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useUser<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">StreamChat<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stream-chat<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Chat<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stream-chat-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">Call<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">StreamVideo<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">StreamVideoClient<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@stream-io\/video-react-sdk<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">ArrowBack<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/ArrowBack<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ArrowForward<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/ArrowForward<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Avatar<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/Avatar<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Bookmark<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Bookmark<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Clock<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Clock<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">IconButton<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/IconButton<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Help<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Help<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Home<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Home<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Plus<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Plus<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Messages<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Messages<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">MoreHoriz<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/MoreHoriz<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Notifications<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Notifications<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">RailButton<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/RailButton<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">SearchBar<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/SearchBar<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">WorkspaceLayout<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/WorkspaceLayout<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">WorkspaceSwitcher<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/WorkspaceSwitcher<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">LayoutProps<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">children<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">ReactNode<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">params<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">{<\/span> <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">type<\/span> <span class=\"nx\">Workspace<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">PrismaWorkspace<\/span> <span class=\"o\">&amp;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">channels<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Channel<\/span><span class=\"p\">[];<\/span>\n  <span class=\"nl\">memberships<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Membership<\/span><span class=\"p\">[];<\/span>\n  <span class=\"nl\">invitations<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Invitation<\/span><span class=\"p\">[];<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">AppContext<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createContext<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">{<\/span>\n  <span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Workspace<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setWorkspace<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Workspace<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">otherWorkspaces<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Workspace<\/span><span class=\"p\">[];<\/span>\n  <span class=\"nl\">setOtherWorkspaces<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">workspaces<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Workspace<\/span><span class=\"p\">[])<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">channel<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Channel<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setChannel<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">channel<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Channel<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">loading<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setLoading<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">loading<\/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=\"nl\">chatClient<\/span><span class=\"p\">:<\/span> <span class=\"nx\">StreamChat<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setChatClient<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">chatClient<\/span><span class=\"p\">:<\/span> <span class=\"nx\">StreamChat<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">videoClient<\/span><span class=\"p\">:<\/span> <span class=\"nx\">StreamVideoClient<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setVideoClient<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">videoClient<\/span><span class=\"p\">:<\/span> <span class=\"nx\">StreamVideoClient<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">channelCall<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Call<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setChannelCall<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">call<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Call<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"p\">{}<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">Workspace<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">setWorkspace<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{},<\/span>\n  <span class=\"na\">otherWorkspaces<\/span><span class=\"p\">:<\/span> <span class=\"p\">[],<\/span>\n  <span class=\"na\">setOtherWorkspaces<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{},<\/span>\n  <span class=\"na\">channel<\/span><span class=\"p\">:<\/span> <span class=\"p\">{}<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">Channel<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">setChannel<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{},<\/span>\n  <span class=\"na\">loading<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">setLoading<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{},<\/span>\n  <span class=\"na\">chatClient<\/span><span class=\"p\">:<\/span> <span class=\"p\">{}<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">StreamChat<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">setChatClient<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{},<\/span>\n  <span class=\"na\">videoClient<\/span><span class=\"p\">:<\/span> <span class=\"p\">{}<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">StreamVideoClient<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">setVideoClient<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{},<\/span>\n  <span class=\"na\">channelCall<\/span><span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">setChannelCall<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{},<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">tokenProvider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/api\/token<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span> <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}),<\/span>\n  <span class=\"p\">});<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">token<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">API_KEY<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_STREAM_API_KEY<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Layout<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">LayoutProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">user<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useUser<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLoading<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setWorkspace<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Workspace<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">channel<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setChannel<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Channel<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">otherWorkspaces<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setOtherWorkspaces<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Workspace<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">([]);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">chatClient<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setChatClient<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">StreamChat<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">videoClient<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setVideoClient<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">StreamVideoClient<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">channelCall<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setChannelCall<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Call<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">customProvider<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">token<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">tokenProvider<\/span><span class=\"p\">(<\/span><span class=\"nx\">user<\/span><span class=\"o\">!<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">token<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">setUpChatAndVideo<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">chatClient<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">StreamChat<\/span><span class=\"p\">.<\/span><span class=\"nf\">getInstance<\/span><span class=\"p\">(<\/span><span class=\"nx\">API_KEY<\/span><span class=\"p\">);<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">clerkUser<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">user<\/span><span class=\"o\">!<\/span><span class=\"p\">;<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">chatUser<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">clerkUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">clerkUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">fullName<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">clerkUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">imageUrl<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">custom<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">username<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">username<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">};<\/span>\n\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">chatClient<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"nx\">chatClient<\/span><span class=\"p\">.<\/span><span class=\"nf\">connectUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">chatUser<\/span><span class=\"p\">,<\/span> <span class=\"nx\">customProvider<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nf\">setChatClient<\/span><span class=\"p\">(<\/span><span class=\"nx\">chatClient<\/span><span class=\"p\">);<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">videoClient<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">StreamVideoClient<\/span><span class=\"p\">.<\/span><span class=\"nf\">getOrCreateInstance<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">apiKey<\/span><span class=\"p\">:<\/span> <span class=\"nx\">API_KEY<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">user<\/span><span class=\"p\">:<\/span> <span class=\"nx\">chatUser<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">tokenProvider<\/span><span class=\"p\">:<\/span> <span class=\"nx\">customProvider<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"nf\">setVideoClient<\/span><span class=\"p\">(<\/span><span class=\"nx\">videoClient<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">user<\/span><span class=\"p\">)<\/span> <span class=\"nf\">setUpChatAndVideo<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">user<\/span><span class=\"p\">,<\/span> <span class=\"nx\">videoClient<\/span><span class=\"p\">,<\/span> <span class=\"nx\">chatClient<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">chatClient<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">videoClient<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">user<\/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\">client font-lato w-screen h-screen flex flex-col<\/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\">absolute w-full h-full bg-theme-gradient<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/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\">AppContext<\/span><span class=\"p\">.<\/span><span class=\"nx\">Provider<\/span>\n      <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span>\n        <span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setWorkspace<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">otherWorkspaces<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setOtherWorkspaces<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">channel<\/span><span class=\"p\">:<\/span> <span class=\"nx\">channel<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setChannel<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">loading<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setLoading<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">chatClient<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setChatClient<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">videoClient<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setVideoClient<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">channelCall<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setChannelCall<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}}<\/span>\n    <span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Chat<\/span> <span class=\"nx\">client<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">chatClient<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">StreamVideo<\/span> <span class=\"nx\">client<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">videoClient<\/span><span class=\"p\">}<\/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\">client font-lato w-screen h-screen flex flex-col<\/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\">absolute w-full h-full bg-theme-gradient<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"cm\">\/* Toolbar *\/<\/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\">relative w-full h-10 flex items-center justify-between pr-1<\/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\">w-[4.375rem] h-10 mr-auto flex-none<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n              <span class=\"p\">{<\/span><span class=\"o\">!<\/span><span class=\"nx\">loading<\/span> <span class=\"o\">&amp;&amp;<\/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\">flex flex-auto items-center<\/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\">relative hidden sm:flex flex-none basis-[24%]<\/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 justify-start basis-full<\/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 justify-end basis-full mr-3<\/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 gap-1 items-center<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">IconButton<\/span>\n                          <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">ArrowBack<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span>\n                          <span class=\"nx\">disabled<\/span>\n                        <span class=\"o\">\/&gt;<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">IconButton<\/span>\n                          <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">ArrowForward<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span>\n                          <span class=\"nx\">disabled<\/span>\n                        <span class=\"o\">\/&gt;<\/span>\n                      <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\">flex items-center ml-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">IconButton<\/span> <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Clock<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/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=\"sr\">\/div<\/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\">SearchBar<\/span> <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`Search <\/span><span class=\"p\">${<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">?.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/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\">hidden sm:flex flex-[1_0_auto] items-center justify-end mr-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">IconButton<\/span> <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Help<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/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=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"p\">)}<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">{<\/span><span class=\"cm\">\/* Main *\/<\/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\">w-screen h-[calc(100svh-40px)] grid grid-cols-[70px_auto]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"p\">{<\/span><span class=\"cm\">\/* Rail *\/<\/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\">relative w-[4.375rem] flex flex-col items-center gap-3 pt-2 z-[1000] bg-transparent<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"p\">{<\/span><span class=\"o\">!<\/span><span class=\"nx\">loading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n                  <span class=\"o\">&lt;&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">WorkspaceSwitcher<\/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\">relative flex flex-col items-center w-[3.25rem]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                      <span class=\"o\">&lt;<\/span><span class=\"nx\">RailButton<\/span>\n                        <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Home<\/span><span class=\"dl\">\"<\/span>\n                        <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Home<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">filled<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span>\n                        <span class=\"nx\">active<\/span>\n                      <span class=\"o\">\/&gt;<\/span>\n                      <span class=\"o\">&lt;<\/span><span class=\"nx\">RailButton<\/span>\n                        <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">DMs<\/span><span class=\"dl\">\"<\/span>\n                        <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Messages<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span>\n                      <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>                      <span class=\"o\">&lt;<\/span><span class=\"nx\">RailButton<\/span>\n                        <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Activity<\/span><span class=\"dl\">\"<\/span>\n                        <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Notifications<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span>\n                      <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>                      <span class=\"o\">&lt;<\/span><span class=\"nx\">RailButton<\/span>\n                        <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Later<\/span><span class=\"dl\">\"<\/span>\n                        <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Bookmark<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span>\n                      <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>                      <span class=\"o\">&lt;<\/span><span class=\"nx\">RailButton<\/span>\n                        <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">More<\/span><span class=\"dl\">\"<\/span>\n                        <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">MoreHoriz<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">}<\/span>\n                      <span class=\"sr\">\/<\/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\">flex flex-col items-center gap-4 mt-auto pb-6 w-full<\/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\">cursor-pointer flex items-center justify-center w-9 h-9 rounded-full bg-[#565759]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">Plus<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                      <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\">relative h-9 w-9<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">UserButton<\/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\">absolute left-0 top-0 flex items-center justify-center pointer-events-none<\/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\">relative w-full h-full<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                            <span class=\"o\">&lt;<\/span><span class=\"nx\">Avatar<\/span>\n                              <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">36<\/span><span class=\"p\">}<\/span>\n                              <span class=\"nx\">borderRadius<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">8<\/span><span class=\"p\">}<\/span>\n                              <span class=\"nx\">fontSize<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">20<\/span><span class=\"p\">}<\/span>\n                              <span class=\"nx\">fontWeight<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">700<\/span><span class=\"p\">}<\/span>\n                              <span class=\"nx\">data<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span>\n                                <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">fullName<\/span><span class=\"o\">!<\/span><span class=\"p\">,<\/span>\n                                <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">imageUrl<\/span><span class=\"p\">,<\/span>\n                              <span class=\"p\">}}<\/span>\n                            <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>                            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute w-3.5 h-3.5 rounded-full flex items-center justify-center -bottom-[3px] -right-[3px] bg-[#111215]<\/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\">w-[8.5px] h-[8.5px] rounded-full bg-[#3daa7c]<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/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=\"sr\">\/div<\/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=\"sr\">\/div<\/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\">\/div<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">WorkspaceLayout<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/WorkspaceLayout<\/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=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/StreamVideo<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Chat<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/AppContext.Provider<\/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\">Layout<\/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<p>\u0686\u06cc\u0632\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc \u06af\u0630\u0631\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<ul>\n<li>\n<p><strong>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0632\u0645\u06cc\u0646\u0647<\/strong>: <code>AppContext<\/code> \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0647 \u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0641\u0639\u0644\u06cc\u060c \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627\u060c \u06a9\u0644\u0627\u06cc\u0646\u062a \u0686\u062a\u060c \u0633\u0631\u0648\u06cc\u0633 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0648\u06cc\u062f\u06cc\u0648 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631.<\/p>\n<\/li>\n<li>\n<p><strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0627\u06cc \u0686\u062a \u0648 \u0648\u06cc\u062f\u06cc\u0648<\/strong>: \u062f\u0631 \u062f\u0627\u062e\u0644 <code>useEffect<\/code>\u060c \u06cc\u06a9 \u062f\u0627\u0631\u06cc\u0645 <code>setUpChatAndVideo<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0627\u06cc \u0686\u062a \u0648 \u0648\u06cc\u062f\u06cc\u0648 \u0631\u0627 \u0627\u0632 \u0627\u0633\u062a\u0631\u06cc\u0645 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0686\u062a \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0633 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u062a\u0648\u06a9\u0646<\/strong>: <code>tokenProvider<\/code> \u062a\u0627\u0628\u0639 \u0627\u0632 \u0645\u0627 \u06cc\u06a9 \u0646\u0634\u0627\u0646\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u062f <code>\/api\/token<\/code> \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0627\u06cc\u0646 \u0646\u0634\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0633\u0631\u0648\u06cc\u0633 \u0647\u0627\u06cc Stream \u0628\u062f\u0627\u0646\u0646\u062f \u06a9\u0627\u0631\u0628\u0631 \u06a9\u06cc\u0633\u062a \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u062c\u0632\u0627\u06cc \u0627\u0635\u0644\u06cc<\/strong>: \u0637\u0631\u062d \u0628\u0647 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0645\u062e\u062a\u0644\u0641 \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<ul>\n<li>\n<strong>\u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631<\/strong>: \u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631 \u062f\u0627\u0631\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634\u060c \u0646\u0648\u0627\u0631 \u062c\u0633\u062a\u062c\u0648 \u0648 \u062f\u06a9\u0645\u0647 \u0631\u0627\u0647\u0646\u0645\u0627 \u0627\u0633\u062a.<\/li>\n<li>\n<strong>\u0631\u0627\u0647 \u0622\u0647\u0646<\/strong>: \u0627\u06cc\u0646 \u06cc\u06a9 \u0628\u062e\u0634 \u0639\u0645\u0648\u062f\u06cc \u0628\u0627 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f &#8220;\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc&#8221;\u060c &#8220;DMs&#8221;\u060c &#8220;Activity&#8221; \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a.<\/li>\n<li>\n<strong>WorkspaceSwitcher<\/strong>: \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u0628\u06cc\u0646 \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u0627\u0628\u062c\u0627 \u0634\u0648\u0646\u062f.<\/li>\n<li>\n<strong>Workspace Layout<\/strong>: <code>WorkspaceLayout<\/code> \u0634\u0627\u0645\u0644 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0646\u0627\u0644 \u0627\u0635\u0644\u06cc \u0627\u0633\u062a.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%85%D8%B3%DB%8C%D8%B1_API_Token\"><\/span>\n<p>  <strong>\u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0633\u06cc\u0631 API Token<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0628\u062e\u0634 \u0622\u062e\u0631\u060c \u06cc\u06a9 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u062a\u0648\u06a9\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645 \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f <code>\/api\/token<\/code> \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0634\u0627\u0646\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 Stream. \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u0633\u06cc\u0631 API \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>\/app\/api\/token<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u0633\u067e\u0633 \u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>route.ts<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">StreamClient<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@stream-io\/node-sdk<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">API_KEY<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_STREAM_API_KEY<\/span><span class=\"o\">!<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">SECRET<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">STREAM_API_SECRET<\/span><span class=\"o\">!<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">POST<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Request<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">client<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">StreamClient<\/span><span class=\"p\">(<\/span><span class=\"nx\">API_KEY<\/span><span class=\"p\">,<\/span> <span class=\"nx\">SECRET<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">body<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">request<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">userId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">body<\/span><span class=\"p\">?.<\/span><span class=\"nx\">userId<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">userId<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">Response<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">token<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">client<\/span><span class=\"p\">.<\/span><span class=\"nf\">generateUserToken<\/span><span class=\"p\">({<\/span> <span class=\"na\">user_id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">});<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">token<\/span><span class=\"p\">:<\/span> <span class=\"nx\">token<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nx\">Response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><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<p>\u062f\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627\u060c \u0645\u0627 \u0627\u0632 Stream&#39;s Node SDK \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062a\u0648\u06a9\u0646 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. <code>userId<\/code>. \u0627\u06cc\u0646 \u062a\u0648\u06a9\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0686\u062a \u0648 \u0648\u06cc\u062f\u06cc\u0648\u06cc Stream \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AC%D8%B2%D8%A1_%D8%B3%D9%88%D8%A6%DB%8C%DA%86%D8%B1_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u062c\u0632\u0621 \u0633\u0648\u0626\u06cc\u0686\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0639\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>WorkspaceSwitcher<\/code> \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0628\u062e\u0634 \u0642\u0628\u0644 \u0628\u0647 \u0637\u0631\u062d \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>WorkspaceSwitcher.tsx<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>components<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">MutableRefObject<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/navigation<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">clsx<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">clsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Workspace<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/app\/client\/layout<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Avatar<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Avatar<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Plus<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/icons\/Plus<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">useClickOutside<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/hooks\/useClickOutside<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">WorkspaceSwitcher<\/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\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRouter<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">open<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setOpen<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setWorkspace<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">otherWorkspaces<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setOtherWorkspaces<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setChannel<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppContext<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">domNode<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useClickOutside<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setOpen<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">},<\/span> <span class=\"kc\">true<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">MutableRefObject<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">HTMLDivElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">switchWorkspace<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">otherWorkspace<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Workspace<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setOtherWorkspaces<\/span><span class=\"p\">([<\/span>\n      <span class=\"p\">...<\/span><span class=\"nx\">otherWorkspaces<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">((<\/span><span class=\"nx\">w<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">w<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">otherWorkspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">),<\/span>\n      <span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">]);<\/span>\n    <span class=\"nf\">setWorkspace<\/span><span class=\"p\">(<\/span><span class=\"nx\">otherWorkspace<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setChannel<\/span><span class=\"p\">(<\/span><span class=\"nx\">otherWorkspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">channels<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">]);<\/span>\n    <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span>\n      <span class=\"s2\">`\/client\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">otherWorkspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">otherWorkspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">channels<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n    <span class=\"p\">);<\/span>\n  <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>\n      <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setOpen<\/span><span class=\"p\">((<\/span><span class=\"nx\">prev<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">prev<\/span><span class=\"p\">)}<\/span>\n      <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative w-9 h-9 mb-[5px] cursor-pointer<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Avatar<\/span>\n        <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">36<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">borderRadius<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">8<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">fontSize<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">20<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">fontWeight<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">700<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">data<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span> <span class=\"p\">}}<\/span>\n      <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n        <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">domNode<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nf\">clsx<\/span><span class=\"p\">(<\/span>\n          <span class=\"dl\">'<\/span><span class=\"s1\">z-[99] absolute top-11 -left-3 flex-col items-start text-channel-gray text-left w-[360px] rounded-xl overflow-hidden bg-[#212428] border border-[#797c8126] py-1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n          <span class=\"nx\">open<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">hidden<\/span><span class=\"dl\">'<\/span>\n        <span class=\"p\">)}<\/span>\n      <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\">w-full px-4 py-2 text-[15px] leading-7 hover:bg-[#36383b]<\/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\">leading-[22px] font-bold truncate<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n          <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\">text-[13px] leading-[18px]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">.<\/span><span class=\"nf\">replace<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/<\/span><span class=\"se\">\\s<\/span><span class=\"sr\">\/g<\/span><span class=\"p\">,<\/span> <span class=\"dl\">''<\/span><span class=\"p\">).<\/span><span class=\"nf\">toLowerCase<\/span><span class=\"p\">()}.<\/span><span class=\"nx\">slack<\/span><span class=\"p\">.<\/span><span class=\"nx\">com<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/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\">w-full h-[1px] my-2 bg-[#797c8126]<\/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 flex-col text-[12.8px] leading-[1.38463] m-[4px_12px_4px_16px]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Never<\/span> <span class=\"nx\">miss<\/span> <span class=\"nx\">a<\/span> <span class=\"nx\">notification<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">cursor-pointer text-[#1D9BD1] hover:underline<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"nx\">Get<\/span> <span class=\"nx\">the<\/span> <span class=\"nx\">Slack<\/span> <span class=\"nx\">app<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span&gt;{' '<\/span><span class=\"err\">}\n<\/span>            <span class=\"nx\">to<\/span> <span class=\"nx\">see<\/span> <span class=\"nx\">notifications<\/span> <span class=\"k\">from<\/span> <span class=\"nx\">your<\/span> <span class=\"nx\">other<\/span> <span class=\"nx\">workspaces<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/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\">w-full h-[1px] my-2 bg-[#797c8126]<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">otherWorkspaces<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">otherWorkspace<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n            <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">otherWorkspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">px-4 flex items-center w-full h-[52px] hover:bg-[#37393d] gap-3 text-[14.8px]<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">switchWorkspace<\/span><span class=\"p\">(<\/span><span class=\"nx\">otherWorkspace<\/span><span class=\"p\">)}<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">Avatar<\/span>\n              <span class=\"nx\">width<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">36<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">borderRadius<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">8<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">fontSize<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">20<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">fontWeight<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">700<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">data<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">otherWorkspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"na\">image<\/span><span class=\"p\">:<\/span> <span class=\"nx\">otherWorkspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span> <span class=\"p\">}}<\/span>\n            <span class=\"sr\">\/<\/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\">flex flex-col text-left<\/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\">leading-[22px] font-bold truncate<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"p\">{<\/span><span class=\"nx\">otherWorkspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n              <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\">text-[13px] leading-[18px]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"p\">{<\/span><span class=\"nx\">otherWorkspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">.<\/span><span class=\"nf\">replace<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/<\/span><span class=\"se\">\\s<\/span><span class=\"sr\">\/g<\/span><span class=\"p\">,<\/span> <span class=\"dl\">''<\/span><span class=\"p\">).<\/span><span class=\"nf\">toLowerCase<\/span><span class=\"p\">()}.<\/span><span class=\"nx\">slack<\/span><span class=\"p\">.<\/span><span class=\"nx\">com<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/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=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">px-4 flex items-center w-full h-[52px] hover:bg-[#37393d] gap-3 text-[14.8px]<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/get-started`<\/span><span class=\"p\">)}<\/span>\n        <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\">w-9 h-9 flex items-center justify-center rounded-lg bg-[#f8f8f80f]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">Plus<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">filled<\/span> <span class=\"o\">\/&gt;<\/span>\n          <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\">flex flex-col text-left text-white<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"nx\">Add<\/span> <span class=\"nx\">a<\/span> <span class=\"nx\">workspace<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <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=\"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\">WorkspaceSwitcher<\/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<p>\u062f\u0631 <code>WorkspaceSwitcher<\/code> \u062c\u0632\u0621\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u06cc\u06a9 \u06a9\u0634\u0648\u06cc\u06cc \u062f\u0627\u0631\u06cc\u0645. \u0627\u06cc\u0646 \u06a9\u0634\u0648\u06cc\u06cc \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u06cc\u0646 \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u0627\u0628\u062c\u0627 \u0634\u0648\u0646\u062f \u06cc\u0627 \u0641\u0636\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0646\u062f.<\/p>\n<ul>\n<li>\n<p><strong>\u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong>: <code>switchWorkspace<\/code> \u062a\u0627\u0628\u0639 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0648 \u06a9\u0627\u0646\u0627\u0644 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0633\u067e\u0633 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0631\u0648\u06cc Outside \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<\/strong>: <code>useClickOutside<\/code> \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0646 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u062a\u0639\u0648\u06cc\u0636 \u06a9\u0646\u0646\u062f\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u062c\u0627\u06cc\u06cc \u062e\u0627\u0631\u062c \u0627\u0632 \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/strong>: \u062f\u06a9\u0645\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0647\u062f\u0627\u06cc\u062a \u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D9%85%D9%88%D9%84%D9%81%D9%87_%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0633\u0627\u062e\u062a \u0645\u0648\u0644\u0641\u0647 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0639\u062f\u060c \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>WorkspaceLayout<\/code> \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0628\u062e\u0634 \u0642\u0628\u0644 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645\u060c \u0645\u0634\u0627\u0628\u0647 \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0622\u0646 <code>WorkspaceSwitcher<\/code> \u062c\u0632\u0621<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>WorkspaceLayout.tsx<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>components<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ReactNode<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">clsx<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">clsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/app\/client\/layout<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Sidebar<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Sidebar<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">WorkspaceLayoutProps<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">children<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ReactNode<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">WorkspaceLayout<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">WorkspaceLayoutProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">loading<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppContext<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">layoutRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">HTMLDivElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">layoutWidth<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLayoutWidth<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">layoutRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">resizeObserver<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">ResizeObserver<\/span><span class=\"p\">((<\/span><span class=\"nx\">entries<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">entry<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">entries<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">setLayoutWidth<\/span><span class=\"p\">(<\/span><span class=\"nx\">entry<\/span><span class=\"p\">.<\/span><span class=\"nx\">contentRect<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">resizeObserver<\/span><span class=\"p\">.<\/span><span class=\"nf\">observe<\/span><span class=\"p\">(<\/span><span class=\"nx\">layoutRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">resizeObserver<\/span><span class=\"p\">.<\/span><span class=\"nf\">disconnect<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">layoutRef<\/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>\n      <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">layoutRef<\/span><span class=\"p\">}<\/span>\n      <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nf\">clsx<\/span><span class=\"p\">(<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">relative flex mr-1 mb-1 rounded-md overflow-hidden border border-solid<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">loading<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">border-transparent<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">border-[#797c814d]<\/span><span class=\"dl\">'<\/span>\n      <span class=\"p\">)}<\/span>\n    <span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"cm\">\/* Sidebar *\/<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Sidebar<\/span> <span class=\"nx\">layoutWidth<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">layoutWidth<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">{<\/span><span class=\"nx\">layoutWidth<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">&amp;&amp;<\/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\">bg-[#1a1d21] grow<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/div&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=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">WorkspaceLayout<\/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<p>\u0631\u0627 <code>WorkspaceLayout<\/code> \u062c\u0632\u0621 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u062b\u0627\u0628\u062a \u0628\u0631\u0627\u06cc \u06a9\u0644 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0634\u0627\u0645\u0644:<\/p>\n<ul>\n<li>\n<p><strong>\u0627\u062f\u063a\u0627\u0645 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc<\/strong>: <code>Sidebar<\/code> \u062f\u0631 \u0627\u06cc\u0646 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u06af\u0646\u062c\u0627\u0646\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0647 \u062a\u0645\u0627\u0645 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0639\u0631\u0636 \u0637\u0631\u062d<\/strong>: \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0632 a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>ResizeObserver<\/code> \u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0639\u0631\u0636 \u0641\u0639\u0644\u06cc \u0637\u0631\u062d \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0645\u0646\u0627\u0633\u0628.<\/p>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%85%D9%88%D9%84%D9%81%D9%87_%D9%BE%DB%8C%D8%B4_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%DA%A9%D8%A7%D9%86%D8%A7%D9%84\"><\/span>\n<p>  <strong>\u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0648\u0644\u0641\u0647 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0646\u0627\u0644<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0639\u062f\u060c \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>ChannelPreview<\/code> \u062c\u0632\u0621\u060c \u06a9\u0647 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0627\u0632 \u0647\u0631 \u06a9\u0627\u0646\u0627\u0644 \u0631\u0627 \u062f\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>ChannelPreview.tsx<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>components<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ChannelPreviewUIComponentProps<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stream-chat-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">usePathname<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/navigation<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/app\/client\/layout<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Hash<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/icons\/Hash<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">SidebarButton<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/SidebarButton<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">ChannelPreview<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span>\n  <span class=\"nx\">channel<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">displayTitle<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">unread<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}:<\/span> <span class=\"nx\">ChannelPreviewUIComponentProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">pathname<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">usePathname<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRouter<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setChannel<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppContext<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">goToChannel<\/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\">channelId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">channel<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">;<\/span>\n    <span class=\"nf\">setChannel<\/span><span class=\"p\">(<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">channels<\/span><span class=\"p\">.<\/span><span class=\"nf\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">c<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">c<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">channelId<\/span><span class=\"p\">)<\/span><span class=\"o\">!<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/client\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">channelId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">channelActive<\/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\">pathChannelId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">pathname<\/span><span class=\"p\">.<\/span><span class=\"nf\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">filter<\/span><span class=\"p\">(<\/span><span class=\"nb\">Boolean<\/span><span class=\"p\">).<\/span><span class=\"nf\">pop<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">pathChannelId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">channel<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">SidebarButton<\/span>\n      <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Hash<\/span><span class=\"p\">}<\/span>\n      <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">displayTitle<\/span><span class=\"p\">}<\/span>\n      <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">goToChannel<\/span><span class=\"p\">}<\/span>\n      <span class=\"nx\">active<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nf\">channelActive<\/span><span class=\"p\">()}<\/span>\n      <span class=\"nx\">boldText<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nc\">Boolean<\/span><span class=\"p\">(<\/span><span class=\"nx\">unread<\/span><span class=\"p\">)}<\/span>\n    <span class=\"sr\">\/<\/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\">ChannelPreview<\/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<p>\u062f\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627:<\/p>\n<ul>\n<li>\n<p><strong>\u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0646\u0627\u0644<\/strong>: <code>ChannelPreview<\/code> \u062c\u0632\u0621 \u0647\u0631 \u06a9\u0627\u0646\u0627\u0644 \u0631\u0627 \u062f\u0631 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f. \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0631\u0648\u06cc \u06cc\u06a9 \u06a9\u0627\u0646\u0627\u0644 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u0646\u062f \u062a\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u060c \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u0646\u062f <code>goToChannel<\/code> \u062a\u0627\u0628\u0639\u060c \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0646\u0627\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u062a\u0646 \u067e\u0631\u0631\u0646\u06af \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0647 \u0646\u0634\u062f\u0647<\/strong>: \u0627\u06af\u0631 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0647\u200c\u0646\u0634\u062f\u0647 \u062f\u0631 \u06a9\u0627\u0646\u0627\u0644\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0646\u0627\u0645 \u06a9\u0627\u0646\u0627\u0644 \u0628\u0627 \u0645\u062a\u0646 \u067e\u0631\u0631\u0646\u06af \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0628\u0647 \u0622\u0633\u0627\u0646\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0628\u06cc\u0646\u0646\u062f \u06a9\u062f\u0627\u0645 \u06a9\u0627\u0646\u0627\u0644\u200c\u0647\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0648\u062c\u0647 \u062f\u0627\u0631\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0628\u0631\u062c\u0633\u062a\u0647 \u06a9\u0627\u0646\u0627\u0644 \u0641\u0639\u0627\u0644<\/strong>: <code>channelActive<\/code> \u062a\u0627\u0628\u0639 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u06a9\u0627\u0646\u0627\u0644 \u0641\u0639\u0644\u06cc \u0641\u0639\u0627\u0644 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062f\u0627\u0646\u0646\u062f \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u06a9\u062f\u0627\u0645 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0633\u062a\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%86%D9%88%D8%A7%D8%B1_%DA%A9%D9%86%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0627\u0641\u0632\u0648\u062f\u0646 \u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0648\u0644\u06cc\u0647 \u0627\u0632 <code>Sidebar<\/code> \u062c\u0632\u0621 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u0633\u0631\u06cc\u0639 \u0628\u0647 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627 \u0628\u062f\u0647\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>Sidebar.tsx<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>components<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useMemo<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useUser<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ChannelList<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stream-chat-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">clsx<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">clsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/app\/client\/layout<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ArrowDropdown<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/icons\/ArrowDropdown<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">CaretDown<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/icons\/CaretDown<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ChannelPreview<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/ChannelPreview<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Compose<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/icons\/Compose<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">IconButton<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/IconButton<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Refine<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/icons\/Refine<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Send<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/icons\/Send<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">SidebarButton<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/SidebarButton<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Threads<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/icons\/Threads<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">minWidth<\/span><span class=\"p\">,<\/span> <span class=\"nx\">defaultWidth<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"mi\">215<\/span><span class=\"p\">,<\/span> <span class=\"mi\">275<\/span><span class=\"p\">];<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">SidebarProps<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">layoutWidth<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">Sidebar<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">layoutWidth<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">SidebarProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">user<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useUser<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">workspace<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppContext<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">width<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setWidth<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">number<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">savedWidth<\/span> <span class=\"o\">=<\/span>\n      <span class=\"nf\">parseInt<\/span><span class=\"p\">(<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">sidebarWidth<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span>\n      <span class=\"nx\">defaultWidth<\/span><span class=\"p\">;<\/span>\n    <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">sidebarWidth<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nc\">String<\/span><span class=\"p\">(<\/span><span class=\"nx\">savedWidth<\/span><span class=\"p\">));<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">savedWidth<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">});<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">maxWidth<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useMemo<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">layoutWidth<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">374<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"nx\">layoutWidth<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">isDragged<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">layoutWidth<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">onMouseMove<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">e<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MouseEvent<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">isDragged<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">userSelect<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">none<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n      <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">cursor<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">col-resize<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n      <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.sidebar-btn<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">el<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">el<\/span><span class=\"p\">.<\/span><span class=\"nf\">setAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">style<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">cursor: col-resize<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"nf\">setWidth<\/span><span class=\"p\">((<\/span><span class=\"nx\">previousWidth<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">newWidth<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">previousWidth<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">movementX<\/span> <span class=\"o\">\/<\/span> <span class=\"mf\">1.3<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">newWidth<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">minWidth<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">return<\/span> <span class=\"nx\">minWidth<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">newWidth<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nx\">maxWidth<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">return<\/span> <span class=\"nx\">maxWidth<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">newWidth<\/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\">onMouseUp<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">userSelect<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">auto<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n      <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">cursor<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">auto<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n      <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.sidebar-btn<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">el<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">el<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">style<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"nx\">isDragged<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mousemove<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onMouseMove<\/span><span class=\"p\">);<\/span>\n    <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mousemove<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onMouseMove<\/span><span class=\"p\">);<\/span>\n    <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mouseup<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onMouseUp<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mousemove<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onMouseMove<\/span><span class=\"p\">);<\/span>\n      <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mouseup<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">onMouseUp<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">layoutWidth<\/span><span class=\"p\">,<\/span> <span class=\"nx\">maxWidth<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">layoutWidth<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">layoutWidth<\/span> <span class=\"o\">&lt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">width<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">newWidth<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">width<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">width<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nx\">maxWidth<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">newWidth<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">maxWidth<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nf\">setWidth<\/span><span class=\"p\">(<\/span><span class=\"nx\">newWidth<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">sidebarWidth<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nc\">String<\/span><span class=\"p\">(<\/span><span class=\"nx\">width<\/span><span class=\"p\">));<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">width<\/span><span class=\"p\">,<\/span> <span class=\"nx\">layoutWidth<\/span><span class=\"p\">,<\/span> <span class=\"nx\">maxWidth<\/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>\n      <span class=\"nx\">id<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">sidebar<\/span><span class=\"dl\">\"<\/span>\n      <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">width<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">width<\/span><span class=\"p\">}<\/span><span class=\"s2\">px`<\/span> <span class=\"p\">}}<\/span>\n      <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nf\">clsx<\/span><span class=\"p\">(<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">hidden relative px-2 sm:flex flex-col flex-shrink-0 gap-3 min-w-0 min-h-0 max-h-[calc(100svh-44px)] bg-[#10121499] border-r-[1px] border-solid<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">loading<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">border-r-transparent<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">border-r-[#797c814d]<\/span><span class=\"dl\">'<\/span>\n      <span class=\"p\">)}<\/span>\n    <span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"o\">!<\/span><span class=\"nx\">loading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;&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\">pl-1 w-full h-[49px] flex items-center justify-between<\/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\">max-w-[calc(100%-80px)]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-fit max-w-full rounded-md py-[3px] px-2 flex items-center text-white hover:bg-hover-gray<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">truncate text-[18px] font-[900] leading-[1.33334]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/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\">flex-shrink-0<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">CaretDown<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">18<\/span><span class=\"p\">}<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>              <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\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex <\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">IconButton<\/span>\n                <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">Refine<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fill-icon-gray group-hover:fill-white<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                <span class=\"p\">}<\/span>\n                <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-9 h-9 hover:bg-hover-gray<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"o\">\/&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">IconButton<\/span>\n                <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">Compose<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fill-icon-gray group-hover:fill-white<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                <span class=\"p\">}<\/span>\n                <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-9 h-9 hover:bg-hover-gray<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"o\">\/&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/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\">w-full flex flex-col<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">SidebarButton<\/span> <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Threads<\/span><span class=\"p\">}<\/span> <span class=\"nx\">iconSize<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">lg<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Threads<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">SidebarButton<\/span> <span class=\"nx\">icon<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Send<\/span><span class=\"p\">}<\/span> <span class=\"nx\">iconSize<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">lg<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Drafts &amp; sent<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n          <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\">w-full flex flex-col<\/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\">h-7 -ml-1.5 flex items-center px-4 text-[15px] leading-7<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">hover:bg-hover-gray rounded-md<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">ArrowDropdown<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--icon-gray)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/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=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex px-[5px] max-w-full rounded-md text-sidebar-gray font-medium hover:bg-hover-gray<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"nx\">Channels<\/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\">ChannelList<\/span>\n              <span class=\"nx\">filters<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">}}<\/span>\n              <span class=\"nx\">Preview<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">ChannelPreview<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">sort<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span>\n                <span class=\"na\">created_at<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n              <span class=\"p\">}}<\/span>\n              <span class=\"nx\">LoadingIndicator<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"kc\">null<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">lockChannelOrder<\/span>\n            <span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"p\">{<\/span><span class=\"cm\">\/* Handle *\/<\/span><span class=\"p\">}<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute -right-1 w-2 h-full bg-transparent cursor-col-resize<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">onMouseDown<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">isDragged<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n            <span class=\"p\">}}<\/span>\n          <span class=\"sr\">\/<\/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\">\/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\">Sidebar<\/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<p>\u062f\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627:<\/p>\n<ul>\n<li>\n<p><strong>\u0646\u0648\u0627\u0631 \u06a9\u0646\u0627\u0631\u06cc \u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647<\/strong>: <code>Sidebar<\/code> \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0646\u062f\u0627\u0632\u0647 \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u062f \u0648 \u0628\u0647 \u0627\u0648 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0639\u0631\u0636 \u0631\u0627 \u0647\u0631 \u0637\u0648\u0631 \u06a9\u0647 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0644\u06cc\u0633\u062a \u06a9\u0627\u0646\u0627\u0644<\/strong>: <code>ChannelList<\/code> \u0627\u0632 <code>stream-chat-react<\/code> \u062a\u0645\u0627\u0645 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f. \u0644\u06cc\u0633\u062a \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0641\u06cc\u0644\u062a\u0631 \u0648 \u0645\u0631\u062a\u0628 \u06a9\u0631\u062f \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f \u0631\u0627 \u0633\u0631\u06cc\u0639 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0628\u0639\u062f\u060c \u0627\u0633\u062a\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>globals.css<\/code> \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0633\u062a\u0627\u06cc\u0644 \u067e\u06cc\u0634 \u0641\u0631\u0636 <code>ChannelList<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"o\">...<\/span>\n<span class=\"k\">@layer<\/span> <span class=\"n\">components<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">#sidebar<\/span>\n    <span class=\"nc\">.str-chat.messaging.light.str-chat__channel-list.str-chat__channel-list-react<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">#sidebar<\/span>\n    <span class=\"nc\">.str-chat.messaging.light.str-chat__channel-list.str-chat__channel-list-react<\/span>\n    <span class=\"o\">&gt;<\/span> <span class=\"nt\">div<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><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<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%85%D8%B3%DB%8C%D8%B1_API_Workspace\"><\/span>\n<p>  <strong>\u0627\u06cc\u062c\u0627\u062f \u0645\u0633\u06cc\u0631 API Workspace<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc\u060c \u0628\u0647 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 API \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>route.ts<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 a <code>\/api\/workspaces\/[workspaceId]<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NextResponse<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">auth<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs\/server<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"nx\">prisma<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/lib\/prisma<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">GET<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">_<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Request<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">{<\/span> <span class=\"nx\">params<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">params<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">{<\/span> <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">}<\/span>\n<span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">auth<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">userId<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Authentication required<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">401<\/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\">workspaceId<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"k\">await<\/span> <span class=\"nx\">params<\/span><span class=\"p\">).<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">workspaceId<\/span> <span class=\"o\">||<\/span> <span class=\"nb\">Array<\/span><span class=\"p\">.<\/span><span class=\"nf\">isArray<\/span><span class=\"p\">(<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Invalid workspace ID<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">400<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Check if the user is a member of the workspace<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">membership<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">membership<\/span><span class=\"p\">.<\/span><span class=\"nf\">findUnique<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">userId_workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n          <span class=\"nx\">workspaceId<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">membership<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">({<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Access denied<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">403<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Fetch the workspace along with related data<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">workspace<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nf\">findUnique<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspaceId<\/span> <span class=\"p\">},<\/span>\n      <span class=\"na\">include<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">channels<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">memberships<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">invitations<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">acceptedAt<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Workspace not found<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">404<\/span> <span class=\"p\">}<\/span>\n      <span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Fetch the other workspaces the user is a member of excluding the current workspace<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">otherWorkspaces<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nf\">findMany<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">memberships<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">some<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">not<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspaceId<\/span> <span class=\"p\">},<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">include<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">channels<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">memberships<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">invitations<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">acceptedAt<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">({<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span> <span class=\"nx\">otherWorkspaces<\/span> <span class=\"p\">},<\/span> <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">200<\/span> <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error fetching workspace:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">NextResponse<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Internal server error<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">500<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nx\">prisma<\/span><span class=\"p\">.<\/span><span class=\"nf\">$disconnect<\/span><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<p>\u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>GET<\/code> \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0634\u0646\u0627\u0633\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 URL:<\/p>\n<ul>\n<li>\n<p><strong>\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/strong>: \u0645\u0633\u06cc\u0631 \u0627\u0628\u062a\u062f\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u062a\u0623\u06cc\u06cc\u062f \u062c\u0644\u0633\u0647 \u062e\u0648\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0639\u0636\u0648\u06cc\u062a<\/strong>: \u0647\u0645\u0686\u0646\u06cc\u0646 \u0642\u0628\u0644 \u0627\u0632 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627\u060c \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0639\u0636\u0648\u06cc \u0627\u0632 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<\/li>\n<li>\n<p><strong>\u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627<\/strong>: \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0645\u062c\u0627\u0632 \u0628\u0627\u0634\u062f\u060c \u0645\u0633\u06cc\u0631\u060c \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc\u060c \u06a9\u0627\u0646\u0627\u0644\u200c\u0647\u0627 \u0648 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0639\u0636\u0648\u06cc\u062a \u0631\u0627 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0647\u0631 \u062f\u0639\u0648\u062a\u200c\u0646\u0627\u0645\u0647 \u062f\u0631 \u0627\u0646\u062a\u0638\u0627\u0631\u06cc \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B5%D9%81%D8%AD%D9%87_%DA%A9%D8%A7%D9%86%D8%A7%D9%84\"><\/span>\n<p>  <strong>\u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0647 \u06a9\u0627\u0646\u0627\u0644<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0635\u0641\u062d\u0647 \u06a9\u0627\u0646\u0627\u0644 \u06a9\u0627\u0646\u0627\u0644 \u0641\u0639\u0644\u06cc \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u062e\u0627\u0635 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f. \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0648 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0635\u062d\u06cc\u062d \u0647\u0645\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0646\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>\/client\/[workspaceId]\/[channelId]\/<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u0627\u0644\u0641 <code>page.tsx<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/navigation<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useUser<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@clerk\/nextjs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Channel<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">ChannelType<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stream-chat<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">DefaultStreamChatGenerics<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stream-chat-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">StreamCall<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useCalls<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@stream-io\/video-react-sdk<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">clsx<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">clsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/layout<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">CaretDown<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/CaretDown<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Files<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Files<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Hash<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Hash<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Headphones<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Headphones<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Message<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Message<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">MoreVert<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/MoreVert<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Pin<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Pin<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Plus<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/Plus<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">User<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/components\/icons\/User<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">ChannelProps<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">params<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">channelId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/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\">Channel<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">params<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">ChannelProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">workspaceId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">channelId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">params<\/span><span class=\"p\">;<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRouter<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">user<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useUser<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">currentCall<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useCalls<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">chatClient<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">loading<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setLoading<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setWorkspace<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setOtherWorkspaces<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">channel<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setChannel<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">channelCall<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setChannelCall<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">videoClient<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppContext<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">chatChannel<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setChatChannel<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span>\n    <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">ChannelType<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">DefaultStreamChatGenerics<\/span><span class=\"o\">&gt;&gt;<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">channelLoading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setChannelLoading<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">pageWidth<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setPageWidth<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">layoutRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">HTMLDivElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">loading<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">layoutRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">resizeObserver<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">ResizeObserver<\/span><span class=\"p\">((<\/span><span class=\"nx\">entries<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">entry<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">entries<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">setPageWidth<\/span><span class=\"p\">(<\/span><span class=\"nx\">entry<\/span><span class=\"p\">.<\/span><span class=\"nx\">contentRect<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n    <span class=\"nx\">resizeObserver<\/span><span class=\"p\">.<\/span><span class=\"nf\">observe<\/span><span class=\"p\">(<\/span><span class=\"nx\">layoutRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">resizeObserver<\/span><span class=\"p\">.<\/span><span class=\"nf\">disconnect<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">layoutRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">loading<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">loadWorkspace<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/api\/workspaces\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nf\">setWorkspace<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">);<\/span>\n          <span class=\"nf\">setOtherWorkspaces<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">otherWorkspaces<\/span><span class=\"p\">);<\/span>\n          <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span>\n            <span class=\"dl\">'<\/span><span class=\"s1\">activitySession<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n            <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span> <span class=\"nx\">workspaceId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">channelId<\/span> <span class=\"p\">})<\/span>\n          <span class=\"p\">);<\/span>\n          <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error fetching workspace data:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n          <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error fetching workspace data:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/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\">loadChannel<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">currentMembers<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">memberships<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">m<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span><span class=\"p\">);<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">chatChannel<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">chatClient<\/span><span class=\"p\">.<\/span><span class=\"nf\">channel<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">messaging<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">channelId<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">members<\/span><span class=\"p\">:<\/span> <span class=\"nx\">currentMembers<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"nx\">channel<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"nx\">channel<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">channel<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n\n      <span class=\"k\">await<\/span> <span class=\"nx\">chatChannel<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">();<\/span>\n\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">currentCall<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">channelId<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">setChannelCall<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentCall<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">channelCall<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">videoClient<\/span><span class=\"p\">?.<\/span><span class=\"nf\">call<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">default<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">channelId<\/span><span class=\"p\">);<\/span>\n        <span class=\"nf\">setChannelCall<\/span><span class=\"p\">(<\/span><span class=\"nx\">channelCall<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nf\">setChatChannel<\/span><span class=\"p\">(<\/span><span class=\"nx\">chatChannel<\/span><span class=\"p\">);<\/span>\n      <span class=\"nf\">setChannelLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">loadWorkspaceAndChannel<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">await<\/span> <span class=\"nf\">loadWorkspace<\/span><span class=\"p\">();<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">channel<\/span><span class=\"p\">)<\/span>\n          <span class=\"nf\">setChannel<\/span><span class=\"p\">(<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">channels<\/span><span class=\"p\">.<\/span><span class=\"nf\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">c<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">c<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">channelId<\/span><span class=\"p\">)<\/span><span class=\"o\">!<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">loading<\/span><span class=\"p\">)<\/span> <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">chatClient<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">channel<\/span><span class=\"p\">)<\/span> <span class=\"nf\">loadChannel<\/span><span class=\"p\">();<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">((<\/span><span class=\"o\">!<\/span><span class=\"nx\">chatChannel<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">chatChannel<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">channelId<\/span><span class=\"p\">)<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">user<\/span><span class=\"p\">)<\/span>\n      <span class=\"nf\">loadWorkspaceAndChannel<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">channel<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">channelId<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">chatChannel<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">chatClient<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">currentCall<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">loading<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">router<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setChannel<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setChannelCall<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setLoading<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setOtherWorkspaces<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">setWorkspace<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">user<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">videoClient<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">workspaceId<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">]);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">currentCall<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">channelId<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setChannelCall<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentCall<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">currentCall<\/span><span class=\"p\">,<\/span> <span class=\"nx\">channelId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setChannelCall<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">loading<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"kc\">null<\/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>\n      <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">layoutRef<\/span><span class=\"p\">}<\/span>\n      <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">channel bg-[#1a1d21] font-lato w-full h-full z-100 flex flex-col overflow-hidden text-channel-gray<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"cm\">\/* Toolbar *\/<\/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\">pl-4 pr-3 h-[49px] flex items-center flex-shrink-0 justify-between<\/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 flex-[1_1_0] items-center min-w-0<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">min-w-[96px] px-2 py-[3px] -ml-1 mr-2 flex flex-[0_auto] items-center text-[17.8px] rounded-md text-channel-gray hover:bg-[#d1d2d30b] leading-[1.33334]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">mr-1 align-text-bottom<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">Hash<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--channel-gray)<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">18<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">truncate font-[900]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">channel<\/span><span class=\"p\">?.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nf\">clsx<\/span><span class=\"p\">(<\/span>\n              <span class=\"dl\">'<\/span><span class=\"s1\">w-[96px] flex-[1_1_0] min-w-[96px] mr-2 pt-1 text-[12.8px] text-[#e8e8e8b3]<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n              <span class=\"nx\">pageWidth<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">pageWidth<\/span> <span class=\"o\">&lt;<\/span> <span class=\"mi\">500<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">hidden<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex<\/span><span class=\"dl\">'<\/span>\n            <span class=\"p\">)}<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">min-w-[96px] max-w-[min(70%,540px)] truncate<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"p\">{<\/span><span class=\"nx\">channel<\/span><span class=\"p\">?.<\/span><span class=\"nx\">description<\/span><span class=\"p\">}<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/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=\"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\">flex flex-none ml-auto items-center<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <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=\"nf\">clsx<\/span><span class=\"p\">(<\/span>\n              <span class=\"dl\">'<\/span><span class=\"s1\">flex items-center pl-2 py-[3px] rounded-lg h-7 border border-[#797c814d] text-[#e8e8e8b3] hover:bg-[#25272b]<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n              <span class=\"nx\">pageWidth<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">pageWidth<\/span> <span class=\"o\">&lt;<\/span> <span class=\"mi\">605<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">hidden<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex<\/span><span class=\"dl\">'<\/span>\n            <span class=\"p\">)}<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">User<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--icon-gray)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">pl-1 pr-2 text-[12.8px]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"p\">{<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">memberships<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">}<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">group rounded-lg flex w-7 h-7 ml-2 items-center justify-center hover:bg-[#d1d2d30b]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">MoreVert<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fill-[#e8e8e8b3] group-hover:fill-channel-gray<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/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=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">{<\/span><span class=\"cm\">\/* Tab Bar *\/<\/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\">w-full min-w-full max-w-full h-[38px] flex items-center pl-4 pr-3 shadow-[inset_0_-1px_0_0_#797c814d] gap-1<\/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 cursor-pointer w-[92.45px] h-full p-2 gap-1 text-[13px] leading-[1.38463] text-center font-bold rounded-t-lg hover:bg-hover-gray border-b-[2px] border-white<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">Message<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">var(--primary)<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n          <span class=\"nx\">Messages<\/span>\n        <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\">group flex items-center cursor-pointer text-[#b9babd] h-full p-2 gap-1 text-[13px] leading-[1.38463] text-center font-bold rounded-t-lg hover:bg-hover-gray hover:text-white<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">Files<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fill-icon-gray group-hover:fill-white<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">16<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"nx\">Files<\/span>\n        <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\">group flex items-center cursor-pointer text-[#b9babd] h-full p-2 gap-1 text-[13px] leading-[1.38463] text-center font-bold rounded-t-lg hover:bg-hover-gray hover:text-white<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">Pin<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fill-icon-gray group-hover:fill-white<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">16<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"nx\">Pins<\/span>\n        <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\">group flex items-center justify-center cursor-pointer h-7 w-7 rounded-full hover:bg-hover-gray<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">Plus<\/span>\n            <span class=\"nx\">filled<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fill-icon-gray group-hover:fill-white<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">16<\/span><span class=\"p\">}<\/span>\n          <span class=\"sr\">\/<\/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=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">{<\/span><span class=\"cm\">\/* Chat *\/<\/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\">relative flex flex-col w-full h-full flex-1 overflow-hidden <\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"cm\">\/* Body *\/<\/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\">relative flex-1<\/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\">absolute -top-2 bottom-0 flex w-full overflow-hidden<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n              <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span>\n                <span class=\"na\">width<\/span><span class=\"p\">:<\/span> <span class=\"nx\">pageWidth<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">pageWidth<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n              <span class=\"p\">}}<\/span>\n              <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative<\/span><span class=\"dl\">\"<\/span>\n            <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\">absolute h-full inset-[0_-50px_0_0] overflow-y-scroll overflow-x-hidden z-[2]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"p\">{<\/span><span class=\"cm\">\/* Messages *\/<\/span><span class=\"p\">}<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Hello<\/span> <span class=\"nx\">World<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/div<\/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=\"sr\">\/div<\/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=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">{<\/span><span class=\"cm\">\/* Footer *\/<\/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\">relative max-h-[calc(100%-36px)] flex flex-col -mt-2 px-5<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">id<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">message-input<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;&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\">w-full flex items-center h-6 pl-3 pr-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/div<\/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=\"sr\">\/div<\/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\">Channel<\/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<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<ul>\n<li>\n<p><strong>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0686\u06cc\u062f\u0645\u0627\u0646<\/strong>: \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0632 <code>layoutRef<\/code> \u0648 <code>ResizeObserver<\/code> \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0637\u0631\u062d \u0635\u0641\u062d\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0639\u0631\u0636 \u0628\u062e\u0634 \u06a9\u0627\u0646\u0627\u0644.<\/p>\n<\/li>\n<li>\n<p><strong>\u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0627\u0646\u0627\u0644<\/strong>: \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0628\u062a\u062f\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0648 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0646\u0627\u0644 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f \u06cc\u0627 \u062e\u06cc\u0631\u060c \u0648 \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a\u060c \u06cc\u06a9 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc API \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0631\u0642\u0631\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u062c\u0644\u0633\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc<\/strong>: \u067e\u0633 \u0627\u0632 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc\u060c \u062c\u0644\u0633\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>localStorage<\/code>. \u0627\u06cc\u0646 \u062c\u0644\u0633\u0647 \u0634\u0627\u0645\u0644 <code>workspaceId<\/code> \u0648 <code>channelId<\/code> \u0628\u0631\u0627\u06cc \u0628\u0647 \u062e\u0627\u0637\u0631 \u0633\u067e\u0631\u062f\u0646 \u0622\u062e\u0631\u06cc\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0648 \u06a9\u0627\u0646\u0627\u0644 \u0641\u0639\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631.<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0686\u062a \u0648 \u0648\u06cc\u062f\u06cc\u0648<\/strong>: \u0645\u0627 \u06a9\u0644\u0627\u06cc\u0646\u062a\u200c\u0647\u0627\u06cc \u0686\u062a \u0648 \u0648\u06cc\u062f\u06cc\u0648 \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc \u0648 \u062a\u0645\u0627\u0633 \u0647\u0645\u200c\u0632\u0645\u0627\u0646 \u062f\u0631 \u06a9\u0627\u0646\u0627\u0644 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u06cc\u0645.<\/p>\n<\/li>\n<li>\n<p><strong>\u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631 \u0648 \u067e\u0627\u0648\u0631\u0642\u06cc<\/strong>: \u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631 \u062c\u0632\u0626\u06cc\u0627\u062a \u06a9\u0627\u0646\u0627\u0644 \u0641\u0639\u0644\u06cc\u060c \u0645\u0627\u0646\u0646\u062f \u0646\u0627\u0645 \u0648 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0622\u0646 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u067e\u0627\u0648\u0631\u0642\u06cc \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u0646\u0627\u062d\u06cc\u0647 \u0648\u0631\u0648\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0627\u0633\u062a.<\/p>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fftspg1hb0ojvnscdkvxh.gif\" alt=\"\u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc\" loading=\"lazy\" width=\"800\" height=\"400\" title=\"\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0635\u0641\u062d\u0647 \u0645\u0634\u062a\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0624\u0644\u0641\u0647 Client \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0627\u0628\u0632\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0622\u062e\u0631\u06cc\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0648 \u06a9\u0627\u0646\u0627\u0644 \u0641\u0639\u0627\u0644 \u062e\u0648\u062f \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0628\u0631\u0631\u0633\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f <code>activitySession<\/code> \u0630\u062e\u06cc\u0631\u0647 \u0634\u062f\u0647 \u062f\u0631 <code>localStorage<\/code>. \u0627\u06af\u0631 \u0647\u06cc\u0686 \u062c\u0644\u0633\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f\u060c \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>page.tsx<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>\/app\/client<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/navigation<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Client<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRouter<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">fetchActivitySession<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">activitySession<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">activitySession<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">activitySession<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">workspaceId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">channelId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">activitySession<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/client\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">channelId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"nf\">fetchActivitySession<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">router<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"kc\">null<\/span><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<h3><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B5%D9%81%D8%AD%D9%87_%D9%81%D8%B6%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0647 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0645\u0627 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0627\u0628\u0632\u0627\u0631 \u062f\u0648\u0645 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u0645\u0646\u0637\u0642 \u0647\u062f\u0627\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0646\u0627\u0644 \u062f\u0631 \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>page.tsx<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>\/client\/[workspaceId]<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/navigation<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Workspace<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/layout<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">WorkspacePageProps<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">params<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">WorkspacePage<\/span><span class=\"p\">({<\/span> <span class=\"nx\">params<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">WorkspacePageProps<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">workspaceId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">params<\/span><span class=\"p\">;<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setWorkspace<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setOtherWorkspaces<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span>\n    <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppContext<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRouter<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">goToChannel<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">workspace<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Workspace<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">channelId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">channels<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">id<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">activitySession<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span> <span class=\"na\">workspaceId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">channelId<\/span> <span class=\"p\">})<\/span>\n      <span class=\"p\">);<\/span>\n      <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/client\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">channelId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">loadWorkspace<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`\/api\/workspaces\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">workspaceId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nf\">setWorkspace<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">);<\/span>\n          <span class=\"nf\">setOtherWorkspaces<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">otherWorkspaces<\/span><span class=\"p\">);<\/span>\n          <span class=\"nf\">goToChannel<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error fetching workspace data:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error fetching workspace data:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">loadWorkspace<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">goToChannel<\/span><span class=\"p\">(<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">workspace<\/span><span class=\"p\">,<\/span> <span class=\"nx\">workspaceId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setWorkspace<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setOtherWorkspaces<\/span><span class=\"p\">,<\/span> <span class=\"nx\">router<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"kc\">null<\/span><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<p>\u062f\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627\u060c \u0627\u06af\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0647\u0646\u0648\u0632 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0646\u0634\u062f\u0647\u200c\u0627\u0646\u062f\u060c \u0622\u0646 \u0631\u0627 \u0627\u0632 \u0631\u0648\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 <code>\/api\/workspaces\/[workspaceId]<\/code> \u0645\u0633\u06cc\u0631\u060c \u0648 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0627\u0648\u0644\u06cc\u0646 \u06a9\u0627\u0646\u0627\u0644 \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0622\u0646 \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0647\u062f\u0627\u06cc\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F76pqgcwyibt5fh4qtk2x.gif\" alt=\"\u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc \u0635\u0641\u062d\u0647 \u0645\u0634\u062a\u0631\u06cc\" loading=\"lazy\" width=\"800\" height=\"400\" title=\"\"><\/p>\n<p>\u0648 \u0628\u0627 \u0622\u0646\u060c \u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u067e\u0627\u06cc\u0647 \u0645\u062d\u06a9\u0645 \u0628\u0631\u0627\u06cc \u06a9\u0644\u0648\u0646 Slack \u062e\u0648\u062f \u062f\u0627\u0631\u06cc\u0645!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0648\u0644 \u0633\u0627\u062e\u062a \u06a9\u0644\u0648\u0646 Slack\u060c \u0645\u0627:<\/p>\n<ul>\n<li>\n<p>\u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0627\u06cc\u062c\u0627\u062f \u0641\u0636\u0627\u06cc \u06a9\u0627\u0631\u06cc\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0627\u0646\u0627\u0644 \u0648 \u0627\u062f\u063a\u0627\u0645 \u0628\u0627 Stream \u0648 Clerk.<\/p>\n<\/li>\n<li>\n<p>\u0645\u0633\u06cc\u0631\u0647\u0627\u06cc API \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0648 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0627\u062c\u0632\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0646 \u0641\u0636\u0627\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc \u0648 \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<\/li>\n<\/ul>\n<p>\u062f\u0631 \u0642\u0633\u0645\u062a \u0628\u0639\u062f\u06cc \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u067e\u06cc\u0627\u0645 \u0631\u0633\u0627\u0646\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0627\u0646\u0627\u0644 \u0647\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/p>\n<p>\u0628\u0627 \u0645\u0627 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u0634\u06cc\u062f!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0645\u0648\u0641\u0642\u06cc\u062a \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a \u0648 \u0627\u06cc\u062c\u0627\u062f \u0627\u0628\u0632\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0647 \u062a\u06cc\u0645 \u0647\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0628\u0647\u062a\u0631 \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0648 \u067e\u0627\u062f\u0627\u0634 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627\u0634\u062f. \u0628\u0627 \u062a\u0639\u062f\u0627\u062f \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0632 \u0627\u0641\u0631\u0627\u062f \u06a9\u0647 \u0627\u0632 \u062e\u0627\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u06cc \u06a9\u0647 \u0628\u0647 \u0647\u0645\u0647 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0627\u0632 \u0637\u0631\u06cc\u0642 \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc\u060c \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0648 \u0686\u062a\u200c\u0647\u0627\u06cc \u06af\u0631\u0648\u0647\u06cc \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u0646\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u0641\u0627\u0648\u062a &hellip;<\/p>\n","protected":false},"author":2,"featured_media":89662,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4xnolcki9zl4hgde8cem.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-89660","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\/89660","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=89660"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/89660\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/89662"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=89660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=89660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=89660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}