🔀 merge: Merge branch 'common' of https://github.com/KieIO/grocery-vercel-commerce into m3-lytran

:%s

src/utils/types.utils.ts

@@ -0,0 +1,23 @@
+export interface ProductProps {
+    category: string
+    name: string
+    weight: string
+    price: string
+    imageSrc: string
+}
+
+export interface FeaturedProductProps {
+    title: string
+    subTitle: string
+    originPrice: string
+    price: string
+    imageSrc: string
+}
+
+export interface RecipeProps {
+    title: string
+    description:string
+    imageSrc: string
+}
+
+export type MouseAndTouchEvent = MouseEvent | TouchEvent

src/utils/useClickOutSide.ts

@@ -0,0 +1,30 @@
+import { RefObject, useEffect } from 'react'
+import { MouseAndTouchEvent } from './types.utils'
+
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+	ref: RefObject<T>,
+	callback: (event: MouseAndTouchEvent) => void
+) {
+	useEffect(() => {
+		const listener = (event: MouseAndTouchEvent) => {
+			const el = ref?.current
+
+			// Do nothing if clicking ref's element or descendent elements
+			if (!el || el.contains(event.target as Node)) {
+				return
+			}
+
+			callback(event)
+		}
+
+		document.addEventListener(`mousedown`, listener)
+		document.addEventListener(`touchstart`, listener)
+
+		return () => {
+			document.removeEventListener(`mousedown`, listener)
+			document.removeEventListener(`touchstart`, listener)
+		}
+
+		// Reload only if ref or handler changes
+	}, [ref, callback])
+}