@salla.sa/twilight-theme-engine 1.0.85 → 1.0.86

package/tailwind/components/home/FeaturedProductsStyle1.tsx.txt

@@ -0,0 +1,125 @@
+import { memo, useState, useCallback } from 'react';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import type { Product } from '../../types';
+
+interface SectionItem {
+  title?: string;
+  name?: string;
+  type?: string;
+  id?: string;
+  products?: Product[];
+  limit?: number;
+}
+
+interface MainProduct {
+  id?: string;
+  title?: string;
+  value?: string;
+  product?: Product;
+}
+
+export interface FeaturedProductsStyle1Props {
+  data: {
+    items: SectionItem[];
+    main_product?: MainProduct;
+    position?: number;
+    [key: string]: unknown;
+  };
+}
+
+export const FeaturedProductsStyle1 = memo(function FeaturedProductsStyle1({
+  data,
+}: FeaturedProductsStyle1Props) {
+  const items = data.items || [];
+  const mainProduct = data.main_product;
+
+  const [activeTab, setActiveTab] = useState<string>(items[0]?.id || '');
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const handleTabClick = useCallback(
+    (tabId: string) => {
+      if (tabId === activeTab) return;
+      setIsAnimating(true);
+      setActiveTab(tabId);
+      setTimeout(() => setIsAnimating(false), 100);
+    },
+    [activeTab]
+  );
+
+  if (!items.length) return null;
+
+  const hasMultipleSections = items.length > 1;
+
+  return (
+    <>
+      <div className="s-block__title">
+        <div className="right-side">
+          <h2>{mainProduct?.title}</h2>
+        </div>
+        {hasMultipleSections && (
+          <div className="tabs hide-scroll hidden lg:flex">
+            {items.map((section) => (
+              <SallaButton
+                key={section.id}
+                shape="link"
+                onClick={() => handleTabClick(section.id || '')}
+                className={`tab-trigger ${activeTab === section.id ? 'is-active' : ''}`}
+              >
+                {section.title || section.name}
+              </SallaButton>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className={`grid grid-cols-1 gap-8 ${mainProduct?.product ? 'lg:grid-cols-2' : ''}`}>
+        {mainProduct?.product && (
+          <div className="flex flex-col">
+            <custom-salla-product-card
+              shadow-on-hover
+              product={JSON.stringify(mainProduct.product)}
+              isSpecial
+            ></custom-salla-product-card>
+          </div>
+        )}
+        <div className="flex flex-col">
+          {hasMultipleSections && (
+            <div className="tabs mb-4 sm:mb-8 hide-scroll lg:hidden">
+              {items.map((section) => (
+                <SallaButton
+                  key={section.id}
+                  shape="link"
+                  onClick={() => handleTabClick(section.id || '')}
+                  className={`tab-trigger ${activeTab === section.id ? 'is-active' : ''}`}
+                >
+                  {section.title || section.name}
+                </SallaButton>
+              ))}
+            </div>
+          )}
+
+          <div className="tabs-wrapper flex flex-1">
+            {items.map((section) => {
+              const isActive = activeTab === section.id;
+              return (
+                <div
+                  key={section.id}
+                  className={`tabs__item grid-cols-2 ${mainProduct?.product ? '' : 'lg:grid-cols-4'} ${isActive ? 'is-active' : ''} ${isAnimating && isActive ? 'opacity-0 translate-y-3' : ''} ${!isAnimating && isActive ? 'opacity-100 translate-y-0' : ''}`}
+                >
+                  {section.products
+                    ?.slice(0, mainProduct?.product ? 4 : 8)
+                    .map((product, productIndex) => (
+                      <custom-salla-product-card
+                        key={product.id || productIndex}
+                        product={JSON.stringify(product)}
+                      ></custom-salla-product-card>
+                    ))}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});

package/tailwind/components/home/FeaturedProductsStyle2.tsx.txt

@@ -0,0 +1,127 @@
+import { memo, useState, useCallback } from 'react';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaProductsList } from '@salla.sa/twilight-components-react';
+import { SallaProductsSlider } from '@salla.sa/twilight-components-react';
+import { product, ProductsListSource } from '../../api/product';
+import { ProductCard } from '../../components/product';
+
+interface ProductSource {
+  source: ProductsListSource;
+  limit?: number;
+  source_value?: number | number[];
+}
+
+interface SectionItem {
+  title?: string;
+  name?: string;
+  type?: string;
+  id?: string;
+  products: ProductSource;
+  limit?: number;
+}
+
+export interface FeaturedProductsStyle2Props {
+  data: {
+    items: SectionItem[];
+    position?: number;
+    is_slider?: boolean;
+    [key: string]: unknown;
+  };
+}
+
+export const FeaturedProductsStyle2 = memo(function FeaturedProductsStyle2({
+  data,
+}: FeaturedProductsStyle2Props) {
+  const items = data.items || [];
+  const isSlider = data.is_slider ?? true;
+
+  const [activeTab, setActiveTab] = useState<string>(items[0]?.id || '');
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const handleTabClick = useCallback(
+    (tabId: string) => {
+      if (tabId === activeTab) return;
+      setIsAnimating(true);
+      setActiveTab(tabId);
+      setTimeout(() => setIsAnimating(false), 100);
+    },
+    [activeTab]
+  );
+
+  const loader = useCallback(
+    (source: ProductsListSource, value?: number | number[], limit?: number) => {
+      return () =>
+        product.list({
+          source: source,
+          sourceValue: value,
+          perPage: limit,
+        });
+    },
+    []
+  );
+
+  if (!items.length) return null;
+
+  const hasMultipleSections = items.length > 1;
+
+  return (
+    <>
+      <div className="container">
+        {hasMultipleSections && (
+          <div className="tabs hide-scroll">
+            {items.map((section) => (
+              <SallaButton
+                key={section.id}
+                fill="outline"
+                onClick={() => handleTabClick(section.id || '')}
+                className={`tab-trigger ${activeTab === section.id ? 'is-active' : ''}`}
+              >
+                {section.title || section.name}
+              </SallaButton>
+            ))}
+          </div>
+        )}
+
+        <div className="tabs-wrapper">
+          {items.map((section) => {
+            const isActive = activeTab === section.id;
+            return (
+              <div
+                key={section.id}
+                className={`tabs__item ${isActive ? 'is-active' : ''} ${isAnimating && isActive ? 'opacity-0 translate-y-3' : ''} ${!isAnimating && isActive ? 'opacity-100 translate-y-0' : ''}`}
+              >
+                {isSlider ? (
+                  <SallaProductsSlider
+                    loader={loader(
+                      section.products.source,
+                      section.products?.source_value,
+                      section.products?.limit
+                    )}
+                    sliderProps={{ id: `section-${section.id}-slider` }}
+                  >
+                    {(product) => (
+                      <ProductCard className="s-products-slider-card" product={product} />
+                    )}
+                  </SallaProductsSlider>
+                ) : (
+                  <SallaProductsList
+                    loader={loader(
+                      section.products.source,
+                      section.products?.source_value,
+                      section.products?.limit
+                    )}
+                    itemsClassName="s-products-list-horizontal-cards"
+                  >
+                    {(products) =>
+                      products.map((product) => <ProductCard key={product.id} product={product} />)
+                    }
+                  </SallaProductsList>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+});

package/tailwind/components/home/FeaturedProductsStyle3.tsx.txt

@@ -0,0 +1,71 @@
+import { memo } from 'react';
+import { ProductCard } from '../product/ProductCard';
+import type { Product } from '../../types';
+
+interface SectionItem {
+  title?: string;
+  name?: string;
+  type?: string;
+  products?: Product[];
+  featured_product?: Product;
+  limit?: number;
+  id?: string;
+}
+
+export interface FeaturedProductsStyle3Props {
+  data: {
+    items: SectionItem[];
+    position?: number;
+    [key: string]: unknown;
+  };
+}
+
+export const FeaturedProductsStyle3 = memo(function FeaturedProductsStyle3({
+  data,
+}: FeaturedProductsStyle3Props) {
+  const items = data.items || [];
+
+  if (!items.length) return null;
+
+  return (
+    <>
+      <div className="inner">
+        {items.map((section, sectionIndex) => (
+          <div key={section.id || sectionIndex}>
+            <div className="s-block__title">
+              <h2>{section.title}</h2>
+            </div>
+            <div className="flex-1 grid lg:grid-cols-2 gap-4 sm:gap-8">
+              {section.featured_product ? (
+                <>
+                  <ProductCard product={section.featured_product} layout="fullImage" withShadow />
+                  <div className="grid gap-4 sm:gap-8">
+                    {section.products?.slice(0, 3).map((product, idx) => (
+                      <ProductCard
+                        key={product.id}
+                        product={product}
+                        layout="minimal"
+                        withShadow
+                        index={idx}
+                      />
+                    ))}
+                  </div>
+                </>
+              ) : (
+                section.products?.map((product, idx) => (
+                  <ProductCard
+                    key={product.id}
+                    product={product}
+                    layout="minimal"
+                    withShadow
+                    index={idx}
+                  />
+                ))
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+});

package/tailwind/components/home/FixedBanner.tsx.txt

@@ -0,0 +1,68 @@
+import { memo } from 'react';
+import { Link } from '../common';
+
+export interface FixedBannerComponentProps {
+  data: {
+    image: {
+      url: string;
+      alt?: string;
+      small_url?: string;
+    };
+    url?: string;
+    title?: string;
+    position?: number;
+    [key: string]: unknown;
+  };
+  priority?: boolean;
+}
+
+export const FixedBanner = memo(function FixedBanner(props: FixedBannerComponentProps) {
+  const { data, priority = false } = props;
+  const image = data.image?.url;
+
+  if (!image) {
+    return null;
+  }
+
+  const url = data.url;
+  const altText = data.image.alt?.trim() ? data.image.alt : data.title || 'fixed banner';
+
+  const imgProps = priority
+    ? {
+        loading: 'eager' as const,
+        fetchPriority: 'high' as const,
+        decoding: 'sync' as const,
+      }
+    : {
+        loading: 'lazy' as const,
+        decoding: 'async' as const,
+      };
+
+  const smallUrl = data.image.small_url;
+
+  return (
+    <>
+      <div className="container">
+        <Link
+          to={url || '#'}
+          className="banner banner--fixed overflow-hidden"
+          aria-label={`Banner ${altText}`}
+        >
+          <picture>
+            {smallUrl && <source media="(max-width: 767px)" srcSet={smallUrl} />}
+            <img
+              width="1200"
+              height="300"
+              src={image}
+              alt={altText}
+              style={{ maxWidth: '100%', objectFit: 'contain' }}
+              loading={imgProps.loading}
+              decoding={imgProps.decoding}
+              {...(priority && { fetchPriority: imgProps.fetchPriority })}
+            />
+          </picture>
+        </Link>
+      </div>
+    </>
+  );
+});

package/tailwind/components/home/FixedProducts.tsx.txt

@@ -0,0 +1,72 @@
+import { Suspense } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { FixedProductsSkeleton } from '@salla.sa/twilight-components-react';
+import { Link } from '../common';
+import { product, ProductsListSource } from '../../api/product';
+import { ProductCard } from '../../components/product';
+import { useTranslation } from '../../providers/I18nProvider';
+
+export interface FixedProductsProps {
+  data: {
+    products: { source: ProductsListSource; source_value?: number[] | null };
+    title?: string;
+    limit?: number | string;
+    display_all_url?: string | null;
+    key?: string | null;
+    isVertical?: boolean;
+    position?: number;
+    [key: string]: unknown;
+  };
+}
+
+export function FixedProducts({ data }: FixedProductsProps) {
+  const { t } = useTranslation();
+
+  const title = data.title;
+  const limit = data.limit ? Number(data.limit) : undefined;
+  const isVertical = data.isVertical ?? true;
+
+  const { data: result, isLoading } = useQuery(
+    product.queries.list({
+      source: data.products.source,
+      sourceValue: data.products?.source_value,
+      perPage: limit,
+    })
+  );
+
+  const products = result?.items ?? [];
+
+  if (isLoading) {
+    return <FixedProductsSkeleton />;
+  }
+
+  if (!products.length) return null;
+
+  return (
+    <Suspense fallback={<FixedProductsSkeleton />}>
+      {title && (
+        <div className="s-block__title">
+          <div className="right-side">
+            <h2>{title}</h2>
+          </div>
+          {data.display_all_url && (
+            <Link to={data.display_all_url} className="s-block__display-all">
+              {t('blocks.home.display_all', 'View All')}
+              <i className="sicon-arrow-left"></i>
+            </Link>
+          )}
+        </div>
+      )}
+      <div
+        className={
+          's-products-list-wrapper ' +
+          (isVertical ? 's-products-list-vertical-cards' : 's-products-list-horizontal-cards')
+        }
+      >
+        {products.slice(0, 4).map((product) => (
+          <ProductCard key={product.id} product={product} />
+        ))}
+      </div>
+    </Suspense>
+  );
+}