pxengine 0.1.9 → 0.1.11

package/src/molecules/creator-discovery/CreatorActionHeader/CreatorActionHeader.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CreatorActionHeaderMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+
+/**
+ * CreatorActionHeader
+ * A premium header for profile views with banner and sticky actions.
+ */
+export const CreatorActionHeader: React.FC<CreatorActionHeaderMolecule> = ({
+  bannerSrc,
+  avatarSrc,
+  name,
+  handle,
+  actions,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "relative w-full rounded-[40px] overflow-hidden bg-white border border-purple-50 shadow-sm",
+        className,
+      )}
+    >
+      {/* Banner */}
+      <div className="h-48 w-full bg-gradient-to-r from-purple-100 to-indigo-100 relative">
+        {bannerSrc && (
+          <img
+            src={bannerSrc}
+            className="h-full w-full object-cover"
+            alt="Banner"
+          />
+        )}
+        <div className="absolute inset-0 bg-black/5" />
+      </div>
+
+      {/* Profile Info & Actions */}
+      <div className="px-8 pb-8 flex flex-col md:flex-row md:items-end justify-between gap-6 -mt-12 relative z-10">
+        <div className="flex flex-col md:flex-row items-start md:items-end gap-6">
+          <div className="p-2 bg-white rounded-[32px] shadow-lg">
+            <Avatar className="h-32 w-32 rounded-[24px] border-4 border-white">
+              <AvatarImage src={avatarSrc} className="rounded-[24px]" />
+              <AvatarFallback className="rounded-[24px] bg-purple-50 text-purple-600 text-3xl font-bold">
+                {name.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+          </div>
+          <div className="mb-2">
+            <h1 className="text-3xl font-bold text-gray-900 tracking-tight">
+              {name}
+            </h1>
+            <p className="text-purple-600 font-medium tracking-wide">
+              @{handle}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 mb-2">
+          {actions.map((action, i) => (
+            <Button
+              key={i}
+              variant={(action.variant as any) || "default"}
+              className={cn(
+                "rounded-2xl px-6 h-11 font-bold transition-all",
+                action.variant === "default" &&
+                  "bg-purple-600 hover:bg-purple-700 shadow-md hover:shadow-purple-200",
+              )}
+            >
+              {action.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/molecules/creator-discovery/CreatorActionHeader/index.ts

@@ -0,0 +1 @@
+export * from "./CreatorActionHeader";

package/src/molecules/creator-discovery/CreatorGridCard/CreatorGridCard.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CreatorGridCardMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+import { Instagram, Youtube, Video, Twitter } from "lucide-react";
+
+const TikTokIcon = ({ className }: { className?: string }) => (
+  <Video className={className} /> // Placeholder
+);
+
+/**
+ * CreatorGridCard
+ * A visually rich card for discovery grids.
+ */
+export const CreatorGridCard: React.FC<CreatorGridCardMolecule> = ({
+  bannerSrc,
+  avatarSrc,
+  name,
+  handle,
+  metrics,
+  platforms,
+  className,
+}) => {
+  const getIcon = (p: string) => {
+    switch (p.toLowerCase()) {
+      case "instagram":
+        return Instagram;
+      case "tiktok":
+        return TikTokIcon;
+      case "youtube":
+        return Youtube;
+      case "twitter":
+        return Twitter;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Card
+      className={cn(
+        "group overflow-hidden rounded-[32px] border-none bg-white shadow-sm hover:shadow-xl transition-all duration-300",
+        className,
+      )}
+    >
+      <div className="relative h-32 w-full overflow-hidden">
+        {bannerSrc ? (
+          <img
+            src={bannerSrc}
+            alt={name}
+            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+          />
+        ) : (
+          <div className="h-full w-full bg-gradient-to-br from-purple-500 to-indigo-600" />
+        )}
+        <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/20 to-transparent" />
+      </div>
+
+      <CardContent className="relative pt-0 px-5 pb-6">
+        <div className="absolute -top-10 left-5">
+          <Avatar className="h-20 w-20 border-4 border-white shadow-lg ring-2 ring-purple-100">
+            <AvatarImage src={avatarSrc} alt={name} />
+            <AvatarFallback className="bg-purple-50 text-purple-700 font-bold text-xl">
+              {name.charAt(0)}
+            </AvatarFallback>
+          </Avatar>
+        </div>
+
+        <div className="mt-12 flex flex-col gap-1">
+          <h3 className="text-xl font-bold text-gray-900 truncate">{name}</h3>
+          <p className="text-sm text-muted-foreground font-medium">@{handle}</p>
+        </div>
+
+        <div className="mt-4 flex gap-2">
+          {platforms.map((p) => {
+            const Icon = getIcon(p);
+            return Icon ? (
+              <div
+                key={p}
+                className="p-1.5 rounded-lg bg-gray-50 text-gray-600 hover:text-purple-600 hover:bg-purple-50 transition-colors"
+              >
+                <Icon className="h-4 w-4" />
+              </div>
+            ) : null;
+          })}
+        </div>
+
+        <div className="mt-6 grid grid-cols-2 gap-4 border-t border-gray-50 pt-4">
+          {metrics.map((m, i) => (
+            <div key={i} className="flex flex-col">
+              <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                {m.label}
+              </span>
+              <span className="text-sm font-bold text-purple-700">
+                {m.value}
+              </span>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/molecules/creator-discovery/CreatorGridCard/index.ts

@@ -0,0 +1 @@
+export * from "./CreatorGridCard";

package/src/molecules/creator-discovery/CreatorProfileSummary/CreatorProfileSummary.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { AvatarAtom } from "../../../atoms/AvatarAtom";
+import { TextAtom } from "../../../atoms/TextAtom";
+import { CreatorProfileSummaryMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+
+/**
+ * CreatorProfileSummary
+ * A compact row showing avatar, name, and key metrics.
+ */
+export const CreatorProfileSummary: React.FC<CreatorProfileSummaryMolecule> = ({
+  avatarSrc,
+  name,
+  followerCount,
+  engagementRate,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-4 p-3 rounded-2xl bg-white/40 border border-purple-50 shadow-sm",
+        className,
+      )}
+    >
+      <AvatarAtom
+        id={`avatar-${name}`}
+        type="avatar"
+        src={avatarSrc}
+        fallback={name.charAt(0)}
+        className="w-12 h-12 ring-2 ring-purple-100"
+      />
+      <div className="flex flex-col flex-1">
+        <TextAtom
+          id={`name-${name}`}
+          type="text"
+          content={name}
+          variant="h4"
+          className="text-gray-900 leading-tight"
+        />
+        <div className="flex gap-3 mt-1">
+          {followerCount && (
+            <div className="flex flex-col">
+              <span className="text-[10px] uppercase tracking-wider text-muted-foreground font-bold">
+                Followers
+              </span>
+              <span className="text-xs font-semibold text-purple-700">
+                {followerCount}
+              </span>
+            </div>
+          )}
+          {engagementRate && (
+            <div className="flex flex-col border-l border-purple-100 pl-3">
+              <span className="text-[10px] uppercase tracking-wider text-muted-foreground font-bold">
+                Engagement
+              </span>
+              <span className="text-xs font-semibold text-indigo-600">
+                {engagementRate}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/molecules/creator-discovery/CreatorProfileSummary/index.ts

@@ -0,0 +1 @@
+export * from "./CreatorProfileSummary";

package/src/molecules/creator-discovery/GrowthChartCard/GrowthChartCard.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { ChartAtom } from "../../../atoms/ChartAtom";
+import { GrowthChartCardMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+import { TrendingUp } from "lucide-react";
+
+/**
+ * GrowthChartCard
+ * Visualizes time-series growth data for follower and engagement metrics.
+ */
+export const GrowthChartCard: React.FC<GrowthChartCardMolecule> = ({
+  title,
+  data,
+  config,
+  metric,
+  period,
+  className,
+}) => {
+  return (
+    <Card
+      className={cn(
+        "rounded-[32px] border-purple-50 shadow-sm overflow-hidden",
+        className,
+      )}
+    >
+      <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
+        <div>
+          <CardTitle className="text-lg font-bold text-gray-900">
+            {title}
+          </CardTitle>
+          <p className="text-xs text-muted-foreground">{period}</p>
+        </div>
+        <div className="bg-green-50 p-2 rounded-xl">
+          <TrendingUp className="w-4 h-4 text-green-600" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[200px] w-full mt-4">
+          <ChartAtom
+            type="chart"
+            id="growth-trend"
+            chartType="area"
+            data={data}
+            config={config}
+            XAxisKey="date"
+            showTooltip={true}
+            showLegend={false}
+          />
+        </div>
+        <div className="mt-4 flex items-center justify-between">
+          <span className="text-sm font-medium text-gray-500">{metric}</span>
+          <span className="text-sm font-bold text-purple-600">+12.5%</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/molecules/creator-discovery/GrowthChartCard/index.ts

@@ -0,0 +1 @@
+export * from "./GrowthChartCard";

package/src/molecules/creator-discovery/PlatformIconGroup/PlatformIconGroup.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { PlatformIconGroupMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+import { Instagram, Youtube, Twitter, Video } from "lucide-react";
+
+const TikTokIcon = ({ className }: { className?: string }) => (
+  <Video className={className} /> // Placeholder for TikTok
+);
+
+/**
+ * PlatformIconGroup
+ * Displays a horizontal list of active social platform icons.
+ */
+export const PlatformIconGroup: React.FC<PlatformIconGroupMolecule> = ({
+  platforms,
+  className,
+}) => {
+  const getIcon = (platform: string) => {
+    switch (platform) {
+      case "instagram":
+        return Instagram;
+      case "tiktok":
+        return TikTokIcon;
+      case "youtube":
+        return Youtube;
+      case "twitter":
+        return Twitter;
+      default:
+        return null;
+    }
+  };
+
+  const getColors = (platform: string) => {
+    switch (platform) {
+      case "instagram":
+        return "text-pink-600 bg-pink-50 hover:bg-pink-100 border-pink-100";
+      case "tiktok":
+        return "text-zinc-900 bg-zinc-100 hover:bg-zinc-200 border-zinc-200";
+      case "youtube":
+        return "text-red-600 bg-red-50 hover:bg-red-100 border-red-100";
+      case "twitter":
+        return "text-sky-500 bg-sky-50 hover:bg-sky-100 border-sky-100";
+      default:
+        return "text-gray-500 bg-gray-50 border-gray-100";
+    }
+  };
+
+  return (
+    <div className={cn("flex gap-2", className)}>
+      {platforms.map((p, i) => {
+        const Icon = getIcon(p.platform);
+        if (!Icon) return null;
+
+        return (
+          <a
+            key={i}
+            href={p.url || "#"}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={p.handle || p.platform}
+            className={cn(
+              "p-1.5 rounded-lg border transition-colors flex items-center justify-center",
+              getColors(p.platform),
+            )}
+          >
+            <Icon className="w-4 h-4" />
+          </a>
+        );
+      })}
+    </div>
+  );
+};

package/src/molecules/creator-discovery/PlatformIconGroup/index.ts

@@ -0,0 +1 @@
+export * from "./PlatformIconGroup";

package/src/molecules/creator-discovery/TopPostsGrid/TopPostsGrid.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { TopPostsGridMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+import { Heart, MessageCircle, BarChart3 } from "lucide-react";
+
+/**
+ * TopPostsGrid
+ * Displays a grid of the creator's best-performing content pieces.
+ */
+export const TopPostsGrid: React.FC<TopPostsGridMolecule> = ({
+  posts,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+        className,
+      )}
+    >
+      {posts.map((post, i) => (
+        <div
+          key={i}
+          className="group relative aspect-square overflow-hidden rounded-2xl bg-gray-100 border border-purple-50"
+        >
+          <img
+            src={post.thumbnail}
+            alt={`Post ${i}`}
+            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity p-4 flex flex-col justify-end">
+            <div className="flex items-center gap-4 text-white text-xs font-bold">
+              <span className="flex items-center gap-1">
+                <Heart className="w-3 h-3 fill-white" /> {post.likes}
+              </span>
+              <span className="flex items-center gap-1">
+                <MessageCircle className="w-3 h-3 fill-white" /> {post.comments}
+              </span>
+              <span className="flex items-center gap-1">
+                <BarChart3 className="w-3 h-3" /> {post.engagement}
+              </span>
+            </div>
+            <span className="text-[10px] text-gray-300 mt-2">{post.date}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/molecules/creator-discovery/TopPostsGrid/index.ts

@@ -0,0 +1 @@
+export * from "./TopPostsGrid";

package/src/molecules/creator-discovery/index.ts

@@ -1,3 +1,13 @@
 export * from "./CampaignSeedCard";
 export * from "./SearchSpecCard";
 export * from "./MCQCard";
+export * from "./PlatformIconGroup";
+export * from "./CreatorProfileSummary";
+export * from "./AudienceMetricCard";
+export * from "./CreatorGridCard";
+export * from "./BrandAffinityGroup";
+export * from "./ContentPreviewGallery";
+export * from "./AudienceDemographicsCard";
+export * from "./GrowthChartCard";
+export * from "./TopPostsGrid";
+export * from "./CreatorActionHeader";

package/src/molecules/generic/DataGrid/DataGrid.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { DataGridMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+
+/**
+ * DataGrid
+ * A premium table component with typed cells and responsive design.
+ */
+export const DataGrid: React.FC<DataGridMolecule> = ({
+  columns,
+  data,
+  pageSize = 10,
+  className,
+}) => {
+  const renderCell = (item: any, column: any) => {
+    const value = item[column.accessorKey];
+
+    switch (column.type) {
+      case "badge":
+        return (
+          <Badge
+            variant="secondary"
+            className="bg-purple-50 text-purple-700 border-purple-100"
+          >
+            {value}
+          </Badge>
+        );
+      case "avatar":
+        return (
+          <div className="flex items-center gap-2">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src={value} />
+              <AvatarFallback>{item.name?.charAt(0) || "U"}</AvatarFallback>
+            </Avatar>
+            {item.name && <span className="font-medium">{item.name}</span>}
+          </div>
+        );
+      case "date":
+        return (
+          <span className="text-muted-foreground">
+            {new Date(value).toLocaleDateString()}
+          </span>
+        );
+      case "number":
+        return (
+          <span className="font-mono font-medium">
+            {value.toLocaleString()}
+          </span>
+        );
+      default:
+        return <span>{value}</span>;
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded-3xl border border-purple-50 bg-white overflow-hidden shadow-sm",
+        className,
+      )}
+    >
+      <Table>
+        <TableHeader className="bg-gray-50/50">
+          <TableRow>
+            {columns.map((col) => (
+              <TableHead
+                key={col.accessorKey}
+                className="font-bold text-gray-900 h-12"
+              >
+                {col.header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.slice(0, pageSize).map((item, idx) => (
+            <TableRow
+              key={idx}
+              className="hover:bg-purple-50/30 transition-colors border-gray-50"
+            >
+              {columns.map((col) => (
+                <TableCell key={col.accessorKey} className="py-4">
+                  {renderCell(item, col)}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};

package/src/molecules/generic/DataGrid/index.ts

@@ -0,0 +1 @@
+export * from "./DataGrid";

package/src/molecules/generic/EmptyState/EmptyState.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { ButtonAtom } from "../../../atoms/ButtonAtom";
+import { TextAtom } from "../../../atoms/TextAtom";
+import { EmptyStateMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+import * as Icons from "lucide-react";
+
+/**
+ * EmptyState
+ * A placeholder for empty lists or results.
+ */
+export const EmptyState: React.FC<
+  EmptyStateMolecule & { onAction?: (action: string) => void }
+> = ({
+  title,
+  description,
+  icon,
+  actionLabel,
+  action,
+  className,
+  onAction,
+}) => {
+  const Icon = icon ? (Icons as any)[icon] : Icons.Search;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center p-12 text-center rounded-3xl bg-purple-50/30 border-2 border-dashed border-purple-100",
+        className,
+      )}
+    >
+      <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
+        <Icon className="w-8 h-8 text-purple-600" />
+      </div>
+      <TextAtom
+        id="empty-title"
+        type="text"
+        content={title}
+        variant="h3"
+        className="text-gray-900 mb-2"
+      />
+      <TextAtom
+        id="empty-desc"
+        type="text"
+        content={description}
+        variant="p"
+        className="text-muted-foreground mb-6 max-w-sm"
+      />
+      {actionLabel && action && (
+        <ButtonAtom
+          id="empty-action"
+          type="button"
+          label={actionLabel}
+          action={action}
+          variant="purple"
+          onAction={onAction}
+        />
+      )}
+    </div>
+  );
+};

package/src/molecules/generic/EmptyState/index.ts

@@ -0,0 +1 @@
+export * from "./EmptyState";