feat: implement logout action

app/layouts/news/header-top.tsx

@@ -1,4 +1,4 @@
-import { Link, useRouteLoaderData } from 'react-router'
+import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
@@ -8,6 +8,7 @@ import type { loader } from '~/routes/_layout.news'
 export const HeaderTop = () => {
   const { setIsLoginOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_layout.news')
+  const fetcher = useFetcher()
 
   return (
     <>
@@ -29,13 +30,28 @@ export const HeaderTop = () => {
           <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
             About Us
           </Button>
-          <Button
-            variant="newsSecondary"
-            className="hidden sm:block"
-            onClick={() => setIsLoginOpen(true)}
-          >
-            {loaderData?.userToken ? 'Logout' : 'Masuk'}
-          </Button>
+          {loaderData?.userToken ? (
+            <fetcher.Form
+              method="POST"
+              action="/actions/news/logout"
+            >
+              <Button
+                variant="newsSecondary"
+                className="hidden sm:block"
+                type="submit"
+              >
+                Logout
+              </Button>
+            </fetcher.Form>
+          ) : (
+            <Button
+              variant="newsSecondary"
+              className="hidden sm:block"
+              onClick={() => setIsLoginOpen(true)}
+            >
+              Masuk
+            </Button>
+          )}
         </div>
       </div>
     </>