Initial commit from ux_aura_central
This commit is contained in:
DIVYANSH-675
106
components/Dashboard.tsx
Normal file
106
components/Dashboard.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { AppMetadata } from '../types';
|
||||
import { geminiService } from '../services/geminiService';
|
||||
|
||||
interface DashboardProps {
|
||||
metadata: AppMetadata;
|
||||
}
|
||||
|
||||
export const Dashboard: React.FC<DashboardProps> = ({ metadata }) => {
|
||||
const [greeting, setGreeting] = useState('Loading welcome message...');
|
||||
const [features, setFeatures] = useState<string[]>([]);
|
||||
const [isAiLoading, setIsAiLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const initializeApp = async () => {
|
||||
setIsAiLoading(true);
|
||||
try {
|
||||
const [aiGreeting, aiFeatures] = await Promise.all([
|
||||
geminiService.getAppContextualGreeting(metadata),
|
||||
geminiService.getSmartFeatureIdeas(metadata)
|
||||
]);
|
||||
setGreeting(aiGreeting);
|
||||
setFeatures(aiFeatures);
|
||||
} catch (error) {
|
||||
console.error("AI Initialization failed", error);
|
||||
setGreeting(`Welcome to ${metadata.name}`);
|
||||
} finally {
|
||||
setIsAiLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
initializeApp();
|
||||
}, [metadata]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<section className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-blue-50 rounded-full opacity-50"></div>
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-gray-500 text-sm font-semibold uppercase tracking-wider mb-2">Identity</h2>
|
||||
<h3 className="text-4xl font-extrabold text-gray-900 mb-4">{metadata.name}</h3>
|
||||
<p className="text-lg text-gray-600 leading-relaxed max-w-2xl">{metadata.description}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="md:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
|
||||
<h4 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<span className="p-1 bg-blue-100 rounded text-blue-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
Smart Assistant Greeting
|
||||
</h4>
|
||||
<div className={`p-4 bg-gray-50 rounded-xl border border-gray-100 italic text-gray-700 transition-opacity duration-500 ${isAiLoading ? 'opacity-50' : 'opacity-100'}`}>
|
||||
"{greeting}"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
|
||||
<h4 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<span className="p-1 bg-purple-100 rounded text-purple-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1a1 1 0 112 0v1a1 1 0 11-2 0zM13.536 14.95a1 1 0 010-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707a1 1 0 01-1.414 0zM6.464 14.95a1 1 0 01-1.414 0l-.707-.707a1 1 0 011.414-1.414l.707.707a1 1 0 010 1.414z" />
|
||||
</svg>
|
||||
</span>
|
||||
Dynamic Smart Features
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
{isAiLoading ? (
|
||||
[1, 2, 3].map(i => <li key={i} className="h-8 bg-gray-100 animate-pulse rounded"></li>)
|
||||
) : (
|
||||
features.map((feature, idx) => (
|
||||
<li key={idx} className="flex items-center gap-2 text-gray-700 bg-gray-50 p-2 rounded-lg border border-gray-100 hover:border-purple-200 hover:bg-purple-50 transition-colors cursor-default">
|
||||
<div className="w-2 h-2 rounded-full bg-purple-500"></div>
|
||||
{feature}
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-6">Core Capabilities</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: 'Data Tracking', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
|
||||
{ label: 'Cloud Sync', icon: 'M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z' },
|
||||
{ label: 'AI Optimization', icon: 'M13 10V3L4 14h7v7l9-11h-7z' },
|
||||
{ label: 'Privacy First', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z' },
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="group p-6 rounded-xl bg-gray-50 border border-gray-100 hover:bg-blue-600 hover:text-white transition-all duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mb-4 text-blue-600 group-hover:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={item.icon} />
|
||||
</svg>
|
||||
<h5 className="font-bold">{item.label}</h5>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user