2e111364a2
This commit includes: - Django backend with multi-tenancy (django-tenants) - React + TypeScript frontend with Vite - Platform administration API with role-based access control - Authentication system with token-based auth - Quick login dev tools for testing different user roles - CORS and CSRF configuration for local development - Docker development environment setup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface FeatureCardProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
iconColor?: string;
|
|
}
|
|
|
|
const FeatureCard: React.FC<FeatureCardProps> = ({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
iconColor = 'brand',
|
|
}) => {
|
|
const colorClasses: Record<string, string> = {
|
|
brand: 'bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400',
|
|
green: 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
|
|
purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
|
|
orange: 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400',
|
|
pink: 'bg-pink-100 dark:bg-pink-900/30 text-pink-600 dark:text-pink-400',
|
|
cyan: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400',
|
|
};
|
|
|
|
return (
|
|
<div className="group p-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-brand-300 dark:hover:border-brand-700 hover:shadow-lg hover:shadow-brand-600/5 transition-all duration-300">
|
|
<div className={`inline-flex p-3 rounded-xl ${colorClasses[iconColor]} mb-4`}>
|
|
<Icon className="h-6 w-6" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
|
|
{title}
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FeatureCard;
|