@alphasquad/saleor-template-advance 0.1.0

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

@@ -0,0 +1,117 @@
+import React from "react";
+
+interface SkeletonLoaderProps {
+  type?: "card" | "text" | "image" | "hero" | "category" | "product";
+  count?: number;
+  className?: string;
+}
+
+export const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
+  type = "card",
+  count = 1,
+  className,
+}) => {
+  const renderSkeleton = () => {
+    switch (type) {
+      case "hero":
+        return (
+          <div
+            className={`relative flex lg:flex-row flex-col-reverse w-full md:h-[600px] bg-gray-200 ${
+              className ?? ""
+            }`}
+          >
+            <div className="lg:w-[min(500px,40%)] h-full bg-[var(--color-secondary-900)]">
+              <section
+                className="flex h-max flex-col w-full bg-[var(--color-secondary-900)] text-white px-6 py-8 lg:px-10 lg:py-12 lg:min-h-0 lg:justify-center"
+                aria-label="Find parts by vehicle Loading"
+              >
+                <div className="w-full max-w-md lg:max-w-none mx-auto lg:mx-0 space-y-4">
+                  <h2 className="text-2xl md:text-3xl lg:text-4xl font-primary font-bold italic uppercase tracking-tight text-white">
+                    FIND THE RIGHT PARTS
+                  </h2>
+                  <div
+                    className="flex flex-col gap-4 w-full"
+                    aria-label="Shop by differential, category, or brand Loading"
+                  >
+                    {Array.from({ length: 3 }).map((_, index) => (
+                      <div
+                        key={index}
+                        className="flex flex-col w-full rounded-lg bg-[var(--color-secondary-800)] p-4 shadow-md border-b-[3px] border-b-[var(--color-primary)] h-[115px]"
+                      >
+                        <div className="flex items-center gap-2 mb-3">
+                          <span
+                            className="w-1 h-5 flex-shrink-0 rounded-full bg-[var(--color-primary)]"
+                            aria-hidden
+                          />
+                          <span className="bg-white/70 w-full max-w-xs rounded animate-pulse h-5" />
+                        </div>
+                        <span className="bg-white/70 w-full rounded animate-pulse h-12" />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div className="w-full md:max-w-[420px] h-[280px] md:h-[380px] bg-gray-300 lg:mr-5 animate-pulse" />
+          </div>
+        );
+
+      case "category":
+        return (
+          <div
+            className={`group block border border-gray-200 rounded-md overflow-hidden bg-white ${
+              className ?? ""
+            }`}
+          >
+            <div className="relative w-full h-[246px] bg-gray-200 animate-pulse">
+              <div className="absolute top-0 flex flex-col justify-between w-full h-full z-10 p-8">
+                <div className="h-16 w-full bg-gray-300 rounded "></div>
+                <div className="h-6 w-1/2 bg-gray-300 rounded "></div>
+              </div>
+            </div>
+          </div>
+        );
+
+      case "product":
+        return (
+          <div
+            className={`group block border border-gray-200 rounded-md overflow-hidden bg-white ${
+              className ?? ""
+            }`}
+          >
+            <div className="relative w-full h-48 bg-gray-200 animate-pulse" />
+            <div className="p-3">
+              <div className="h-4 bg-gray-200 rounded w-4/4 mb-2"></div>
+              <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
+              <div className="h-3 bg-gray-200 rounded w-1/2 mb-2"></div>
+              <div className="h-4 bg-gray-200 rounded w-1/3"></div>
+            </div>
+          </div>
+        );
+
+      case "text":
+        return (
+          <div className="space-y-2">
+            <div className="h-4 bg-gray-200 rounded w-full"></div>
+            <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+          </div>
+        );
+
+      default:
+        return (
+          <div
+            className={`bg-gray-200 animate-pulse rounded ${className ?? ""}`}
+          />
+        );
+    }
+  };
+
+  return (
+    <>
+      {Array.from({ length: count }).map((_, index) => (
+        <React.Fragment key={index}>{renderSkeleton()}</React.Fragment>
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { cn } from "@/app/utils/functions";
+
+const StatusTag = ({ label, className }: { label: string; className?: string }) => {
+  const colorClasses =
+    {
+      delivered: "bg-green-800/10 text-green-800",
+      fulfilled: "bg-green-800/10 text-green-800",
+      draft: "bg-yellow-600/10 text-yellow-600 ring-yellow-600",
+      unfulfilled: "bg-yellow-600/10 text-yellow-600 ring-yellow-600",
+      unconfirmed: "bg-yellow-600/10 text-yellow-600 ring-yellow-600",
+      pending: "bg-yellow-400/10 text-yellow-400",
+      canceled: "bg-red-600/10 text-red-400",
+      expired: "bg-[var(--color-primary-600)]/10 text-[var(--color-primary-600)]",
+    }[label.toLowerCase()] || "bg-zinc-400/10 text-zinc-400";
+  return (
+    <div
+      className={cn("font-medium text-sm font-secondary tracking-[-0.25%] px-3.5 ring-1 w-fit py-0.5", colorClasses, className)}
+    >
+      {label}
+    </div>
+  );
+};
+
+export default StatusTag;

package/src/app/components/reuseableUI/tags/saleTag.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+interface tag {
+  content: string;
+}
+const SaleTag = ({ content }: tag) => {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--color-primary-600)",
+        color: "var(--color-secondary-100)",
+      }}
+      className="px-3 py-1"
+    >
+      {content}
+    </div>
+  );
+};
+
+export default SaleTag;

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

@@ -0,0 +1,93 @@
+import Image from "next/image";
+
+export interface TestimonialCardProps {
+  id: string;
+  title: string;
+  content: string;
+  author?: string;
+  rating?: number;
+  image?: string;
+  publishedAt: string;
+}
+
+export const TestimonialCard = ({
+  id,
+  title,
+  content,
+  author,
+  rating,
+  image,
+  publishedAt,
+}: TestimonialCardProps) => {
+  return (
+    <div
+      key={id}
+      style={{ borderColor: "var(--color-secondary-220)" }}
+      className="bg-[var(--color-secondary-930)] p-8 shadow-sm border hover:shadow-md transition-shadow duration-300 h-full flex flex-col"
+    >
+      {/* Rating stars if provided */}
+      {rating && (
+        <div className="flex mb-4">
+          {[...Array(5)].map((_, index) => (
+            <svg
+              key={index}
+              style={{
+                color:
+                  index < rating
+                    ? "var(--color-primary-500)"
+                    : "var(--color-secondary-300)",
+              }}
+              className="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+          ))}
+        </div>
+      )}
+
+      {/* Title */}
+      <h3
+        style={{ color: "var(--color-secondary-800)" }}
+        className="font-secondary text-xl font-semibold mb-4 leading-7 -tracking-[0.06px]"
+      >
+        {title}
+      </h3>
+
+      {/* Content */}
+      <div className="flex-grow">
+        <p className="text-[var(--color-secondary-600)] leading-7 text-base tracking-[-0.04px] mb-6 line-clamp-4">
+          {content}
+        </p>
+      </div>
+
+      {/* Author info */}
+      {author && (
+        <div className="flex items-center gap-3 mt-auto">
+          {image && (
+            <Image
+              src={image}
+              alt={author}
+              width={40}
+              height={40}
+              quality={90}
+              className="rounded-full object-cover"
+            />
+          )}
+          <div className="flex justify-between w-full items-center">
+            <p
+              style={{ color: "var(--color-secondary-600)" }}
+              className="font-secondary font-semibold text-sm"
+            >
+              {author}
+            </p>
+            <span className="font-primary text-xs text-black">
+              {new Date(publishedAt).toLocaleDateString()}
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/app/components/richText/EditorRenderer.tsx

@@ -0,0 +1,318 @@
+import React from "react"
+import Link from "next/link"
+
+export type EditorJsBlock = {
+  id: string
+  type: string
+  data: {
+    text?: string
+    level?: number
+    style?: "ordered" | "unordered"
+    items?: string[]
+  }
+}
+
+// Helper function to decode HTML entities
+function decodeHtmlEntities(text: string): string {
+  const textarea = typeof document !== 'undefined'
+    ? document.createElement('textarea')
+    : null;
+
+  if (textarea) {
+    textarea.innerHTML = text;
+    return textarea.value;
+  }
+
+  // Fallback for server-side rendering
+  return text
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&nbsp;/g, ' ');
+}
+
+// Helper function to check if text contains HTML table elements
+function isTableFragment(text: string): boolean {
+  const tablePatterns = [
+    /<table/i,
+    /<\/table>/i,
+    /<thead/i,
+    /<\/thead>/i,
+    /<tbody/i,
+    /<\/tbody>/i,
+    /<tr/i,
+    /<\/tr>/i,
+    /<td/i,
+    /<\/td>/i,
+    /<th/i,
+    /<\/th>/i,
+    /<colgroup/i,
+    /<\/colgroup>/i,
+    /<col/i,
+  ];
+  return tablePatterns.some(pattern => pattern.test(text));
+}
+
+// Helper function to merge table fragments
+function mergeTableBlocks(blocks: EditorJsBlock[]): EditorJsBlock[] {
+  const merged: EditorJsBlock[] = [];
+  let tableBuffer: string[] = [];
+  let tableStartId: string | null = null;
+  let isInTable = false;
+
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i];
+    const text = block.data?.text || "";
+    const decodedText = decodeHtmlEntities(text);
+
+    // Check if this starts a table
+    if (/<table/i.test(decodedText)) {
+      isInTable = true;
+      tableStartId = block.id;
+    }
+
+    if (block.type === "paragraph" && (isInTable || isTableFragment(decodedText))) {
+      // Start or continue accumulating table content
+      if (!tableStartId) {
+        tableStartId = block.id;
+        isInTable = true;
+      }
+
+      // Clean up individual fragments: remove <br> tags and preserve whitespace
+      const cleanedText = decodedText
+        .replace(/<br\s*\/?>/gi, '')
+        .replace(/^\s+|\s+$/g, ''); // Trim leading/trailing whitespace only
+
+      if (cleanedText) {
+        tableBuffer.push(cleanedText);
+      }
+
+      // Check if this closes the table
+      if (/<\/table>/i.test(decodedText)) {
+        isInTable = false;
+        // Create merged table block
+        const mergedHTML = tableBuffer.join('');
+        merged.push({
+          id: tableStartId || block.id,
+          type: "table",
+          data: {
+            text: mergedHTML
+          }
+        });
+        tableBuffer = [];
+        tableStartId = null;
+      }
+    } else {
+      // If we have accumulated table content, create a merged block
+      if (tableBuffer.length > 0 && tableStartId) {
+        // Join without extra newlines to preserve HTML structure
+        const mergedHTML = tableBuffer.join('');
+        merged.push({
+          id: tableStartId,
+          type: "table",
+          data: {
+            text: mergedHTML
+          }
+        });
+        tableBuffer = [];
+        tableStartId = null;
+        isInTable = false;
+      }
+      // Add the non-table block
+      merged.push(block);
+    }
+  }
+
+  // Handle any remaining table content
+  if (tableBuffer.length > 0 && tableStartId) {
+    const mergedHTML = tableBuffer.join('');
+    merged.push({
+      id: tableStartId,
+      type: "table",
+      data: {
+        text: mergedHTML
+      }
+    });
+  }
+
+  return merged;
+}
+
+export default function EditorRenderer({ content }: { content: string | null | undefined }) {
+  let blocks: EditorJsBlock[] = []
+  if (content) {
+    try {
+      const parsed = JSON.parse(content)
+      if (Array.isArray(parsed?.blocks)) {
+        blocks = parsed.blocks as EditorJsBlock[]
+      }
+    } catch (_) {}
+  }
+
+  if (!blocks.length) {
+    return (
+ <div className="w-full p-6">
+        <h2 className="text-xl font-semibold">Call for Availability</h2>
+      </div>
+    )
+  }
+
+  // Merge table fragments before rendering
+  const mergedBlocks = mergeTableBlocks(blocks);
+
+  const renderBlock = (block: EditorJsBlock) => {
+    const { type, data } = block
+    const html = decodeHtmlEntities(data?.text || "")
+
+    switch (type) {
+      case "table":
+        return (
+          <div
+            key={block.id}
+            className="table-wrapper my-6"
+            dangerouslySetInnerHTML={{ __html: data?.text || "" }}
+          />
+        );
+      case "header": {
+        const level = Math.min(Math.max(Number(data?.level) || 3, 1), 6)
+        return React.createElement(
+          `h${level}`,
+          {
+            key: block.id,
+            className: "text-2xl font-semibold leading-8 tracking-[-0.06px] my-6",
+            dangerouslySetInnerHTML: { __html: html },
+          }
+        )
+      }
+      case "list": {
+        const style = data?.style || "unordered"
+        const items = Array.isArray(data?.items) ? data.items : []
+        const ListTag = style === "ordered" ? "ol" : "ul"
+        const listClassName = style === "ordered"
+          ? "list-decimal list-inside my-4 space-y-2 text-lg leading-7 tracking-[-0.045px]"
+          : "list-disc list-inside my-4 space-y-2 text-lg leading-7 tracking-[-0.045px]"
+
+        return (
+          <ListTag key={block.id} className={listClassName}>
+            {items.map((item, idx) => (
+              <li key={`${block.id}-${idx}`} dangerouslySetInnerHTML={{ __html: decodeHtmlEntities(item) }} />
+            ))}
+          </ListTag>
+        )
+      }
+      case "paragraph":
+      default:
+        // Check if this paragraph contains table HTML that wasn't merged
+        if (isTableFragment(html)) {
+          return (
+            <div
+              key={block.id}
+              className="table-wrapper my-6"
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          );
+        }
+        return (
+          <p
+            key={block.id}
+            className="text-lg leading-7 tracking-[-0.045px] my-4"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        )
+    }
+  }
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{
+        __html: `
+          .editor-content a {
+            color: var(--color-primary-600);
+            text-decoration: underline;
+            transition: opacity 0.2s;
+          }
+          .editor-content a:hover {
+            opacity: 0.8;
+          }
+          .editor-content strong,
+          .editor-content b {
+            font-weight: 600;
+          }
+          .editor-content em,
+          .editor-content i {
+            font-style: italic;
+          }
+          .editor-content table {
+            width: 100% !important;
+            max-width: 100% !important;
+            border-collapse: collapse;
+            margin: 2rem 0;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            display: table;
+            table-layout: auto !important;
+          }
+          .editor-content .table-wrapper {
+            width: 100%;
+            overflow-x: auto;
+          }
+          .editor-content table col {
+            width: auto !important;
+          }
+          .editor-content table colgroup {
+            display: table-column-group;
+          }
+          .editor-content table thead {
+            background-color: var(--color-primary-600);
+            color: white;
+          }
+          .editor-content table th,
+          .editor-content table td {
+            padding: 1rem 1.5rem;
+            text-align: left;
+            border: 1px solid var(--color-secondary-300);
+            line-height: 1.6;
+          }
+          .editor-content table th {
+            font-weight: 600;
+            font-size: 1rem;
+          }
+          .editor-content table tbody tr:nth-child(even) {
+            background-color: var(--color-secondary-50);
+          }
+          .editor-content table tbody tr:hover {
+            background-color: var(--color-secondary-100);
+            transition: background-color 0.2s ease;
+          }
+          .editor-content .table-header {
+            font-weight: 600;
+            font-size: 1.1rem;
+            padding: 1.25rem 1.5rem;
+          }
+          .editor-content .table-data {
+            font-size: 0.95rem;
+            padding: 0.875rem 1.25rem;
+          }
+          .ezo-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 2rem 0;
+          }
+          @media (max-width: 768px) {
+            .editor-content table {
+              font-size: 0.875rem;
+            }
+            .editor-content table th,
+            .editor-content table td {
+              padding: 0.75rem 1rem;
+            }
+          }
+        `
+      }} />
+      <div className="editor-content overflow-x-auto">
+        {mergedBlocks.map(renderBlock)}
+      </div>
+    </>
+  )
+}