4e6467ffb0
- Build complete Next.js CRM for commercial real estate - Add authentication with JWT sessions and role-based access - Add GoHighLevel API integration for contacts, conversations, opportunities - Add AI-powered Control Center with tool calling - Add Setup page with onboarding checklist (/setup) - Add sidebar navigation with Setup menu item - Fix type errors in onboarding API, GHL services, and control center tools - Add Prisma schema with SQLite for local development - Add UI components with clay morphism design system Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
type ElevationLevel = 'flat' | 'subtle' | 'standard' | 'prominent';
|
|
|
|
interface ClayCardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
selected?: boolean;
|
|
/**
|
|
* Elevation level for visual hierarchy:
|
|
* - flat: No shadow (nested content)
|
|
* - subtle: Light shadow (section headers, secondary elements)
|
|
* - standard: Medium shadow (main content cards) - default
|
|
* - prominent: Strong shadow (emphasized content)
|
|
*/
|
|
elevation?: ElevationLevel;
|
|
}
|
|
|
|
const elevationClasses: Record<ElevationLevel, string> = {
|
|
flat: '',
|
|
subtle: 'shadow-[3px_3px_6px_#c5c9d1,-3px_-3px_6px_#ffffff]',
|
|
standard: 'shadow-[6px_6px_12px_#bfc3cc,-6px_-6px_12px_#ffffff]',
|
|
prominent: 'shadow-[8px_8px_16px_#b8bcc5,-8px_-8px_16px_#ffffff]',
|
|
};
|
|
|
|
export const ClayCard: React.FC<ClayCardProps> = ({
|
|
children,
|
|
className = '',
|
|
onClick,
|
|
selected,
|
|
elevation = 'standard'
|
|
}) => {
|
|
const elevationClass = selected
|
|
? 'shadow-[inset_4px_4px_8px_rgba(0,0,0,0.05),inset_-4px_-4px_8px_rgba(255,255,255,0.8)]'
|
|
: elevationClasses[elevation];
|
|
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={`
|
|
bg-background
|
|
rounded-3xl
|
|
p-6
|
|
border-2
|
|
${selected ? 'border-indigo-500' : 'border-transparent'}
|
|
${elevationClass}
|
|
transition-all
|
|
duration-300
|
|
${onClick ? 'cursor-pointer hover:transform hover:-translate-y-1' : ''}
|
|
${className}
|
|
`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|