admesh-ui-sdk
Version:
Beautiful, modern React components for displaying AI-powered product recommendations with citation-based conversation ads, auto-triggered widgets, floating chat, conversational interfaces, persistent sidebar, and built-in tracking
298 lines (277 loc) • 10.9 kB
JSX
// Custom Styling Example - AdMesh UI SDK
import React, { useState } from 'react';
import { AdMeshLayout, AdMeshProductCard, AdMeshCompareTable } from '@admesh/ui-sdk';
import '@admesh/ui-sdk/dist/ui-sdk.css';
// Sample data
const sampleRecommendations = [
{
title: "Figma",
reason: "Collaborative design platform that brings teams together. Create, prototype, and handoff designs with real-time collaboration.",
intent_match_score: 0.94,
admesh_link: "https://useadmesh.com/track?ad_id=figma&redirect=https://figma.com",
ad_id: "figma-premium",
product_id: "figma-design",
features: ["Real-time Collaboration", "Prototyping", "Design Systems", "Developer Handoff"],
has_free_tier: true,
pricing: "Free - $15/user/month",
trial_days: 30,
keywords: ["Design", "Prototyping", "Collaboration", "UI/UX"]
},
{
title: "Notion",
reason: "All-in-one workspace for teams. Combine notes, docs, wikis, and project management in one beautiful platform.",
intent_match_score: 0.91,
admesh_link: "https://useadmesh.com/track?ad_id=notion&redirect=https://notion.so",
ad_id: "notion-premium",
product_id: "notion-workspace",
features: ["AI Writing Assistant", "Team Collaboration", "Database Management", "Template Library"],
has_free_tier: true,
pricing: "Free - $10/user/month",
trial_days: 0,
keywords: ["Productivity", "Collaboration", "Database", "AI"]
}
];
// Custom theme configurations
const themes = {
default: {
mode: 'light',
accentColor: '#6366f1'
},
dark: {
mode: 'dark',
accentColor: '#8b5cf6'
},
green: {
mode: 'light',
accentColor: '#10b981'
},
orange: {
mode: 'light',
accentColor: '#f59e0b'
},
pink: {
mode: 'light',
accentColor: '#ec4899'
}
};
function CustomStylingExample() {
const [currentTheme, setCurrentTheme] = useState('default');
const [layoutType, setLayoutType] = useState('auto');
const [showMatchScores, setShowMatchScores] = useState(true);
const [showFeatures, setShowFeatures] = useState(true);
const [maxDisplayed, setMaxDisplayed] = useState(6);
const handleProductClick = (adId, admeshLink) => {
console.log('Product clicked:', { adId, admeshLink });
window.open(admeshLink, '_blank');
};
return (
<div className={`min-h-screen transition-all duration-500 ${
themes[currentTheme].mode === 'dark'
? 'bg-gray-900'
: 'bg-gradient-to-br from-gray-50 to-gray-100'
}`}>
{/* Control Panel */}
<div className={`border-b transition-colors duration-300 ${
themes[currentTheme].mode === 'dark'
? 'bg-gray-800 border-gray-700'
: 'bg-white border-gray-200 shadow-sm'
}`}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<h1 className={`text-2xl font-bold mb-6 ${
themes[currentTheme].mode === 'dark' ? 'text-white' : 'text-gray-900'
}`}>
AdMesh UI SDK - Custom Styling Demo
</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{/* Theme Selector */}
<div>
<label className={`block text-sm font-medium mb-2 ${
themes[currentTheme].mode === 'dark' ? 'text-gray-300' : 'text-gray-700'
}`}>
Theme
</label>
<select
value={currentTheme}
onChange={(e) => setCurrentTheme(e.target.value)}
className={`w-full px-3 py-2 rounded-lg border transition-colors ${
themes[currentTheme].mode === 'dark'
? 'bg-gray-700 border-gray-600 text-white'
: 'bg-white border-gray-300 text-gray-900'
} focus:ring-2 focus:ring-indigo-500 focus:border-transparent`}
>
<option value="default">Default (Indigo)</option>
<option value="dark">Dark Mode</option>
<option value="green">Green Theme</option>
<option value="orange">Orange Theme</option>
<option value="pink">Pink Theme</option>
</select>
</div>
{/* Layout Type */}
<div>
<label className={`block text-sm font-medium mb-2 ${
themes[currentTheme].mode === 'dark' ? 'text-gray-300' : 'text-gray-700'
}`}>
Layout
</label>
<select
value={layoutType}
onChange={(e) => setLayoutType(e.target.value)}
className={`w-full px-3 py-2 rounded-lg border transition-colors ${
themes[currentTheme].mode === 'dark'
? 'bg-gray-700 border-gray-600 text-white'
: 'bg-white border-gray-300 text-gray-900'
} focus:ring-2 focus:ring-indigo-500 focus:border-transparent`}
>
<option value="auto">Auto Layout</option>
<option value="cards">Cards Only</option>
<option value="table">Comparison Table</option>
</select>
</div>
{/* Max Displayed */}
<div>
<label className={`block text-sm font-medium mb-2 ${
themes[currentTheme].mode === 'dark' ? 'text-gray-300' : 'text-gray-700'
}`}>
Max Items ({maxDisplayed})
</label>
<input
type="range"
min="2"
max="12"
value={maxDisplayed}
onChange={(e) => setMaxDisplayed(parseInt(e.target.value))}
className="w-full"
/>
</div>
{/* Toggle Options */}
<div className="space-y-3">
<label className="flex items-center">
<input
type="checkbox"
checked={showMatchScores}
onChange={(e) => setShowMatchScores(e.target.checked)}
className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
<span className={`ml-2 text-sm ${
themes[currentTheme].mode === 'dark' ? 'text-gray-300' : 'text-gray-700'
}`}>
Show Match Scores
</span>
</label>
<label className="flex items-center">
<input
type="checkbox"
checked={showFeatures}
onChange={(e) => setShowFeatures(e.target.checked)}
className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
<span className={`ml-2 text-sm ${
themes[currentTheme].mode === 'dark' ? 'text-gray-300' : 'text-gray-700'
}`}>
Show Features
</span>
</label>
</div>
</div>
</div>
</div>
{/* Main Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Theme Preview */}
<div className={`rounded-xl p-6 mb-8 ${
themes[currentTheme].mode === 'dark'
? 'bg-gray-800 border border-gray-700'
: 'bg-white border border-gray-200 shadow-lg'
}`}>
<h2 className={`text-lg font-semibold mb-4 ${
themes[currentTheme].mode === 'dark' ? 'text-white' : 'text-gray-900'
}`}>
Current Theme: {currentTheme.charAt(0).toUpperCase() + currentTheme.slice(1)}
</h2>
<div className="flex items-center gap-4">
<div
className="w-8 h-8 rounded-full border-2 border-white shadow-lg"
style={{ backgroundColor: themes[currentTheme].accentColor }}
/>
<span className={`text-sm ${
themes[currentTheme].mode === 'dark' ? 'text-gray-300' : 'text-gray-600'
}`}>
Accent Color: {themes[currentTheme].accentColor}
</span>
<span className={`text-sm ${
themes[currentTheme].mode === 'dark' ? 'text-gray-300' : 'text-gray-600'
}`}>
Mode: {themes[currentTheme].mode}
</span>
</div>
</div>
{/* Render based on layout type */}
{layoutType === 'auto' && (
<AdMeshLayout
recommendations={sampleRecommendations}
theme={themes[currentTheme]}
maxDisplayed={maxDisplayed}
showMatchScores={showMatchScores}
showFeatures={showFeatures}
autoLayout={true}
onProductClick={handleProductClick}
/>
)}
{layoutType === 'cards' && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{sampleRecommendations.slice(0, maxDisplayed).map(rec => (
<AdMeshProductCard
key={rec.ad_id}
recommendation={rec}
theme={themes[currentTheme]}
showMatchScore={showMatchScores}
showBadges={true}
maxKeywords={3}
onClick={handleProductClick}
/>
))}
</div>
)}
{layoutType === 'table' && (
<AdMeshCompareTable
recommendations={sampleRecommendations.slice(0, Math.min(4, maxDisplayed))}
theme={themes[currentTheme]}
showMatchScores={showMatchScores}
showFeatures={showFeatures}
onProductClick={handleProductClick}
/>
)}
{/* Custom CSS Example */}
<div className={`mt-12 rounded-xl p-6 ${
themes[currentTheme].mode === 'dark'
? 'bg-gray-800 border border-gray-700'
: 'bg-white border border-gray-200 shadow-lg'
}`}>
<h3 className={`text-lg font-semibold mb-4 ${
themes[currentTheme].mode === 'dark' ? 'text-white' : 'text-gray-900'
}`}>
Custom CSS Override Example
</h3>
<pre className={`text-sm p-4 rounded-lg overflow-x-auto ${
themes[currentTheme].mode === 'dark'
? 'bg-gray-900 text-gray-300'
: 'bg-gray-100 text-gray-800'
}`}>
{`/* Custom CSS to override AdMesh styles */
.admesh-card {
border-radius: 16px !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}
.admesh-button--primary {
background: linear-gradient(135deg, ${themes[currentTheme].accentColor}, #8b5cf6) !important;
}
.admesh-badge--primary {
background-color: ${themes[currentTheme].accentColor} !important;
}`}
</pre>
</div>
</div>
</div>
);
}
export default CustomStylingExample;