diff --git a/package.json b/package.json new file mode 100644 index 0000000..ebee51b --- /dev/null +++ b/package.json @@ -0,0 +1,25 @@ +{ + "name": "react-dashboard", "version": "0.1.0", "private": true, + "dependencies": { + "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.11.47", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "lucide-react": "^0.263.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "typescript": "^4.7.4", "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", "not dead", "not op_mini all" + ], + "development": [ + "last 1 chrome version", "last 1 firefox version", "last 1 safari version" + ] + }, + "devDependencies": { + "autoprefixer": "^10.4.7", "postcss": "^8.4.14", "tailwindcss": "^3.1.6" + } +} \ No newline at end of file diff --git a/public/images/placeholder.webp b/public/images/placeholder.webp new file mode 100644 index 0000000..e69de29 diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..89c0ad6 --- /dev/null +++ b/src/App.css @@ -0,0 +1,33 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + padding: 20px; + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..88ce432 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import './App.css'; +import Dashboard from './components/Dashboard'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; \ No newline at end of file diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx new file mode 100644 index 0000000..7f9ec13 --- /dev/null +++ b/src/components/Dashboard.tsx @@ -0,0 +1,109 @@ +import React from 'react'; +import { TrendingUp, Users, Calendar, BarChart3 } from 'lucide-react'; + +const Dashboard: React.FC = () => { + return ( +
+ {/* Header */} +
+
+
+
+ Logo + Dashboard +
+
+ +
+
+
+
+ + {/* Main Content */} +
+ {/* Stats Grid */} +
+
+
+
+ +
+
+

Total Revenue

+

$45,231

+
+
+
+ +
+
+
+ +
+
+

Active Users

+

2,451

+
+
+
+ +
+
+
+ +
+
+

Events

+

12

+
+
+
+ +
+
+
+ +
+
+

Conversion

+

3.24%

+
+
+
+
+ + {/* Chart Section */} +
+
+

Analytics Overview

+
+

Chart placeholder

+
+
+ +
+

Recent Activity

+
+
+
+ User registered +
+
+
+ New order received +
+
+
+ Payment processed +
+
+
+
+
+
+ ); +}; + +export default Dashboard; \ No newline at end of file