[FEATURE]: Cart UI

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "i18n-ally.localesPaths": [
     "layers/base/locales",
+    "layers/cart/locales",
     "layers/auth/locales",
     "app/locales"
   ],

app/components/header/HeaderActions.vue

@@ -4,6 +4,7 @@
 <template>
   <div class="flex w-full items-center justify-end gap-2">
     <HeaderProfile />
+    <CartHeader />
     <TheLocaleSelector />
   </div>
 </template>

app/components/header/HeaderProfile.vue

@@ -17,7 +17,6 @@ function onLogout() {
   <AppPopover
     v-if="currentUser"
     align="center"
-    hide-close-button
     hide-arrow
   >
     <AppIconButton

app/locales/nl.json

@@ -6,5 +6,6 @@
   "footer.copyright": "© {year} Alle rechten voorbehouden",
   "footer.privacy_policy": "Privacy Policy",
   "footer.service": "Service",
-  "footer.links": "Links"
+  "footer.links": "Links",
+  "todo.logo": "TODO logo"
 }

app/pages/index.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { useCart } from '@cart/api/cart/queries/useCart'
+
 definePageMeta({
   // middleware: 'auth-middleware',
 })
+
+const cart = useCart()
 </script>
 
 <template>

layers/base/components/core/button/AppButtonLink.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { Icon } from '@wisemen/vue-core'
+import { AppIcon } from '@wisemen/vue-core'
+import type { RouteLocationRaw } from 'vue-router'
+
+import type { ButtonStyleProps } from './button.style'
+import { useButtonStyle } from './button.style'
+
+export interface AppButtonProps {
+  /**
+   * Whether the button is disabled.
+   * @default false
+   */
+  isDisabled?: boolean
+  /**
+   * Whether the button is in a loading state.
+   * @default false
+   */
+  isLoading?: boolean
+  /**
+   * The icon to display on the left side of the button.
+   * @default null
+   */
+  iconLeft?: Icon | null
+  /**
+   * The icon to display on the right side of the button.
+   * @default null
+   */
+  iconRight?: Icon | null
+  /**
+   * The size of the button.
+   * @default 'default'
+   */
+  size?: ButtonStyleProps['size']
+  to: RouteLocationRaw
+  /**
+   * The type of the button.
+   * @default 'button'
+   */
+  type?: 'button' | 'reset' | 'submit'
+  /**
+   * The variant of the button.
+   * @default 'default'
+   */
+  variant?: ButtonStyleProps['variant']
+}
+
+const props = withDefaults(defineProps<AppButtonProps>(), {
+  // TODO: find out why defaulting these to `null` breaks the `Icon` prop type when using `declare module`.
+  // iconLeft: null,
+  // iconRight: null,
+  isDisabled: false,
+  isLoading: false,
+  size: 'default',
+  type: 'button',
+  variant: 'default',
+})
+
+const buttonStyle = useButtonStyle()
+
+const buttonClasses = computed<string>(() =>
+  buttonStyle.button({
+    size: props.size,
+    variant: props.variant,
+  }))
+
+const buttonLeftIconClasses = computed<string>(() =>
+  buttonStyle.buttonLeftIcon({
+    isLoading: props.isLoading,
+    size: props.size,
+  }))
+
+const buttonRightIconClasses = computed<string>(() =>
+  buttonStyle.buttonRightIcon({
+    isLoading: props.isLoading,
+    size: props.size,
+  }))
+</script>
+
+<template>
+  <NuxtLinkLocale
+    :is-disabled="isDisabled || isLoading"
+    :type="props.type"
+    :to="props.to"
+    :class="buttonClasses"
+  >
+    <AppIcon
+      v-if="props.iconLeft !== null && props.iconLeft !== undefined"
+      :icon="props.iconLeft"
+      :class=" buttonLeftIconClasses"
+    />
+
+    <span
+      :class="{
+        'opacity-0': props.isLoading,
+      }"
+    >
+
+      <slot />
+    </span>
+
+    <div
+      v-if="props.isLoading"
+      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+    >
+      <AppLoader
+        class="size-4"
+      />
+    </div>
+
+    <AppIcon
+      v-if="props.iconRight !== null && props.iconRight !== undefined"
+      :icon="props.iconRight"
+      :class="buttonRightIconClasses"
+    />
+  </NuxtLinkLocale>
+</template>

layers/base/components/core/divider/AppDivider.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { tv } from '@base/libs/twVariants.lib'
+
+interface Props {
+  direction?: 'horizontal' | 'vertical'
+}
+const { direction = 'horizontal' } = defineProps<Props>()
+const dividerStyle = tv({
+  base: 'bg-neutral-100',
+  variants: {
+    direction: {
+      horizontal: 'h-px w-full',
+      vertical: 'h-full w-px',
+    },
+  },
+})
+const classes = computed<string>(() => dividerStyle({
+  direction,
+}))
+</script>
+
+<template>
+  <div :class="classes" />
+</template>

layers/base/components/core/icon/AppIconCircle.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { IconStyleProps } from '@base/components/core/icon/icon.style'
+import type { Icon } from '@base/icons/icons'
+import { twMerge } from '@base/libs/twMerge.lib'
+
+interface Props {
+  isLoading?: boolean
+  icon: Icon
+  size?: IconStyleProps['size']
+}
+
+const { icon, size = 'default' } = defineProps<Props>()
+
+const attrs = useAttrs()
+</script>
+
+<template>
+  <div :class="twMerge('flex size-8 flex-none items-center justify-center rounded-full bg-white', attrs?.class as string)">
+    <Transition
+      name="fade"
+    >
+      <div v-if="!isLoading">
+        <AppIcon
+          :size="size"
+          :icon="icon"
+        />
+      </div>
+
+      <AppLoader
+        v-else
+        class="size-5"
+      />
+    </Transition>
+  </div>
+</template>