feat: LoginElement added to Desktop

deco-sites · Jun 3, 2024 · f0399e2 · f0399e2
1 parent 9f99c37
commit f0399e2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 36 deletions.
diff --git a/components/header/Navbar.tsx b/components/header/Navbar.tsx
@@ -1,5 +1,5 @@
 import type { Props as SearchbarProps } from "$store/components/search/Searchbar.tsx";
-import Icon from "$store/components/ui/Icon.tsx";
+import type { SiteNavigationElement } from "apps/commerce/types.ts";
 import { MenuButton, SearchButton } from "$store/islands/Header/Buttons.tsx";
 import CartButtonLinx from "$store/islands/Header/Cart/linx.tsx";
 import CartButtonShopify from "$store/islands/Header/Cart/shopify.tsx";
@@ -9,11 +9,11 @@ import CartButtonWake from "$store/islands/Header/Cart/wake.tsx";
 import CartButtonNuvemshop from "$store/islands/Header/Cart/nuvemshop.tsx";
 import Searchbar from "$store/islands/Header/Searchbar.tsx";
 import { usePlatform } from "$store/sdk/usePlatform.tsx";
-import type { SiteNavigationElement } from "apps/commerce/types.ts";
 import Image from "apps/website/components/Image.tsx";
 import NavItem from "./NavItem.tsx";
 import { navbarHeight } from "./constants.ts";
 import { Buttons, Logo } from "$store/components/header/Header.tsx";
+import LoginElement from "deco-sites/maconequiio/islands/LoginElement.tsx";
 
 function Navbar({ items, searchbar, logo, buttons, logoPosition = "left" }: {
   items: SiteNavigationElement[];
@@ -62,13 +62,7 @@ function Navbar({ items, searchbar, logo, buttons, logoPosition = "left" }: {
       {/* Desktop Version */}
       <div class="hidden lg:flex flex-col items-center justify-center w-full border-b border-base-200 px-6 max-w-[80%] mx-auto">
         <div class="grid grid-cols-3 items-center w-full">
-          <div
-            class={`flex ${
-              logoPosition === "left"
-                ? "justify-start -order-1"
-                : "justify-center"
-            }`}
-          >
+          <div class="flex justify-start">
             {logo && (
               <a
                 href="/"
@@ -90,33 +84,7 @@ function Navbar({ items, searchbar, logo, buttons, logoPosition = "left" }: {
           </div>
 
           <div class="flex-none flex items-center justify-end gap-6 col-span-1">
-            {!buttons?.hideAccountButton && (
-              <a
-                class="flex items-center text-xs font-thin"
-                href="/account"
-                aria-label="Account"
-              >
-                <div class="flex btn btn-circle btn-sm btn-ghost gap-1">
-                  <Icon id="User" size={20} strokeWidth={0.4} />
-                </div>
-                ACCOUNT
-              </a>
-            )}
-            {!buttons?.hideWishlistButton && (
-              <a
-                class="flex items-center text-xs font-thin"
-                href="/wishlist"
-                aria-label="Wishlist"
-              >
-                <button
-                  class="flex btn btn-circle btn-sm btn-ghost gap-1"
-                  aria-label="Wishlist"
-                >
-                  <Icon id="Heart" size={24} strokeWidth={0.4} />
-                </button>
-                WISHLIST
-              </a>
-            )}
+            {!buttons?.hideAccountButton && <LoginElement />}
             {!buttons?.hideCartButton && (
               <div class="flex items-center text-xs font-thin">
                 {platform === "vtex" && <CartButtonVTEX />}

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -20,6 +20,7 @@ import * as $Header_Cart_vtex from "./islands/Header/Cart/vtex.tsx";
 import * as $Header_Cart_wake from "./islands/Header/Cart/wake.tsx";
 import * as $Header_Drawers from "./islands/Header/Drawers.tsx";
 import * as $Header_Searchbar from "./islands/Header/Searchbar.tsx";
+import * as $LoginElement from "./islands/LoginElement.tsx";
 import * as $Newsletter from "./islands/Newsletter.tsx";
 import * as $OutOfStock from "./islands/OutOfStock.tsx";
 import * as $ProductImageZoom from "./islands/ProductImageZoom.tsx";
@@ -55,6 +56,7 @@ const manifest = {
     "./islands/Header/Cart/wake.tsx": $Header_Cart_wake,
     "./islands/Header/Drawers.tsx": $Header_Drawers,
     "./islands/Header/Searchbar.tsx": $Header_Searchbar,
+    "./islands/LoginElement.tsx": $LoginElement,
     "./islands/Newsletter.tsx": $Newsletter,
     "./islands/OutOfStock.tsx": $OutOfStock,
     "./islands/ProductImageZoom.tsx": $ProductImageZoom,

diff --git a/islands/LoginElement.tsx b/islands/LoginElement.tsx
@@ -0,0 +1,27 @@
+import Icon from "$store/components/ui/Icon.tsx";
+import { useUser } from "apps/vtex/hooks/useUser.ts";
+
+export default function LoginElement() {
+  const { user } = useUser();
+
+  return (
+    <div class="flex items-center justify-center text-sm">
+      <div class="flex w-8 h-6 gap-1">
+        <Icon id="User" size={24} strokeWidth={0.4} />
+      </div>
+
+      <div class="flex flex-col gap-0.5">
+        <p>
+          Olá! {user?.value?.email
+            ? <a href="/account">{user.value?.name || user.value?.email}</a>
+            : <a href="/account">Faça seu login</a>}
+        </p>
+        <p class="flex items-center gap-0.5 text-xs font-bold">
+          <a href="/account">Minha Conta</a>
+          |
+          <a href="/account#/orders">Meus Pedidos</a>
+        </p>
+      </div>
+    </div>
+  );
+}