AI Card

Loading...

Loading...

yarn add @camp/ai-card

import { Card, HeaderText, StyledCardHeader, StyledCardBody } from '@camp/ai-card';
 
<Card>
  <StyledCardHeader>
    <HeaderText>
      Card Header with a long title that should not wrap but should be truncated
    </HeaderText>
  </StyledCardHeader>
  <StyledCardBody>
    {' '}
    // You can optionally set `hasHeader` to `true` to remove the top padding on this body content.
    This is a basic card with a header and body content. The card component is flexible and can be
    used for various content types.
  </StyledCardBody>
</Card>;

import { Card, StyledCardHeader, StyledCardBody, HeaderText, ChartWrapper } from '@camp/ai-card';
 
<Card>
  <StyledCardHeader>
    <HeaderText>Chart Container</HeaderText>
  </StyledCardHeader>
  <StyledCardBody>
    <ChartWrapper height="200px">
      {' '}
      // Set a string value for `height` to set the height of the chart container (for use with
      `ResponsiveContainer`)
      <div>Chart content would go here</div>
    </ChartWrapper>
  </StyledCardBody>
</Card>;

import { BlockCard } from '@camp/ai-card';
 
// Example stock images
const sampleImages = [
  'https://picsum.photos/id/15/200/300',
  'https://picsum.photos/id/19/200/300',
  'https://picsum.photos/id/17/200/300',
];
 
function Example() {
  return (
    <div style={{ width: '600px' }}>
      <BlockCard
        type="automation" // Current available types are "automation" and "campaign_id"
        title="7-Day Welcome Drip Campaign"
        description="A 7-day email sequence to nurture new leads and increase engagement with your hardware store."
        isLoadingData={false}
        isLoadingImages={false}
        isOpen={false}
        images={sampleImages}
        maxImages={3}
        onClick={() => undefined}
      />
    </div>
  );
}

import { AiInsightCard } from '@camp/ai-card';
 
function Example() {
  const handleCtaClick = () => {
    console.log('CTA clicked');
  };
 
  return (
    <AiInsightCard
      type="optimization"
      title="Improve email engagement"
      description="Your recent campaigns show lower-than-average open rates. Consider adjusting send times."
      timestamp="2 hours ago"
      onCtaClick={handleCtaClick}
    />
  );
}

import { AiInsightCard } from '@camp/ai-card';
 
// Optimization type
<AiInsightCard
  type="optimization"
  title="Improve email engagement"
  timestamp="2 hours ago"
  onCtaClick={handleToggleAiSidebar}
  // Default CTA text is "Preview updates"
/>
 
// New opportunity type
<AiInsightCard
  type="new_opportunity"
  title="Expand to new audience segment"
  timestamp="1 day ago"
  onCtaClick={handleToggleAiSidebar}
  // Default CTA text is "Preview draft"
/>
 
// Growth milestone type
<AiInsightCard
  type="growth_milestone"
  title="Reached 10,000 subscribers"
  timestamp="3 days ago"
  onCtaClick={handleToggleAiSidebar}
  // Default CTA text is "View report"
/>
 
// Alert type (requires custom chipText)
<AiInsightCard
  type="alert"
  chipText="Delivery issue detected"
  title="Campaign delivery delays"
  timestamp="30 minutes ago"
  onCtaClick={handleToggleAiSidebar}
  // Default CTA text is "Review and fix"
/>

import { AiInsightCard } from '@camp/ai-card';
 
<AiInsightCard
  type="optimization"
  title="Improve email engagement"
  timestamp="2 hours ago"
  active={true}
  onCtaClick={handleToggleAiSidebar}
/>;

import { AiInsightCard } from '@camp/ai-card';
 
// New status (success color)
<AiInsightCard
  type="optimization"
  title="Improve email engagement"
  timestamp="2 hours ago"
  status="new"
  onCtaClick={handleToggleAiSidebar}
/>
 
// Other status (supportive color)
<AiInsightCard
  type="optimization"
  title="Previous recommendation"
  timestamp="1 week ago"
  status="viewed"
  onCtaClick={handleToggleAiSidebar}
/>

import { AiInsightCard } from '@camp/ai-card';
import { Chip } from '@camp/chip';
 
// Override default text
<AiInsightCard
  type="optimization"
  chipText="Custom optimization chip text"
  ctaText="Custom optimization CTA text"
  title="Urgent optimization needed"
  timestamp="5 minutes ago"
  onCtaClick={handleToggleAiSidebar}
/>
 
// Custom chip component
<AiInsightCard
  typeChip={<Chip color="violet">Custom Chip</Chip>}
  ctaText="View details"
  title="Custom insight type"
  timestamp="1 hour ago"
  onCtaClick={handleToggleAiSidebar}
/>

import { AiInsightCard, AiInsightCardRow } from '@camp/ai-card';
 
function Example() {
  return (
    <AiInsightCardRow>
      <AiInsightCard
        type="optimization"
        title="Improve email engagement"
        timestamp="2 hours ago"
        onCtaClick={() => handleToggleAiSidebar(someData)}
      />
      <AiInsightCard
        type="new_opportunity"
        title="Expand to new audience"
        timestamp="1 day ago"
        onCtaClick={() => handleToggleAiSidebar(someData)}
      />
      <AiInsightCard
        type="growth_milestone"
        title="Reached 10,000 subscribers"
        timestamp="3 days ago"
        onCtaClick={() => handleToggleAiSidebar(someData)}
      />
    </AiInsightCardRow>
  );
}

import { AiInsightCard, AiInsightCardRow } from '@camp/ai-card';
 
// Use zIndex when expanded content needs to appear above other elements
<AiInsightCardRow zIndex={10}>
  <AiInsightCard
    type="optimization"
    title="Insight with expanded content"
    timestamp="1 hour ago"
    expandedContent={<div>{/* Expanded content */}</div>}
    onCtaClick={handleToggleAiSidebar}
  />
</AiInsightCardRow>;

import { AiInsightCard, ChartWrapper } from '@camp/ai-card';
 
function Example() {
  const kpis = [
    { label: 'Open rate', value: '42%' },
    { label: 'Click rate', value: '3.2%' },
  ];
 
  return (
    <div style={{ maxWidth: '900px' }}>
      <AiInsightCard
        type="optimization"
        timestamp="8m ago"
        title="Featured: KPIs + description + clickable media region"
        description="Your recent performance data suggests focusing on send time and subject line testing."
        featured
        featuredLabel="High impact"
        kpis={kpis}
        mediaCtaClickable
        onCtaClick={() => {
          console.log('Preview updates');
        }}
        media={
          <ChartWrapper height="200px">
            <div>Chart / preview</div>
          </ChartWrapper>
        }
      />
    </div>
  );
}

import { BlockCard } from '@camp/ai-card';
 
const exampleIllustration = (
  <SpotIllustration size="medium" use={illustrations.cartEcommerceShopSpot} />
);
 
const defaultArgs = {
  isLoadingData: false,
  isLoadingImages: false,
  isOpen: false,
  images: sampleImages,
  maxImages: 3,
  onClick: () => undefined,
};
 
<BlockCard
  {...defaultArgs}
  type="automation"
  onClick={() => {}}
  title="Campaign with Metrics and Chip"
  description="This card displays metrics with a custom chip in the top left."
  renderChip={<AiChip type="default">Business goal</AiChip>}
  metric={200000}
  metricFormat={'currency' as const}
  currency="USD"
  metricUnitLabel="revenue"
  illustration={exampleIllustration}
/>

import { BlockCard } from '@camp/ai-card';
 
const defaultArgs = {
  isLoadingData: false,
  isLoadingImages: false,
  isOpen: false,
  images: sampleImages,
  maxImages: 3,
  onClick: () => undefined,
};
 
<BlockCard
  {...defaultArgs}
  type="automation"
  title="7-Day Welcome Drip Campaign"
  description="A 7-day email sequence to nurture new leads and increase engagement with your hardware store."
  metric={1234}
  metricFormat={'integer' as const}
  metricUnitLabel="opens"
  onClick={() => {}}
/>

import { BlockCard } from '@camp/ai-card';
 
const exampleIllustration = (
  <SpotIllustration size="medium" use={illustrations.cartEcommerceShopSpot} />
);
 
const defaultArgs = {
  isLoadingData: false,
  isLoadingImages: false,
  isOpen: false,
  images: sampleImages,
  maxImages: 3,
  onClick: () => undefined,
};
 
<BlockCard
  {...defaultArgs}
  type="automation"
  title="7-Day Welcome Drip Campaign"
  description="A 7-day email sequence to nurture new leads and increase engagement with your hardware store."
  metric={1234}
  metricFormat={'integer' as const}
  metricUnitLabel="opens"
  onClick={() => {}}
  illustration={exampleIllustration}
/>

import { BlockCard } from '@camp/ai-card';
 
const defaultArgs = {
  isLoadingData: false,
  isLoadingImages: false,
  isOpen: false,
  images: sampleImages,
  maxImages: 3,
  onClick: () => undefined,
};
 
<BlockCard
  {...defaultArgs}
  type="campaign_id"
  title="Summer Promotion Campaign"
  description="Launch a targeted email campaign for summer promotions, including special offers and seasonal content for our customer base."
  onClick={() => {}}
/>

import { BlockCard } from '@camp/ai-card';
 
const defaultArgs = {
  isLoadingData: false,
  isLoadingImages: false,
  isOpen: false,
  images: sampleImages,
  maxImages: 3,
  onClick: () => undefined,
};
 
<BlockCard
  {...defaultArgs}
  type="automation"
  title="Card Without Images"
  description="This card has no images to display in the preview stack."
  images={[]}
  onClick={() => {}}
/>

import { BlockCard } from '@camp/ai-card';
 
const defaultArgs = {
  isLoadingData: false,
  isLoadingImages: false,
  isOpen: false,
  images: sampleImages,
  maxImages: 3,
  onClick: () => undefined,
};
 
<BlockCard
  {...defaultArgs}
  type="automation"
  title="Card With Chip"
  description="No images provided, so the large image area is removed."
  images={[]}
  renderChip={<AiChip type="default">Automation</AiChip>}
  onClick={() => {}}
/>