@alphasquad/saleor-template-advance 0.1.0

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

@@ -0,0 +1,52 @@
+import Link from "next/link";
+
+export interface CategoryCardProps {
+  id: string;
+  title: string;
+  slug: string;
+  excerpt?: string;
+  date?: string;
+  metadata?: Array<{
+    key?: string | null;
+    value?: string | null;
+  } | null>;
+  pageRoute?: string;
+}
+export const BlogCard = ({
+  id,
+  title,
+  slug,
+  excerpt,
+  date,
+  metadata,
+  pageRoute,
+}: CategoryCardProps) => {
+  return (
+    <Link
+      href={`/${pageRoute ? pageRoute : "blog"}/${slug}`}
+      key={id}
+      className="flex flex-col gap-4 p-6 border border-[var(--color-secondary-200)] rounded-lg hover:border-[var(--color-primary-600)] hover:shadow-lg h-full transition-all duration-200 bg-white"
+    >
+      <div className="flex flex-col gap-3 w-full">
+        {metadata?.filter((item) => item?.key === "topic")[0]?.value && (
+          <span className="w-fit text-xs font-medium text-[var(--color-primary-600)] bg-[var(--color-primary-100)] px-2 py-1 rounded-full">
+            {metadata?.filter((item) => item?.key === "topic")[0]?.value}
+          </span>
+        )}
+        <h3 className="font-semibold leading-7 -tracking-[0.06px] font-secondary text-xl line-clamp-2 text-[var(--color-secondary-800)]">
+          {title}
+        </h3>
+
+        {date && (
+          <p className="text-xs text-[var(--color-secondary-500)] mt-auto">
+            {date}
+          </p>
+        )}
+      </div>
+
+      <div className="text-[var(--color-primary-600)] text-sm font-medium">
+        Read more →
+      </div>
+    </Link>
+  );
+};

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

@@ -0,0 +1,68 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+
+export interface BrandCardProps {
+  name: string;
+  imageUrl: string;
+  url?: string;
+  bgImage?: string;
+}
+
+export const BrandCard = ({ name, imageUrl, url, bgImage }: BrandCardProps) => {
+  const [imageError, setImageError] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  const cardContent = (
+    <div className="group relative h-[350px] md:h-[400px] w-full overflow-hidden rounded-xl border border-[var(--color-secondary-220)] transition-all duration-500 hover:shadow-2xl">
+      {/* Lifestyle Background Image */}
+      {bgImage && (
+        <div className="absolute inset-0 z-0">
+          <Image
+            src={bgImage}
+            alt={`${name} lifestyle`}
+            fill
+            className="object-cover transition-transform duration-700 group-hover:scale-110"
+          />
+          {/* Dark Gradient Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-80" />
+          {/* Hover Opacity Effect */}
+          <div className="absolute inset-0 bg-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+        </div>
+      )}
+
+      {/* Brand Logo Overlay */}
+      <div className="relative z-10 flex h-full flex-col items-center justify-end p-6 pb-8">
+        <div className="relative h-16 w-full transition-transform duration-300 group-hover:scale-105">
+          {imageUrl && !imageError ? (
+            <Image
+              src={imageUrl}
+              alt={name}
+              fill
+              className={`object-contain transition-all duration-300 ${
+                loaded ? "opacity-100 blur-0" : "opacity-0 blur-sm"
+              }`}
+              onLoad={() => setLoaded(true)}
+              onError={() => setImageError(true)}
+            />
+          ) : (
+            <p className="text-center font-primary text-xl font-bold uppercase tracking-widest text-white">
+              {name}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  if (url) {
+    return (
+      <Link href={`/brand/${url}`} className="block h-full">
+        {cardContent}
+      </Link>
+    );
+  }
+
+  return cardContent;
+};

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

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import React from "react";
+
+const Breadcrumb = ({
+  items = [],
+}: {
+  items: { text: string; link?: string }[];
+}) => {
+  return (
+    <div className="font-semibold uppercase text-xs md:text-sm font-secondary text-[var(--color-secondary-400)]">
+      {items.map((item, index) => (
+        <React.Fragment key={index}>
+          {item.link && index < items.length - 1 ? (
+            <Link
+              href={item.link}
+              className="hover:text-[var(--color-primary-700)] transition-colors"
+            >
+              {item.text}
+            </Link>
+          ) : (
+            <span
+              className={
+                index === items.length - 1
+                  ? "text-[var(--color-primary-700)]"
+                  : ""
+              }
+            >
+              {item.text}
+            </span>
+          )}
+          {index < items.length - 1 && <span> / </span>}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default Breadcrumb;

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

@@ -0,0 +1,37 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+
+export interface CategoryCardProps {
+  id: string;
+  name: string;
+  description: string;
+  image: string;
+  href: string;
+}
+
+export const CategoryCard = ({ id, name, image, href }: CategoryCardProps) => {
+  return (
+    <Link
+      href={href}
+      key={id}
+      className="group flex flex-col bg-white rounded-xl overflow-hidden h-full transition-all duration-300 hover:shadow-lg border border-[var(--color-secondary-220)]"
+    >
+      <div className="relative aspect-square p-6 flex items-center justify-center transition-transform duration-300 group-hover:scale-105">
+        <Image
+          src={image}
+          alt={name}
+          fill
+          quality={85}
+          sizes="(max-width: 768px) 50vw, 246px"
+          className="object-contain p-2"
+        />
+      </div>
+      <div className="p-4 pt-0 mt-auto">
+        <p className="font-bold text-black text-sm md:text-base line-clamp-2 leading-tight">
+          {name}
+        </p>
+      </div>
+    </Link>
+  );
+};

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

@@ -0,0 +1,31 @@
+import React from "react";
+
+export type CategorySkeletonVariant = "grid" | "swiper";
+
+interface CategorySkeletonProps {
+  variant?: CategorySkeletonVariant;
+  className?: string;
+}
+
+export const CategorySkeleton: React.FC<CategorySkeletonProps> = ({
+  variant = "grid",
+  className,
+}) => {
+  const base = "group block border border-gray-200 rounded-md overflow-hidden bg-white animate-pulse";
+  const imageHeights: Record<CategorySkeletonVariant, string> = {
+    grid: "h-40",
+    swiper: "h-48",
+  };
+
+  return (
+    <div className={`${base} ${className ?? ""}`}>
+      <div className={`relative w-full ${imageHeights[variant]} bg-gray-200`} />
+      <div className="p-3">
+        <div className="h-4 bg-gray-200 rounded w-2/3 mb-2" />
+        <div className="h-3 bg-gray-200 rounded w-1/2" />
+      </div>
+    </div>
+  );
+};
+
+export default CategorySkeleton;

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

@@ -0,0 +1,48 @@
+import { cn } from "@/app/utils/functions";
+import React from "react";
+
+const CommonButton = ({
+  onClick,
+  content,
+  className,
+  disabled,
+  type,
+  variant,
+  children,
+}: {
+  onClick?: () => void;
+  content?: string;
+  className?: string;
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+  variant?: "primary" | "secondary" | "tertiary" | "tertiarySecondary";
+  children?: React.ReactNode;
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cn("disabled:pointer-events-none disabled:bg-[var(--color-secondary-300)] disabled:text-[var(--color-secondary-400)]",
+        variant === "primary"
+          ? "bg-[var(--color-primary-600)] text-white hover:bg-[var(--color-primary-700)]"
+          : "",
+        variant === "secondary"
+          ? "bg-[var(--color-secondary-200)] text-[var(--color-secondary-800)] hover:bg-[var(--color-secondary-300)]"
+          : "",
+        variant === "tertiary"
+          ? "bg-transparent text-[var(--color-secondary-800)] hover:text-[var(--color-primary-600)] underline underline-offset-4"
+          : "",
+        variant === "tertiarySecondary"
+          ? "bg-transparent hover:text-[var(--color-secondary-800)] text-[var(--color-primary-600)] underline underline-offset-4"
+          : "",
+        "py-3.5 px-4 font-secondary font-semibold cursor-pointer uppercase text-base -tracking-[0.04px] transition-all ease-in-out duration-300",
+        className
+      )}
+      disabled={disabled}
+      type={type}
+    >
+      {content ? content : children}
+    </button>
+  );
+};
+
+export default CommonButton;

package/src/app/components/reuseableUI/defaultInputField/index.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import React from "react";
+
+interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  name?: string;
+  error?: string;
+  suffix?: string; // Add suffix prop
+}
+
+const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(({ 
+  label,
+  name,
+  error,
+  suffix,
+  className = "",
+  ...props
+}, ref) => {
+  return (
+    <div className="flex flex-col gap-1.5 w-full">
+      {/* Label */}
+      {label && (
+        <label
+          style={{
+            color: "var(--color-secondary-200)",
+          }}
+          htmlFor={name}
+          className="text-sm font-secondary -tracking-wide"
+        >
+          {label}
+        </label>
+      )}
+
+      {/* Input with optional suffix */}
+      <div className="relative">
+        <input
+          style={{
+            backgroundColor: "var(--color-secondary-800)",
+            border: error
+              ? "var(--color-primary-600)"
+              : "var(--color-secondary-600)",
+            color: "black",
+          }}
+          autoComplete="off"
+          id={name}
+          name={name}
+          ref={ref}
+          className={`border font-secondary !placeholder-black placeholder:font-normal px-4 py-3 text-sm leading-6
+            focus:outline-none custom-placeholder !bg-transparent w-full
+            ${suffix ? 'pr-12' : ''}
+            ${className}`}
+          {...props}
+        />
+        
+        {/* Suffix */}
+        {suffix && (
+          <div 
+            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm pointer-events-none"
+            style={{
+              color: "var(--color-secondary-400)",
+            }}
+          >
+            {suffix}
+          </div>
+        )}
+      </div>
+
+      {/* Error */}
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {/* Placeholder styling */}
+      <style jsx>{`
+        .custom-placeholder::placeholder {
+          color: var(--color-secondary-500);
+        }
+      `}</style>
+    </div>
+  );
+});
+
+InputField.displayName = "InputField";
+
+export default InputField;

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

@@ -0,0 +1,29 @@
+import { cn } from '@/app/utils/functions'
+import { NoProductFoundIcon } from '@/app/utils/svgs/noProductFoundIcon'
+import React from 'react'
+import CommonButton from './commonButton'
+
+const EmptyState = ({ text, textParagraph, className, buttonLabel, buttonVariant, icon, onClick, iconContainer }: { text: string, textParagraph?: string, className?: string, buttonLabel?: string, buttonVariant?: "primary" | "secondary" | "tertiary" | "tertiarySecondary", icon?: React.ReactNode, onClick?: () => void, iconContainer?: string }) => {
+    return (
+        <div className={cn("flex items-center justify-center h-[20vh] flex-col gap-6 text-gray-600", className)}>
+            <div className='space-y-4 flex flex-col items-center'>
+                <div className={cn("p-7 rounded-full border border-[var(--color-secondary-300)] bg-[var(--color-secondary-300)] w-fit", iconContainer)}>
+                    <span className="size-24">{icon ? icon : NoProductFoundIcon}</span>
+                </div>
+                <div className='space-y-2 text-[var(--color-secondary-75)] font-secondary text-center'>
+                    <p className='font-semibold text-xl '>{text}</p>
+                    {textParagraph && <p className='font-normal text-sm'>{textParagraph}</p>}
+                </div>
+            </div>
+            {buttonLabel && (
+                <CommonButton
+                    onClick={onClick}
+                    content={buttonLabel}
+                    variant={buttonVariant ? buttonVariant : "primary"}
+                />
+            )}
+        </div>
+    )
+}
+
+export default EmptyState

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

@@ -0,0 +1,15 @@
+import { WarningCircleIcon } from "@/app/utils/svgs/warningCircleIcon";
+import React from "react";
+
+export const ErrorTag = ({ message }: { message: string }) => {
+  return (
+    <div
+      style={{ color: "var(--color-secondary-800)", backgroundColor: "var(--color-primary-50)" }}
+      className="flex items-center text-base gap-2 ring-1 ring-[var(--color-primary-50)] px-3 py-2"
+      role="alert"
+    >
+      {WarningCircleIcon}
+      <p className="text-base leading-6 tracking[-0.04px]">{message}</p>
+    </div>
+  );
+};

package/src/app/components/reuseableUI/heading/index.tsx

@@ -0,0 +1,20 @@
+import type React from "react";
+import { ReactNode } from "react";
+
+interface HeadingProps {
+  content: ReactNode;
+  className?: string;
+  as?: "h1" | "h2" | "h3" | "p";
+}
+
+export default function Heading({ content, className, as = "h2" }: HeadingProps) {
+  const Tag = as as React.ElementType;
+  return (
+    <Tag
+      style={{ color: "var(--color-secondary-75)" }}
+      className={`text-2xl md:text-3xl lg:text-5xl uppercase font-primary -tracking-[0.12px] ${className}`}
+    >
+      {content}
+    </Tag>
+  );
+}

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

@@ -0,0 +1,117 @@
+import { cn } from "@/app/utils/functions";
+import { CloseEyeIcon } from "@/app/utils/svgs/closeEyeIcon";
+import { EyeIcon } from "@/app/utils/svgs/eyeIcon";
+import React from "react";
+const Input = ({
+  label,
+  name,
+  type,
+  placeholder,
+  value,
+  onChange,
+  required,
+  disabled,
+  readOnly,
+  hasError = false,
+  className,
+  parentClassName,
+  errorMessage,
+  autoComplete,
+  darkTheme = false,
+  htmlFor,
+  id,
+  maxLength,
+  onFocus,
+  onBlur,
+}: {
+  label?: string;
+  name: string;
+  type?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  className?: string;
+  parentClassName?: string;
+  hasError?: boolean;
+  errorMessage?: string;
+  autoComplete?: string;
+  darkTheme?: boolean;
+  htmlFor?: string;
+  id?: string;
+  maxLength?: number;
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+}) => {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const defaultTheme =
+    "text-[var(--color-secondary-800)] ring-[var(--color-secondary-200)] bg-white  disabled:bg-[var(--color-secondary-200)] disabled:text-[var(--color-secondary-400)] disabled:placeholder:text-[var(--color-secondary-400)] disabled:ring-[var(--color-secondary-300)]";
+  return (
+    <div className={parentClassName}>
+      {label && (
+        <label
+          htmlFor={htmlFor}
+          className={cn(
+            "block text-sm font-medium pb-2 uppercase leading-5 tracking-[-0.035px]",
+            darkTheme
+              ? "text-[var(--color-secondary-200)]"
+              : "text-[var(--color-secondary-800)]"
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <input
+          id={id}
+          type={showPassword ? "text" : type}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          required={required}
+          disabled={disabled}
+          readOnly={readOnly}
+          maxLength={maxLength}
+          autoComplete={autoComplete}
+          className={cn(
+            "w-full p-2 ring-1 focus-visible:ring-[var(--color-secondary-600)] outline-none disabled:pointer-events-none px-4 py-3.5 text-sm font-normal font-secondary",
+            defaultTheme,
+            hasError
+              ? "ring-[var(--color-primary-600)]"
+              : "ring-[var(--color-secondary-200)]",
+            darkTheme &&
+              "bg-[var(--color-secondary-800)] ring-[var(--color-secondary-700)] placeholder:text-[var(--color-secondary-500)] text-[var(--color-secondary-200)] disabled:bg-[var(--color-secondary-800)] disabled:ring-0 disabled:placeholder:text-[var(--color-secondary-600)] disabled:text-[var(--color-secondary-600)]",
+            className
+          )}
+        />
+        {type === "password" && (
+          <button
+            type="button"
+            onClick={() => setShowPassword((prev) => !prev)}
+            className={cn(
+              "absolute right-4 top-5 transform",
+              disabled ? "pointer-events-none" : "cursor-pointer"
+            )}
+          >
+            {showPassword ? EyeIcon : CloseEyeIcon}
+          </button>
+        )}
+      </div>
+      {errorMessage && (
+        <div
+          style={{ color: "var(--color-primary-600)" }}
+          className="text-sm leading-5 tracking-[-0.035px] mt-1.5"
+        >
+          {errorMessage}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Input;

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

@@ -0,0 +1,137 @@
+import { FeatureTag } from "@/app/utils/svgs/featureTag";
+import { getFullImageUrl } from "@/app/utils/functions";
+import Image from "next/image";
+import Link from "next/link";
+import React, { useState } from "react";
+import PrimaryButton from "./primaryButton";
+import { ArrowIcon } from "@/app/utils/svgs/arrowIcon";
+
+interface ListCardProps {
+  id: string;
+  name: string;
+  image: string; // may be empty
+  href: string;
+  price: number;
+  category_id: string;
+  category: string;
+  discount?: number | null;
+  isFeatured?: boolean;
+  onSale: boolean;
+}
+
+const ListCard = ({
+  id,
+  name,
+  image,
+  href,
+  price,
+  category,
+  discount,
+  isFeatured = false,
+  onSale,
+}: ListCardProps) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const hasDiscount = discount != null && discount > 0;
+  const priceValue = hasDiscount ? price + discount : price;
+
+  const fallbackImage = "/no-image-avail-large.png";
+
+  // Ensure image URL has full S3 path if it's relative
+  const fullImageUrl = getFullImageUrl(image) || fallbackImage;
+
+  return (
+    <Link
+      href={href}
+      className="w-full flex lg:items-center gap-2 lg:gap-4 bg-[var(--color-secondary-930)] border border-[var(--color-secondary-220)] py-3 px-2 lg:px-3"
+    >
+      <div className="relative w-full max-w-[124px]">
+        {/* Featured badge */}
+        {isFeatured && (
+          <span
+            style={{ color: "var(--color-primary-600)" }}
+            className="absolute top-0 right-3 z-10 w-6 h-10"
+          >
+            {FeatureTag}
+          </span>
+        )}
+
+        {/* On sale pill */}
+        {onSale && (
+          <PrimaryButton
+            className="absolute !px-3 !py-2 top-2 right-2 z-10"
+            content="Sales"
+          />
+        )}
+
+        <div className="relative aspect-square  overflow-hidden">
+          {/* Skeleton always shown until image finishes */}
+          {!loaded && (
+            <div className="animate-pulse bg-[var(--color-secondary-200)] absolute inset-0 z-10" />
+          )}
+
+          <Image
+            src={fullImageUrl}
+            alt={name}
+            width={124}
+            height={124}
+            className={`w-full h-full object-cover transition-opacity duration-300 ${
+              loaded ? "opacity-100" : "opacity-0"
+            }`}
+            onLoad={() => setLoaded(true)}
+            onError={() => setLoaded(true)}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col lg:flex-row lg:justify-between w-full gap-1 lg:gap-3">
+        <div className="w-full">
+          <p
+            style={{ color: "var(--color-secondary-75)" }}
+            className="text-sm -tracking-[0.035px]"
+          >
+            {category}
+          </p>
+          <p
+            title={name}
+            style={{ color: "var(--color-secondary-75)" }}
+            className="-tracking-[0.05px] font-normal text-sm md:text-base lg:text-xl lg:line-clamp-1"
+          >
+            {name}
+          </p>
+
+          <div className="flex gap-2 text-lg lg:text-2xl items-center lg:mt-3">
+            <p
+              style={{ color: "var(--color-primary-700)" }}
+              className="font-semibold -tracking-[0.06px]"
+            >
+              ${price.toFixed(2)}
+            </p>
+            {hasDiscount && (
+              <p
+                style={{ color: "var(--color-secondary-400)" }}
+                className="font-semibold -tracking-[0.06px] line-through"
+              >
+                ${priceValue.toFixed(2)}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <button
+          style={{
+            border: "1px solid var(--color-secondary-210)",
+            backgroundColor: "var(--color-secondary-100)",
+            color: "var(--color-secondary-90)",
+          }}
+          className="text-sm lg:text-base size-fit px-2.5 lg:px-4 py-2 lg:py-3 gap-2 font-secondary font-semibold cursor-pointer -tracking-[0.04px] flex-shrink-0 flex items-center justify-between"
+        >
+          VIEW DETAILS
+          <span className="size-4 lg:size-5">{ArrowIcon}</span>
+        </button>
+      </div>
+    </Link>
+  );
+};
+
+export default ListCard;