@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/reuseableUI/AddToCartClient.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useGlobalStore } from "@/store/useGlobalStore";
+import Toast from "@/app/components/reuseableUI/Toast";
+import { gtmAddToCart, Product } from "@/app/utils/googleTagManager";
+import { useAppConfiguration } from "@/app/components/providers/ServerAppConfigurationProvider";
+
+export type AddToCartClientProps = {
+  id: string;
+  name: string;
+  price: number;
+  image: string;
+  sku?: string | null;
+  category?: string;
+};
+
+export default function AddToCartClient({ id, name, price, image, sku, category }: AddToCartClientProps) {
+  const { addToCart } = useGlobalStore();
+  const { getGoogleTagManagerConfig } = useAppConfiguration();
+  const [quantity, setQuantity] = useState(1);
+  const [isAdding, setIsAdding] = useState(false);
+  const [toast, setToast] = useState<{ message: string; subParagraph?: string; type: 'success' | 'error' | 'info' } | null>(null);
+  
+  const gtmConfig = getGoogleTagManagerConfig();
+
+  const btnPrimary = "bg-red-600 hover:bg-red-700 text-white font-semibold px-6 py-3 rounded-md transition-colors disabled:opacity-60 disabled:cursor-not-allowed";
+  const btnSecondary = "border border-gray-300 text-gray-700 hover:bg-gray-50 font-semibold px-3 py-2 rounded-md transition-colors";
+
+  const showToast = useCallback((message: string, subParagraph?: string, type: 'success' | 'error' | 'info' = 'info') => {
+    setToast({ message, subParagraph, type });
+    setTimeout(() => setToast(null), 2500);
+  }, []);
+
+  const handleAddToCart = async () => {
+    try {
+      setIsAdding(true);
+      
+      // GTM tracking for add to cart
+      const product: Product = {
+        item_id: id,
+        item_name: name,
+        item_category: category || 'Products',
+        price: price,
+        quantity: quantity,
+        currency: 'USD'
+      };
+      
+      await addToCart({ id, name, price, image, quantity, sku: sku || undefined, category });
+      
+      // Track successful add to cart
+      gtmAddToCart([product], 'USD', price * quantity, gtmConfig?.container_id);
+      
+      showToast('ITEM ADDED TO CART', "Your item has been added. You can continue shopping or proceed to checkout.", "success");
+    } catch (e) {
+      showToast('FAILED TO ADD TO CART', "Please try again later.", "error");
+    } finally {
+      setTimeout(() => setIsAdding(false), 400);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center border border-gray-300 rounded-md w-fit">
+        <button
+          className={`${btnSecondary} !border-0 !px-3 !py-2`}
+          onClick={() => setQuantity(Math.max(1, quantity - 1))}
+          aria-label="Decrease quantity"
+        >
+          -
+        </button>
+        <input
+          type="number"
+          value={quantity}
+          min={1}
+          className=" text-center border-x border-gray-300 py-2 w-16"
+          onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
+        />
+        <button
+          className={`${btnSecondary} !border-0 !px-3 !py-2`}
+          onClick={() => setQuantity(quantity + 1)}
+          aria-label="Increase quantity"
+        >
+          +
+        </button>
+      </div>
+      <button
+        className={`${btnPrimary} w-full flex items-center justify-center`}
+        onClick={handleAddToCart}
+        disabled={!id || isAdding}
+      >
+        {isAdding ? (
+          <>
+            <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            Adding...
+          </>
+        ) : (
+          'Add to Cart'
+        )}
+      </button>
+
+      {/* SKU line */}
+      {sku ? <div className="text-xs text-gray-500">SKU: {sku}</div> : null}
+
+      {/* Toast */}
+      {toast && (
+        <div className="fixed top-4 right-4 z-50 space-y-3 animate-[slidein_.25s_ease-out]">
+          <Toast
+            message={toast.message}
+            type={toast.type}
+            subParagraph={toast.subParagraph}
+            duration={2500}
+            onClose={() => setToast(null)}
+          />
+          <style jsx>{`
+            @keyframes slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
+          `}</style>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/components/reuseableUI/EditorJsRenderer.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import {
+  EditorJsDoc,
+  EditorJsBlock,
+  EditorJsParagraphBlock,
+  EditorJsHeaderBlock,
+  EditorJsListBlock,
+  EditorJsQuoteBlock,
+  EditorJsLinkBlock,
+  EditorJsImageBlock,
+  EditorJsTableBlock,
+  EditorJsCodeBlock,
+} from "@/app/utils/editorJsUtils";
+
+function EditorJsRenderer({ content }: { content?: string | null }) {
+  if (!content) return null;
+  try {
+    const parsed = JSON.parse(content) as EditorJsDoc;
+    const blocks = parsed.blocks || [];
+    if (!blocks.length) return null;
+
+    return (
+      <div className="editorjs-content prose max-w-none prose-p:leading-relaxed prose-headings:font-semibold [&_a]:text-blue-600 [&_a]:underline [&_a]:font-medium [&_a:hover]:text-blue-800 [&_a:hover]:no-underline [&_a]:transition-colors [&_a]:duration-200">
+        {blocks.map((b: EditorJsBlock, idx: number) => {
+          const key = b.id || String(idx);
+          switch (b.type) {
+            case "paragraph": {
+              const html = String((b.data as EditorJsParagraphBlock["data"])?.text || "");
+              return (
+                <p key={key} dangerouslySetInnerHTML={{ __html: html }} />
+              );
+            }
+            case "header": {
+              const level = Math.min(6, Math.max(1, Number((b as EditorJsHeaderBlock).data?.level) || 2));
+              const html = String((b as EditorJsHeaderBlock).data?.text || "");
+              if (level === 1)
+                return <h1 key={key} dangerouslySetInnerHTML={{ __html: html }} />;
+              if (level === 2)
+                return <h2 key={key} dangerouslySetInnerHTML={{ __html: html }} />;
+              if (level === 3)
+                return <h3 key={key} dangerouslySetInnerHTML={{ __html: html }} />;
+              if (level === 4)
+                return <h4 key={key} dangerouslySetInnerHTML={{ __html: html }} />;
+              if (level === 5)
+                return <h5 key={key} dangerouslySetInnerHTML={{ __html: html }} />;
+              return <h6 key={key} dangerouslySetInnerHTML={{ __html: html }} />;
+            }
+            case "list": {
+              const data = (b as EditorJsListBlock).data || {};
+              const style = data.style === "ordered" ? "ol" : "ul";
+              const items: string[] = Array.isArray(data.items) ? data.items : [];
+              if (style === "ol") {
+                return (
+                  <ol key={key} className="list-inside list-decimal">
+                    {items.map((it, i) => (
+                      <li key={i} dangerouslySetInnerHTML={{ __html: String(it) }} />
+                    ))}
+                  </ol>
+                );
+              }
+              return (
+                <ul key={key} className="list-inside list-disc">
+                  {items.map((it, i) => (
+                    <li key={i} dangerouslySetInnerHTML={{ __html: String(it) }} />
+                  ))}
+                </ul>
+              );
+            }
+            case "quote": {
+              const data = (b as EditorJsQuoteBlock).data || {};
+              const text = String(data.text || "");
+              const caption = String(data.caption || "");
+              const alignment = data.alignment || "left";
+              return (
+                <blockquote 
+                  key={key} 
+                  className={`border-l-4 border-gray-300 pl-4 py-2 ${alignment === "center" ? "text-center" : ""} italic text-gray-700`}
+                >
+                  <div dangerouslySetInnerHTML={{ __html: text }} />
+                  {caption ? (
+                    <cite className="block mt-2 text-sm text-gray-500 not-italic" dangerouslySetInnerHTML={{ __html: caption }} />
+                  ) : null}
+                </blockquote>
+              );
+            }
+            case "linkTool": {
+              const data = (b as EditorJsLinkBlock).data || {};
+              const link = data.link || "";
+              const title = data.meta?.title || link;
+              const description = data.meta?.description || "";
+              const image = data.meta?.image?.url || "";
+              return (
+                <div key={key} className="border-2 border-blue-200 bg-blue-50 rounded-lg p-4 hover:border-blue-300 hover:bg-blue-100 transition-all duration-200 not-prose">
+                  <a href={link} target="_blank" rel="noopener noreferrer" className="block group">
+                    <div className="flex gap-4">
+                      {image && (
+                        <img 
+                          src={image} 
+                          alt={title} 
+                          className="w-16 h-16 object-cover rounded flex-shrink-0 border border-blue-200"
+                        />
+                      )}
+                      <div className="flex-1">
+                        <h4 className="font-bold text-blue-700 group-hover:text-blue-900 line-clamp-2 text-lg">{title}</h4>
+                        {description && (
+                          <p className="text-sm text-gray-700 mt-1 line-clamp-2 font-medium">{description}</p>
+                        )}
+                        <div className="flex items-center mt-2">
+                          <svg className="w-4 h-4 text-blue-500 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                          </svg>
+                          <p className="text-xs text-blue-600 font-medium">{new URL(link).hostname}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              );
+            }
+            case "image": {
+              const data = (b as EditorJsImageBlock).data || {};
+              const url = data.file?.url || "";
+              const caption = data.caption || "";
+              const withBorder = data.withBorder;
+              const withBackground = data.withBackground;
+              const stretched = data.stretched;
+              if (!url) return null;
+              return (
+                <figure key={key} className={`not-prose ${stretched ? "w-full" : "max-w-2xl mx-auto"}`}>
+                  <img
+                    src={url}
+                    alt={caption || "Image"}
+                    className={`w-full h-auto rounded-lg ${withBorder ? "border border-gray-200" : ""} ${withBackground ? "bg-gray-50 p-4" : ""}`}
+                  />
+                  {caption && (
+                    <figcaption className="text-sm text-gray-600 text-center mt-2 italic">
+                      {caption}
+                    </figcaption>
+                  )}
+                </figure>
+              );
+            }
+            case "delimiter": {
+              return (
+                <div key={key} className="flex justify-center py-6 not-prose">
+                  <div className="flex space-x-1">
+                    <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+                    <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+                    <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
+                  </div>
+                </div>
+              );
+            }
+            case "table": {
+              const data = (b as EditorJsTableBlock).data || {};
+              const withHeadings = data.withHeadings || false;
+              const content = data.content || [];
+              if (content.length === 0) return null;
+              return (
+                <div key={key} className="overflow-x-auto not-prose">
+                  <table className="min-w-full border-collapse border border-gray-200">
+                    {withHeadings && content[0] && (
+                      <thead>
+                        <tr className="bg-gray-50">
+                          {content[0].map((cell, cellIdx) => (
+                            <th 
+                              key={cellIdx} 
+                              className="border border-gray-200 px-4 py-2 text-left font-semibold text-gray-900"
+                            >
+                              {cell}
+                            </th>
+                          ))}
+                        </tr>
+                      </thead>
+                    )}
+                    <tbody>
+                      {content.slice(withHeadings ? 1 : 0).map((row, rowIdx) => (
+                        <tr key={rowIdx} className={rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50"}>
+                          {row.map((cell, cellIdx) => (
+                            <td 
+                              key={cellIdx} 
+                              className="border border-gray-200 px-4 py-2 text-gray-700"
+                            >
+                              {cell}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              );
+            }
+            case "code": {
+              const data = (b as EditorJsCodeBlock).data || {};
+              const code = data.code || "";
+              return (
+                <pre key={key} className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto not-prose">
+                  <code className="text-sm">{code}</code>
+                </pre>
+              );
+            }
+            default: {
+              return null;
+            }
+          }
+        })}
+      </div>
+    );
+  } catch {
+    return (
+      <div className="prose max-w-none">
+        <p dangerouslySetInnerHTML={{ __html: content }} />
+      </div>
+    );
+  }
+}
+
+export default EditorJsRenderer;

package/src/app/components/reuseableUI/HeroSectionsearchByVehicle.tsx

@@ -0,0 +1,188 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import PrimaryButton from "./primaryButton";
+import Select from "./select";
+import { useVehicleData } from "@/hooks/useVehicleData";
+import { useGlobalStore } from "@/store/useGlobalStore";
+
+interface SelectInputProps {
+  onSearch?: (fitment: string) => void;
+  className?: string;
+  AddClearButton?: boolean;
+}
+
+export const HeroSectionSearchByVehicle = ({
+  onSearch,
+  className,
+  AddClearButton = false,
+}: SelectInputProps) => {
+  const params = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const isYMMActive = useGlobalStore((state) => state.isYMMActive);
+  const previousPairsRef = useRef<string | null>(null);
+  const isSearchPage = pathname === "/search";
+
+  const {
+    rootTypes,
+    selectedRootType,
+    dropdownLevels,
+    loading,
+    handleRootTypeChange,
+    handleValueChange,
+    isComplete,
+    getSelectedPairs,
+    initializeFromPairs,
+    resetInitialization,
+  } = useVehicleData();
+
+  const initialPairs = params.get("fitment_pairs");
+
+
+  useEffect(() => {
+    if (
+      rootTypes.length > 0 &&
+      selectedRootType === 0 &&
+      dropdownLevels.length === 0 &&
+      !initialPairs
+    ) {
+      handleRootTypeChange(rootTypes[0].id);
+    }
+  }, [rootTypes]);
+
+  useEffect(() => {
+    // Only initialize if we're on the search page AND we have fitment_pairs
+    if (!isSearchPage || !initialPairs) {
+      return;
+    }
+
+    // Prevent re-initialization if pairs haven't changed
+    if (previousPairsRef.current === initialPairs) {
+      return;
+    }
+
+    if (rootTypes.length === 0) {
+      return;
+    }
+
+    previousPairsRef.current = initialPairs;
+    initializeFromPairs(initialPairs);
+  }, [initialPairs, isSearchPage, rootTypes]);
+
+  // Reset when leaving the search page or pairs are cleared
+  useEffect(() => {
+    return () => {
+      if (isSearchPage) {
+        resetInitialization();
+        previousPairsRef.current = null;
+      }
+    };
+  }, [isSearchPage]);
+
+  const handleSearch = () => {
+    const pairs = getSelectedPairs();
+    if (onSearch) {
+      onSearch(pairs);
+    } else {
+      router.push(`/search?fitment_pairs=${pairs}`);
+    }
+  };
+
+  const handleClear = () => {
+    resetInitialization();
+    previousPairsRef.current = null;
+
+    // Only navigate if we're on the search page
+    if (isSearchPage) {
+      router.push(`/search`);
+    }
+
+    if (rootTypes.length > 0) {
+      setTimeout(() => {
+        handleRootTypeChange(rootTypes[0].id);
+      }, 100);
+    }
+  };
+
+  // Check if any filter is selected
+  const hasSelectedFilters = dropdownLevels.some(
+    (level) => level.selectedValue !== "",
+  );
+
+  if (!isYMMActive) {
+    return null;
+  }
+
+  if (rootTypes?.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{ backgroundColor: "black" }}
+      className={`p-6 lg:px-8 lg:py-4 flex flex-col lg:flex-row items-center gap-4 md:gap-5 w-full absolute top-0 z-10 ${
+        className && className
+      }`}
+    >
+      <h2 className="px-5 font-secondary text-center text-white text-xl whitespace-nowrap font-thin leading-6 md:leading-[32px] tracking-[-0.06px]">
+        SEARCH BY
+        <br /> <span className="font-primary">VEHICLE</span>
+      </h2>
+
+      {!dropdownLevels.length ? (
+        <div className="h-fit flex flex-col lg:flex-row gap-3 w-full">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="bg-gray-300 w-full block h-12 z-10" />
+          ))}
+        </div>
+      ) : (
+        <div className=" h-fit flex flex-col lg:flex-row gap-3 w-full">
+          {/* Dynamic Dropdown Levels */}
+          {dropdownLevels.map((level, index) => {
+            const selectId = `vehicle-${level.typeName.toLowerCase()}-${index}`;
+
+            return (
+              <Select
+                key={`${level.typeId}-${index}`}
+                htmlFor={selectId}
+                value={level.selectedValue}
+                onChange={(e) => {
+                  const valueId =
+                    level.values.find(
+                      (v) => (v.value || v.name) === e.target.value,
+                    )?.id || 0;
+                  handleValueChange(index, valueId, e.target.value);
+                }}
+                options={level.values.map((v) => ({
+                  value: v.value || v.name || "",
+                  label: v.value || v.name || "",
+                }))}
+                placeholder={`SELECT ${level.typeName.toUpperCase()}`}
+                parentClassName="w-full h-full mb-0"
+                disabled={loading || level.values.length === 0}
+              />
+            );
+          })}
+        </div>
+      )}
+      <div className="flex gap-4 w-full lg:w-fit">
+        {AddClearButton && (
+          <button
+            onClick={handleClear}
+            disabled={!hasSelectedFilters}
+            className=" cursor-pointer w-full h-12 bg-white ring-1 ring-[var(--color-secondary-300)] hover:ring-white text-[var(--color-secondary-800)] font-semibold hover:bg-black hover:text-white hover:ring-black transition-colors disabled:opacity-50 disabled:pointer-events-none disabled:hover:bg-white px-10"
+          >
+            CLEAR
+          </button>
+        )}
+        <PrimaryButton
+          className=" px-10 h-12 w-full"
+          content="SEARCH"
+          disabled={loading}
+          onClick={handleSearch}
+        />
+      </div>
+    </div>
+  );
+};

package/src/app/components/reuseableUI/ImageWithFallback.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { getImageCandidates, SrcRoot } from "@/app/utils/functions";
+import Image, { ImageProps } from "next/image";
+import { useMemo, useState } from "react";
+
+interface ImageWithFallbackProps extends Omit<ImageProps, "src" | "alt"> {
+  srcRoot: SrcRoot;
+  alt: string;
+  fallback?: string;
+  setLoaded?: (loaded: boolean) => void;
+}
+
+export default function ImageWithFallback({
+  srcRoot,
+  alt,
+  fallback,
+  setLoaded,
+  ...imgProps
+}: ImageWithFallbackProps) {
+  const candidates = useMemo(() => {
+    const list = getImageCandidates(srcRoot);
+    if (fallback) list.push(fallback);
+    return list;
+  }, [srcRoot, fallback]);
+
+  const [idx, setIdx] = useState(0);
+  const currentSrc = candidates[idx];
+
+  return (
+    <Image
+      {...imgProps}
+      src={currentSrc}
+      alt={alt}
+      onLoadingComplete={() => setLoaded?.(true)}
+      onError={() => {
+        setIdx((i) => (i + 1 < candidates.length ? i + 1 : i));
+      }}
+    />
+  );
+}

package/src/app/components/reuseableUI/Toast.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { SuccessTickIcon } from "@/app/utils/svgs/cart/successTickIcon";
+import { useEffect, useMemo, useRef } from "react";
+import type { ReactNode } from "react";
+
+export type ToastType = "success" | "error" | "info";
+
+interface ToastProps {
+  message: string;
+  subParagraph?: string;
+  type?: ToastType;
+  duration?: number; // ms
+  onClose?: () => void;
+}
+
+const typeStyles: Record<ToastType, { bg: string; ring: string; icon: ReactNode; bar: string; }> = {
+  success: {
+    bg: "bg-white",
+    ring: "ring-1 ring-green-200",
+    icon: SuccessTickIcon,
+    bar: "bg-green-500",
+  },
+  error: {
+    bg: "bg-white",
+    ring: "ring-1 ring-red-200",
+    icon: (
+      <svg className="w-5 h-5 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 8v5M12 16h.01" />
+      </svg>
+    ),
+    bar: "bg-red-500",
+  },
+  info: {
+    bg: "bg-white",
+    ring: "ring-1 ring-blue-200",
+    icon: (
+      <svg className="w-5 h-5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 16v-4M12 8h.01" />
+      </svg>
+    ),
+    bar: "bg-blue-500",
+  },
+};
+
+export default function Toast({ message, subParagraph, type = "info", duration = 3000, onClose }: ToastProps) {
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const style = useMemo(() => typeStyles[type], [type]);
+
+  useEffect(() => {
+    if (duration <= 0) return;
+    timerRef.current = setTimeout(() => onClose?.(), duration);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [duration, onClose]);
+
+  return (
+    <div
+      className={`pointer-events-auto top-16 -right-3.5 ${style.bg} shadow-[0_10px_20px_0_#0000001A] relative p-4 flex items-start gap-3 overflow-hidden max-w-[410px]
+      backdrop-blur-sm border border-gray-100/60`}>
+      <div className="flex items-start w-full gap-3">
+        <div className="mt-0.5 size-5 [&>svg]:size-5">{style.icon}</div>
+        <div className="space-y-1">
+          <p className="font-semibold text-sm font-secondary text-[var(--color-secondary-800)]">{message}</p>
+          {
+            subParagraph && (
+              <p className="text-xs text-[var(--color-secondary-600)] font-secondary font-normal">{subParagraph}</p>
+            )
+          }
+        </div>
+        {onClose && (
+          <button
+            aria-label="Close"
+            onClick={onClose}
+            className="inline-flex bg-[var(--color-secondary-200)] rounded-full p-1 text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </div>
+      {duration > 0 && (
+        <span
+          className={`absolute left-0 bottom-0 h-0.5 ${style.bar}`}
+          style={{ animation: `toastbar ${duration}ms linear forwards` }}
+        />
+      )}
+
+      <style jsx global>{`
+        @keyframes toastbar {
+          from { width: 100%; }
+          to { width: 0%; }
+        }
+      `}</style>
+    </div>
+  );
+}