@wealthx/shadcn 1.5.11 → 1.5.13

package/src/components/ui/resource-center/resource-carousel.tsx

@@ -0,0 +1,122 @@
+import React, { useRef, useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  GalleryHorizontal,
+  LayoutGrid,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import type { ResourceCarouselProps } from "./types";
+
+export function ResourceCarousel({
+  title,
+  items,
+  headerAction,
+  onViewModeChange,
+  className,
+}: ResourceCarouselProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [viewMode, setViewMode] = useState<"compact" | "grid">("compact");
+
+  function scrollLeft() {
+    scrollRef.current?.scrollBy({ left: -380, behavior: "smooth" });
+  }
+
+  function scrollRight() {
+    scrollRef.current?.scrollBy({ left: 380, behavior: "smooth" });
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      {/* Header row */}
+      {(title || headerAction) && (
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex flex-1 items-center gap-4 min-w-0">
+            {title && <h2 className="text-h3 text-foreground">{title}</h2>}
+            {headerAction && (
+              <div className="flex-1 flex justify-end">{headerAction}</div>
+            )}
+          </div>
+          <ToggleGroup
+            type="single"
+            variant="outline"
+            value={[viewMode]}
+            onValueChange={(v) => {
+              if (v.length > 0) {
+                const mode = v[0] as "compact" | "grid";
+                setViewMode(mode);
+                onViewModeChange?.(mode);
+              }
+            }}
+            aria-label="View mode"
+          >
+            <ToggleGroupItem value="compact" aria-label="Compact view">
+              <GalleryHorizontal className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="grid" aria-label="Grid view">
+              <LayoutGrid className="size-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      )}
+
+      {/* Content */}
+      {items.length === 0 ? (
+        <p className="py-8 text-center text-body-small text-muted-foreground">
+          No items available
+        </p>
+      ) : viewMode === "grid" ? (
+        <div className="grid grid-cols-4 gap-6 max-[1280px]:grid-cols-3 max-[900px]:grid-cols-2 max-[600px]:grid-cols-1">
+          {items.map((item, i) => (
+            <div key={i}>{item}</div>
+          ))}
+        </div>
+      ) : (
+        <div className="group/track relative">
+          <button
+            type="button"
+            onClick={scrollLeft}
+            aria-label="Scroll left"
+            className={cn(
+              "absolute left-0 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
+              "flex size-9 items-center justify-center",
+              "border border-border bg-background shadow-sm",
+              "opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
+              "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            <ChevronLeft className="size-4 text-foreground" />
+          </button>
+
+          <div
+            ref={scrollRef}
+            className="flex gap-4 overflow-x-auto scroll-smooth pb-2"
+            style={{ scrollbarWidth: "none" }}
+          >
+            {items.map((item, i) => (
+              <div key={i} className="w-[360px] shrink-0">
+                {item}
+              </div>
+            ))}
+          </div>
+
+          <button
+            type="button"
+            onClick={scrollRight}
+            aria-label="Scroll right"
+            className={cn(
+              "absolute right-0 top-1/2 z-10 translate-x-1/2 -translate-y-1/2",
+              "flex size-9 items-center justify-center",
+              "border border-border bg-background shadow-sm",
+              "opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
+              "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            <ChevronRight className="size-4 text-foreground" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/resource-center/resource-center-header.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import { Play } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { ResourceModal } from "./resource-modal";
+import type { ResourceCenterHeaderProps } from "./types";
+
+export function ResourceCenterHeader({
+  title,
+  description,
+  backgroundImageUrl,
+  backgroundVideoUrl,
+  watchVideoUrl,
+}: ResourceCenterHeaderProps) {
+  const [watchModalOpen, setWatchModalOpen] = useState(false);
+
+  const hasBackground = !!backgroundImageUrl || !!backgroundVideoUrl;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "relative flex min-h-[480px] w-full items-center overflow-hidden max-[900px]:min-h-[360px] max-[600px]:min-h-[260px]",
+        )}
+      >
+        {/* Background base */}
+        <div
+          className={cn(
+            "absolute inset-0 z-[0]",
+            hasBackground
+              ? "bg-foreground"
+              : "bg-gradient-to-br from-primary to-foreground",
+          )}
+        />
+
+        {/* Background image */}
+        {backgroundImageUrl && !backgroundVideoUrl && (
+          <img
+            src={backgroundImageUrl}
+            alt=""
+            aria-hidden="true"
+            className="absolute inset-0 h-full w-full object-cover z-[1]"
+          />
+        )}
+
+        {/* Background video */}
+        {backgroundVideoUrl && (
+          <video
+            className="absolute inset-0 h-full w-full object-cover z-[1]"
+            src={backgroundVideoUrl}
+            autoPlay
+            muted
+            loop
+            playsInline
+          />
+        )}
+
+        {/* Overlay tint */}
+        <div
+          className={cn(
+            "absolute inset-0 z-[2]",
+            hasBackground ? "bg-black/50" : "bg-black/20",
+          )}
+        />
+
+        {/* Content */}
+        <div className="relative z-[3] flex flex-col gap-4 px-8 py-12 md:px-16 max-w-3xl">
+          <h1 className="text-[56px] font-bold text-white leading-none max-[900px]:text-[40px] max-[600px]:text-[32px]">
+            {title}
+          </h1>
+          <p className="text-body-medium text-white/80 leading-relaxed">
+            {description}
+          </p>
+          {watchVideoUrl && (
+            <div className="pt-2">
+              <Button variant="default" onClick={() => setWatchModalOpen(true)}>
+                <Play className="mr-2 size-4" />
+                Watch Now
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {watchVideoUrl && (
+        <ResourceModal
+          open={watchModalOpen}
+          onClose={() => setWatchModalOpen(false)}
+          title={title}
+          videoUrl={watchVideoUrl}
+        />
+      )}
+    </>
+  );
+}

package/src/components/ui/resource-center/resource-email-editor-dialog.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type { ResourceEmailEditorDialogProps } from "./types";
+
+const EDITOR_CONTENT_TYPES = [
+  "Columns",
+  "Button",
+  "Divider",
+  "Heading",
+  "Paragraph",
+  "Image",
+  "Social",
+  "Menu",
+  "HTML",
+] as const;
+
+export function ResourceEmailEditorDialog({
+  open,
+  onClose,
+  onSave,
+  editorSlot,
+}: ResourceEmailEditorDialogProps) {
+  const [templateName, setTemplateName] = useState("");
+
+  function handleSave() {
+    onSave(templateName);
+  }
+
+  function handleClose() {
+    setTemplateName("");
+    onClose();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && handleClose()}>
+      <DialogContent
+        size="4xl"
+        className="flex flex-col gap-0 p-0 overflow-hidden h-[90vh]"
+      >
+        {/* Template name header */}
+        <div className="shrink-0 border-b border-border px-6 py-4">
+          <p className="text-label-small text-muted-foreground mb-1">
+            Template Name
+          </p>
+          <Input
+            placeholder="Enter template name"
+            value={templateName}
+            onChange={(e) => setTemplateName(e.target.value)}
+            className="border-none shadow-none px-0 text-body-medium h-auto focus-visible:ring-0 bg-transparent"
+          />
+        </div>
+
+        {/* Editor area */}
+        <div className="flex-1 overflow-hidden">
+          {editorSlot ?? <EditorPlaceholder />}
+        </div>
+
+        {/* Footer */}
+        <div className="shrink-0 flex items-center justify-between border-t border-border px-6 py-4">
+          <Button variant="outline" onClick={handleClose}>
+            Back
+          </Button>
+          <Button variant="default" onClick={handleSave}>
+            Save Email
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** Shown when no editorSlot is provided (e.g. in Storybook). */
+function EditorPlaceholder() {
+  return (
+    <div className="flex h-full">
+      {/* Canvas */}
+      <div className="flex flex-1 items-center justify-center bg-[#f4f4f4]">
+        <div className="max-w-[500px] w-full border-2 border-dashed border-[#9ecbf0] bg-[#e8f4ff] px-16 py-10 text-center">
+          <p className="text-body-small text-[#5c9fd8]">
+            No content here. Drag content from right.
+          </p>
+        </div>
+      </div>
+
+      {/* Content sidebar */}
+      <div className="w-[280px] shrink-0 flex flex-col border-l border-border bg-background">
+        <div className="flex border-b border-border">
+          {(["Content", "Blocks", "Body"] as const).map((tab, i) => (
+            <button
+              key={tab}
+              type="button"
+              className={cn(
+                "flex flex-1 flex-col items-center gap-1 py-3 text-caption",
+                i === 0
+                  ? "text-foreground border-b-2 border-foreground"
+                  : "text-muted-foreground",
+              )}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-3 gap-2 p-3">
+          {EDITOR_CONTENT_TYPES.map((item) => (
+            <div
+              key={item}
+              className="flex flex-col items-center gap-1.5 border border-border p-2 hover:bg-muted transition-colors cursor-grab"
+            >
+              <div className="size-6 bg-foreground/10 flex items-center justify-center">
+                <span className="text-[10px] text-foreground/40">▤</span>
+              </div>
+              <span className="text-[11px] text-foreground leading-none text-center">
+                {item}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-auto border-t border-border py-2.5 text-center">
+          <span className="text-caption text-muted-foreground">
+            ⚡ by Unlayer Editor
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/resource-center/resource-modal.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Download } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import type { ResourceModalProps } from "./types";
+
+export function ResourceModal({
+  open,
+  onClose,
+  title,
+  videoUrl,
+  tags,
+  attachments,
+}: ResourceModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent
+        size="2xl"
+        className="flex flex-col gap-4 p-0 overflow-hidden"
+      >
+        <DialogHeader className="px-6 pt-6 pb-0">
+          <DialogTitle className="text-h5">{title}</DialogTitle>
+          {tags && tags.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 pt-1">
+              {tags.map((tag) => (
+                <Badge key={tag} variant="secondary">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </DialogHeader>
+
+        {videoUrl && (
+          <div className="aspect-video w-full bg-foreground">
+            <iframe
+              src={videoUrl}
+              title={title}
+              className="h-full w-full"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            />
+          </div>
+        )}
+
+        {attachments && attachments.length > 0 && (
+          <div className="flex flex-col gap-2 px-6 pb-6">
+            <p className="text-body-small font-medium text-foreground">
+              Attachments
+            </p>
+            <div className="flex flex-col gap-1">
+              {attachments.map((attachment, i) => (
+                <a
+                  key={i}
+                  href={attachment.url}
+                  download
+                  className="flex items-center gap-2 text-body-small text-primary hover:underline"
+                >
+                  <Download className="size-3.5 shrink-0" />
+                  {attachment.name}
+                </a>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {(!attachments || attachments.length === 0) && <div className="pb-2" />}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/resource-center/types.ts

@@ -0,0 +1,81 @@
+import type React from "react";
+
+export interface ResourceModalAttachment {
+  name: string;
+  url: string;
+  type?: string;
+}
+
+export interface ResourceModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  videoUrl?: string;
+  tags?: string[];
+  attachments?: ResourceModalAttachment[];
+}
+
+export interface ResourceVideoItem {
+  id: string;
+  title: string;
+  thumbnailUrl?: string;
+  videoUrl?: string;
+  duration?: string;
+  tags?: string[];
+  attachments?: ResourceModalAttachment[];
+}
+
+export interface ResourceVideoCardProps {
+  video: ResourceVideoItem;
+}
+
+export interface ResourceEmailTemplateItem {
+  id: string;
+  title: string;
+  htmlContent?: string;
+  type?: "system" | "company";
+  isAddTemplate?: boolean;
+}
+
+export interface ResourceEmailTemplateCardProps {
+  template: ResourceEmailTemplateItem;
+  onClick?: () => void;
+}
+
+export interface ResourceEmailEditorDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (templateName: string) => void;
+  /** Inject the real email editor (e.g. Unlayer) from the consuming app. */
+  editorSlot?: React.ReactNode;
+}
+
+export interface ResourceDocumentItem {
+  id: string;
+  title: string;
+  thumbnailUrl?: string;
+  tags?: string[];
+  downloadUrl?: string;
+  pdfUrl?: string;
+}
+
+export interface ResourceDocumentCardProps {
+  document: ResourceDocumentItem;
+  onClick?: () => void;
+}
+
+export interface ResourceCarouselProps {
+  title?: React.ReactNode;
+  items: React.ReactNode[];
+  headerAction?: React.ReactNode;
+  onViewModeChange?: (mode: "compact" | "grid") => void;
+  className?: string;
+}
+
+export interface ResourceCenterHeaderProps {
+  title: string;
+  description: string;
+  backgroundImageUrl?: string;
+  backgroundVideoUrl?: string;
+  watchVideoUrl?: string;
+}