@hydralms/components 0.1.3 → 0.3.0

package/src/sections/CertificateViewer/CertificateViewer.tsx

@@ -1,14 +1,123 @@
+import { useMemo } from "react";
 import { Award, Download, Printer } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { Skeleton } from "../../ui/skeleton";
 import { Button } from "../../ui/button";
-import { Separator } from "../../ui/separator";
-import type { CertificateViewerProps } from "./types";
+import type { CertificateViewerProps, CertificateVariant } from "./types";
 import { cn } from "../../lib/utils";
+import { SectionShell } from "../_shared/section-shell";
+import {
+  CORNER_CONFIGS,
+  CORNER_POSITIONS,
+  DIVIDER_CONFIGS,
+  BACKGROUND_GLOW,
+  ICON_COLORS,
+  HEADING_STYLES,
+  COURSE_TITLE_COLORS,
+  SERIF_VARIANTS,
+} from "./certificate-variants";
 
-const VARIANT_CLASSES: Record<string, string> = {
-  classic: "border-[3px] border-double border-warning bg-linear-to-br from-[#fffbe6] to-[#fff8e1]",
-  modern: "border border-primary bg-linear-to-br from-[#fff5f5] to-[#fee2e2]",
-  minimal: "border border-border",
-};
+// ─── Frame CVAs ────────────────────────────────────────────────
+
+const outerFrameVariants = cva("mx-auto max-w-4xl", {
+  variants: {
+    variant: {
+      classic:
+        "border-[3px] border-double border-warning/50 rounded-lg p-1.5",
+      modern: "rounded-lg",
+      elegant:
+        "border border-foreground/15 rounded-lg p-2.5 dark:border-foreground/10",
+      academic: "border-2 border-info/30 rounded-lg p-1.5",
+      minimal: "rounded-lg",
+      bold: "rounded-lg",
+    },
+  },
+  defaultVariants: { variant: "classic" },
+});
+
+const innerFrameVariants = cva(
+  "relative text-center p-8 sm:p-12 md:p-16 overflow-hidden",
+  {
+    variants: {
+      variant: {
+        classic: "border border-warning/25 rounded bg-warning/5",
+        modern:
+          "border border-primary/20 rounded-lg bg-linear-to-br from-primary/5 to-primary/8 border-t-[3px] border-t-primary/60",
+        elegant:
+          "border border-foreground/8 rounded bg-linear-to-b from-background to-muted/20 dark:border-foreground/5 dark:to-muted/10",
+        academic: "border border-info/15 rounded bg-info/3",
+        minimal: "border border-border rounded-lg bg-background",
+        bold: "border-[3px] border-primary rounded-lg bg-linear-to-br from-primary/8 to-palette-0/8",
+      },
+    },
+    defaultVariants: { variant: "classic" },
+  },
+);
+
+// ─── Sub-components ─────────────────────────────────────────────
+
+function CornerOrnaments({ variant }: { variant: CertificateVariant }) {
+  const config = CORNER_CONFIGS[variant];
+  if (!config) return null;
+
+  return (
+    <>
+      {CORNER_POSITIONS.map(({ key, pos, transform }) => (
+        <svg
+          key={key}
+          className={cn("absolute pointer-events-none", pos, config.color)}
+          width={config.size}
+          height={config.size}
+          viewBox={`0 0 ${config.size} ${config.size}`}
+          fill="none"
+          stroke="currentColor"
+          style={transform ? { transform } : undefined}
+          aria-hidden="true"
+        >
+          {config.paths.map((p, i) => (
+            <path key={i} d={p.d} strokeWidth={p.strokeWidth} />
+          ))}
+          {config.dots?.map((dot, i) => (
+            <circle
+              key={`d${i}`}
+              cx={dot.cx}
+              cy={dot.cy}
+              r={dot.r}
+              fill="currentColor"
+              stroke="none"
+            />
+          ))}
+        </svg>
+      ))}
+    </>
+  );
+}
+
+function OrnamentalDivider({
+  variant,
+  className,
+}: {
+  variant: CertificateVariant;
+  className?: string;
+}) {
+  const config = DIVIDER_CONFIGS[variant];
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-3 my-5 mx-auto max-w-70",
+        className,
+      )}
+      role="separator"
+      aria-hidden="true"
+    >
+      <span className={cn("flex-1 h-px", config.lineColor)} />
+      {config.motif}
+      <span className={cn("flex-1 h-px", config.lineColor)} />
+    </div>
+  );
+}
+
+// ─── Main component ────────────────────────────────────────────
 
 export function CertificateViewer({
   recipientName,
@@ -22,10 +131,13 @@ export function CertificateViewer({
   showActions = true,
   onPrint,
   onDownload,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: CertificateViewerProps) {
-  const formattedDate = (() => {
+  const formattedDate = useMemo(() => {
     try {
       return new Date(completionDate).toLocaleDateString("en-US", {
         year: "numeric",
@@ -35,7 +147,7 @@ export function CertificateViewer({
     } catch {
       return completionDate;
     }
-  })();
+  }, [completionDate]);
 
   function handlePrint() {
     if (onPrint) {
@@ -45,63 +157,105 @@ export function CertificateViewer({
     }
   }
 
+  const glowStyle = BACKGROUND_GLOW[variant];
+
   return (
+    <SectionShell
+      isLoading={isLoading}
+      error={error}
+      onRetry={onRetry}
+      className={className}
+      style={style}
+      skeleton={<Skeleton className="h-80 w-full rounded-lg border" />}
+    >
     <div className={className} style={style}>
-      <div
-        className={cn(
-          "p-3 sm:p-5 md:p-6 text-center max-w-200 mx-auto rounded-md",
-          VARIANT_CLASSES[variant],
-        )}
-      >
-        {/* Logo or icon */}
-        {organizationLogo ? (
-          <img
-            src={organizationLogo}
-            alt={organizationName}
-            className="h-15 mb-2 mx-auto block"
-          />
-        ) : (
-          <Award
-            size={48}
-            className={cn("mx-auto mb-4", variant === "classic" && "text-warning")}
-          />
-        )}
-
-        <p className="uppercase tracking-[3px] text-sm text-foreground/70">
-          Certificate of Completion
-        </p>
-
-        <Separator className="my-2 mx-auto max-w-50" />
-
-        <p className="text-sm text-foreground mb-1">This is to certify that</p>
-        <p className={cn("text-2xl font-bold mb-2 text-foreground", variant === "classic" && "font-serif")}>
-          {recipientName}
-        </p>
-        <p className="text-sm text-foreground mb-1">has successfully completed</p>
-        <p className="text-xl font-bold mb-2 text-primary">{courseTitle}</p>
-
-        <p className="text-sm text-foreground mb-3">
-          Issued by {organizationName} on {formattedDate}
-        </p>
-
-        {signatory && (
-          <div className="mt-4 mb-2">
-            <Separator className="my-2 mx-auto max-w-50" />
-            <p className="font-semibold text-sm text-foreground">{signatory.name}</p>
-            <p className="text-xs text-muted-foreground">{signatory.title}</p>
-          </div>
-        )}
+      {/* Outer certificate frame */}
+      <div className={outerFrameVariants({ variant })}>
+        {/* Inner certificate frame */}
+        <div className={innerFrameVariants({ variant })}>
+          <CornerOrnaments variant={variant} />
+
+          {glowStyle && (
+            <div
+              className="absolute inset-0 pointer-events-none rounded-[inherit]"
+              style={glowStyle}
+              aria-hidden="true"
+            />
+          )}
+
+          <div className="relative">
+            {organizationLogo ? (
+              <img
+                src={organizationLogo}
+                alt={organizationName}
+                className="h-20 mb-4 mx-auto block"
+              />
+            ) : (
+              <Award
+                size={64}
+                className={cn("mx-auto mb-6", ICON_COLORS[variant])}
+              />
+            )}
+
+            <p className={cn("mb-2", HEADING_STYLES[variant])}>
+              Certificate of Completion
+            </p>
+
+            <OrnamentalDivider variant={variant} />
+
+            <p className="text-base text-foreground/70 mb-2">
+              This is to certify that
+            </p>
 
-        {certificateId && (
-          <span className="block text-xs text-muted-foreground mt-2">
-            Certificate ID: {certificateId}
-          </span>
-        )}
+            <p
+              className={cn(
+                "text-4xl font-bold mb-4 text-foreground",
+                SERIF_VARIANTS.has(variant) && "font-serif",
+              )}
+            >
+              {recipientName}
+            </p>
+
+            <p className="text-base text-foreground/70 mb-2">
+              has successfully completed
+            </p>
+
+            <p
+              className={cn(
+                "text-2xl font-semibold mb-4",
+                COURSE_TITLE_COLORS[variant],
+              )}
+            >
+              {courseTitle}
+            </p>
+
+            <p className="text-base text-foreground/60 mb-6">
+              Issued by {organizationName} on {formattedDate}
+            </p>
+
+            {signatory && (
+              <div className="mt-6 mb-4">
+                <OrnamentalDivider variant={variant} />
+                <p className="font-semibold text-base text-foreground">
+                  {signatory.name}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {signatory.title}
+                </p>
+              </div>
+            )}
+
+            {certificateId && (
+              <span className="block text-xs text-muted-foreground mt-4">
+                Certificate ID: {certificateId}
+              </span>
+            )}
+          </div>
+        </div>
       </div>
 
-      {/* Actions */}
       {showActions && (
-        <div className="flex justify-center gap-2 mt-3">
+        <div className="flex justify-center gap-3 mt-6">
           <Button variant="outline" onClick={handlePrint}>
             <Printer size={16} /> Print
           </Button>
@@ -113,5 +267,6 @@ export function CertificateViewer({
         </div>
       )}
     </div>
+    </SectionShell>
   );
 }

package/src/sections/CertificateViewer/certificate-variants.tsx

@@ -0,0 +1,170 @@
+import type { CertificateVariant } from "./types";
+
+// ─── Corner ornaments ──────────────────────────────────────────
+
+export interface CornerConfig {
+  size: number;
+  paths: { d: string; strokeWidth: number }[];
+  dots?: { cx: number; cy: number; r: number }[];
+  color: string;
+}
+
+export const CORNER_CONFIGS: Record<CertificateVariant, CornerConfig | null> = {
+  classic: {
+    size: 40,
+    paths: [
+      { d: "M 2 38 L 2 10 Q 2 2 10 2 L 38 2", strokeWidth: 1.5 },
+      { d: "M 7 38 L 7 13 Q 7 7 13 7 L 38 7", strokeWidth: 0.75 },
+    ],
+    color: "text-warning/50",
+  },
+  modern: null,
+  elegant: {
+    size: 32,
+    paths: [{ d: "M 0 30 L 0 0 L 30 0", strokeWidth: 0.5 }],
+    dots: [{ cx: 2.5, cy: 2.5, r: 1.5 }],
+    color: "text-foreground/20",
+  },
+  academic: {
+    size: 36,
+    paths: [
+      { d: "M 0 36 L 0 0 L 36 0", strokeWidth: 2 },
+      { d: "M 5 36 L 5 5 L 36 5", strokeWidth: 1 },
+    ],
+    color: "text-info/35",
+  },
+  minimal: null,
+  bold: {
+    size: 20,
+    paths: [],
+    dots: [{ cx: 5, cy: 5, r: 5 }],
+    color: "text-primary/40",
+  },
+};
+
+export const CORNER_POSITIONS = [
+  { key: "tl", pos: "top-3 left-3", transform: undefined },
+  { key: "tr", pos: "top-3 right-3", transform: "scaleX(-1)" },
+  { key: "bl", pos: "bottom-3 left-3", transform: "scaleY(-1)" },
+  { key: "br", pos: "bottom-3 right-3", transform: "scale(-1)" },
+] as const;
+
+// ─── Divider configs ────────────────────────────────────────────
+
+export interface DividerConfig {
+  lineColor: string;
+  motif: React.ReactNode;
+}
+
+export const DIVIDER_CONFIGS: Record<CertificateVariant, DividerConfig> = {
+  classic: {
+    lineColor: "bg-warning/30",
+    motif: (
+      <svg width="12" height="12" viewBox="0 0 12 12" className="text-warning/50 shrink-0" aria-hidden="true">
+        <path d="M6 0 L12 6 L6 12 L0 6 Z" fill="currentColor" />
+      </svg>
+    ),
+  },
+  modern: {
+    lineColor: "bg-primary/20",
+    motif: (
+      <svg width="8" height="8" viewBox="0 0 8 8" className="text-primary/40 shrink-0" aria-hidden="true">
+        <circle cx="4" cy="4" r="3" fill="currentColor" />
+      </svg>
+    ),
+  },
+  elegant: {
+    lineColor: "bg-foreground/10",
+    motif: (
+      <svg width="10" height="10" viewBox="0 0 10 10" className="text-foreground/15 shrink-0" aria-hidden="true">
+        <path d="M5 0 L6 4 L10 5 L6 6 L5 10 L4 6 L0 5 L4 4 Z" fill="currentColor" />
+      </svg>
+    ),
+  },
+  academic: {
+    lineColor: "bg-info/25",
+    motif: (
+      <svg width="10" height="10" viewBox="0 0 10 10" className="text-info/40 shrink-0" aria-hidden="true">
+        <path d="M4 0 L6 0 L6 4 L10 4 L10 6 L6 6 L6 10 L4 10 L4 6 L0 6 L0 4 L4 4 Z" fill="currentColor" />
+      </svg>
+    ),
+  },
+  minimal: {
+    lineColor: "bg-border",
+    motif: null,
+  },
+  bold: {
+    lineColor: "bg-primary/40",
+    motif: (
+      <svg width="10" height="10" viewBox="0 0 10 10" className="text-primary/50 shrink-0" aria-hidden="true">
+        <rect x="1" y="1" width="8" height="8" fill="currentColor" />
+      </svg>
+    ),
+  },
+};
+
+// ─── Background glow ────────────────────────────────────────────
+
+export const BACKGROUND_GLOW: Record<CertificateVariant, React.CSSProperties | null> = {
+  classic: {
+    background:
+      "radial-gradient(ellipse at center, var(--color-warning) 0%, transparent 65%)",
+    opacity: 0.06,
+  },
+  modern: null,
+  elegant: {
+    background:
+      "radial-gradient(ellipse at center, var(--color-foreground) 0%, transparent 70%)",
+    opacity: 0.03,
+  },
+  academic: {
+    background:
+      "radial-gradient(ellipse at center, var(--color-info) 0%, transparent 65%)",
+    opacity: 0.05,
+  },
+  minimal: null,
+  bold: {
+    background:
+      "radial-gradient(ellipse at 30% 50%, var(--color-primary) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, var(--color-palette-0) 0%, transparent 50%)",
+    opacity: 0.06,
+  },
+};
+
+// ─── Typography maps ────────────────────────────────────────────
+
+export const ICON_COLORS: Record<CertificateVariant, string> = {
+  classic: "text-warning",
+  modern: "text-primary",
+  elegant: "text-foreground/60",
+  academic: "text-info",
+  minimal: "text-muted-foreground",
+  bold: "text-primary",
+};
+
+export const HEADING_STYLES: Record<CertificateVariant, string> = {
+  classic:
+    "uppercase tracking-[4px] text-base font-medium text-foreground/80 font-serif",
+  modern: "uppercase tracking-[3px] text-base font-medium text-primary/80",
+  elegant:
+    "uppercase tracking-[5px] text-sm font-light text-foreground/50",
+  academic:
+    "uppercase tracking-[3px] text-base font-semibold text-info/80",
+  minimal:
+    "uppercase tracking-[2px] text-sm font-normal text-muted-foreground",
+  bold: "uppercase tracking-[3px] text-lg font-black text-primary",
+};
+
+export const COURSE_TITLE_COLORS: Record<CertificateVariant, string> = {
+  classic: "text-warning",
+  modern: "text-primary",
+  elegant: "text-foreground/80",
+  academic: "text-info",
+  minimal: "text-foreground",
+  bold: "text-primary",
+};
+
+export const SERIF_VARIANTS: ReadonlySet<CertificateVariant> = new Set([
+  "classic",
+  "elegant",
+  "academic",
+]);

package/src/sections/CertificateViewer/types.ts

@@ -1,10 +1,18 @@
+/** Available certificate visual styles */
+export type CertificateVariant =
+  | "classic"
+  | "modern"
+  | "elegant"
+  | "academic"
+  | "minimal"
+  | "bold";
 
 /**
  * CertificateViewer section — a printable completion certificate.
  *
  * Displays a certificate with recipient details, course information,
- * signatory, and verification ID. Supports three visual variants:
- * classic, modern, and minimal.
+ * signatory, and verification ID. Supports six visual variants:
+ * classic, modern, elegant, academic, minimal, and bold.
  *
  * @example
  * <CertificateViewer
@@ -12,7 +20,7 @@
  *   courseTitle="Advanced React"
  *   completionDate="2025-03-01"
  *   organizationName="HydraLMS Academy"
- *   variant="modern"
+ *   variant="elegant"
  * />
  */
 export interface CertificateViewerProps {
@@ -30,14 +38,20 @@ export interface CertificateViewerProps {
   signatory?: { name: string; title: string };
   /** Unique certificate ID */
   certificateId?: string;
-  /** Certificate template variant */
-  variant?: "classic" | "modern" | "minimal";
+  /** Certificate template variant @default "classic" */
+  variant?: CertificateVariant;
   /** Whether to show print/download actions */
   showActions?: boolean;
   /** Called when print is triggered */
   onPrint?: () => void;
   /** Called when download is triggered */
   onDownload?: () => void;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */