Design Finish Stage 1
1. Finish 3 pages design
هذا الالتزام موجود في:
24
.gitignore
مباع
Normal file
24
.gitignore
مباع
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
23
eslint.config.js
Normal file
23
eslint.config.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs['recommended-latest'],
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
4922
package-lock.json
مولّد
Normal file
4922
package-lock.json
مولّد
Normal file
تم حذف اختلاف الملف لأن الملف كبير جداً
تحميل الاختلاف
35
package.json
Normal file
35
package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "my-app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.544.0",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-router-dom": "^7.9.1",
|
||||
"recharts": "^3.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.36.0",
|
||||
"@types/react": "^19.1.13",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@vitejs/plugin-react": "^5.0.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.36.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"globals": "^16.4.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.44.0",
|
||||
"vite": "^7.1.7"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
بعد العرض: | الارتفاع: | الحجم: 1.5 KiB |
31
src/App.css
Normal file
31
src/App.css
Normal file
@@ -0,0 +1,31 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
/* max-width: 1500px; */
|
||||
margin: 0 auto;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1299px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1300px) {
|
||||
.container {
|
||||
max-width: 1300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.container {
|
||||
max-width: 1824px;
|
||||
}
|
||||
}
|
||||
32
src/App.tsx
Normal file
32
src/App.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import './App.css'
|
||||
import Header from './components/shared/Header'
|
||||
import Footer from './components/shared/Footer'
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import Portfolio from './pages/Portfolio';
|
||||
|
||||
import Settings from './pages/Settings';
|
||||
import Strategy from './pages/Strategy';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
|
||||
<div className="min-h-screen bg-white">
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/portfolio" element={<Portfolio />} />
|
||||
<Route path="/strategy" element={<Strategy />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
</Routes>
|
||||
<Footer />
|
||||
</div>
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
|
||||
|
||||
ثنائية
src/assets/icons/Vector.png
Normal file
ثنائية
src/assets/icons/Vector.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 801 B |
ثنائية
src/assets/icons/Vector2.png
Normal file
ثنائية
src/assets/icons/Vector2.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 801 B |
ثنائية
src/assets/icons/gpt.png
Normal file
ثنائية
src/assets/icons/gpt.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 1.5 KiB |
ثنائية
src/assets/icons/preplextiy.png
Normal file
ثنائية
src/assets/icons/preplextiy.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 1.0 KiB |
ثنائية
src/assets/logo.png
Normal file
ثنائية
src/assets/logo.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 4.0 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
بعد العرض: | الارتفاع: | الحجم: 4.0 KiB |
137
src/components/CampaignTracker.tsx
Normal file
137
src/components/CampaignTracker.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
|
||||
|
||||
const CampaignTracker = () => {
|
||||
const progressSections = [
|
||||
{
|
||||
title: "Social",
|
||||
current: 42,
|
||||
total: 80,
|
||||
color: "bg-blue-500",
|
||||
bgColor: "bg-blue-100",
|
||||
icons: [
|
||||
{ name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" },
|
||||
{ name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" },
|
||||
{ name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" },
|
||||
{ name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" },
|
||||
{ name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Citation",
|
||||
current: 30,
|
||||
total: 80,
|
||||
color: "bg-blue-500",
|
||||
bgColor: "bg-blue-100",
|
||||
icons: [
|
||||
{ name: "Service", color: "bg-blue-400", text: "◐", textColor: "text-white" },
|
||||
{ name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
|
||||
{ name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
|
||||
{ name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" },
|
||||
{ name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Web 2.0",
|
||||
current: 15,
|
||||
total: 70,
|
||||
color: "bg-green-500",
|
||||
bgColor: "bg-green-100",
|
||||
icons: [
|
||||
{ name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
|
||||
{ name: "Fox", color: "bg-red-600", text: "FOX", textColor: "text-white", fontSize: "text-xs" },
|
||||
{ name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
|
||||
{ name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" },
|
||||
{ name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Multimedia",
|
||||
current: 5,
|
||||
total: 15,
|
||||
color: "bg-yellow-500",
|
||||
bgColor: "bg-yellow-100",
|
||||
icons: [
|
||||
{ name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
|
||||
{ name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" },
|
||||
{ name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
|
||||
{ name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" },
|
||||
{ name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Crowd",
|
||||
current: 5,
|
||||
total: 15,
|
||||
color: "bg-red-500",
|
||||
bgColor: "bg-red-100",
|
||||
icons: [
|
||||
{ name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
|
||||
{ name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" },
|
||||
{ name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
|
||||
{ name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" },
|
||||
{ name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-3 bg-white">
|
||||
|
||||
|
||||
{/* Status Cards */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-8">
|
||||
<div className="bg-gray-50 rounded-lg p-1 border">
|
||||
<div className="text-sm text-gray-600 mb-1">Indexed:</div>
|
||||
<div className="text-sm font-bold text-gray-900">77%</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-lg p-1 border">
|
||||
<div className="text-sm text-gray-600 mb-1">Interlinked:</div>
|
||||
<div className="text-sm font-bold text-gray-900">5%</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-lg p-1 border">
|
||||
<div className="text-sm text-gray-600 mb-1">Publishing:</div>
|
||||
<div className="text-sm font-bold text-gray-900">Locked</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Sections */}
|
||||
<div className="space-y-6">
|
||||
{progressSections.map((section, index) => {
|
||||
const progressPercentage = (section.current / section.total) * 100
|
||||
|
||||
return (
|
||||
<div key={index} className="space-y-1">
|
||||
{/* Section Title and Progress */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-gray-900">
|
||||
{section.title}: {section.current}/{section.total}
|
||||
</h3>
|
||||
<div className="flex gap-2">
|
||||
{section.icons.map((icon, iconIndex) => (
|
||||
<div
|
||||
key={iconIndex}
|
||||
className={`w-6 h-6 rounded-lg ${icon.color} ${icon.textColor} flex items-center justify-center font-bold ${icon.fontSize || "text-sm"}`}
|
||||
title={icon.name}
|
||||
>
|
||||
{icon.text}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className={`w-full h-3 ${section.bgColor} rounded-full overflow-hidden`}>
|
||||
<div
|
||||
className={`h-full ${section.color} rounded-full transition-all duration-500 ease-out`}
|
||||
style={{ width: `${progressPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CampaignTracker
|
||||
326
src/components/DashboardGrid.tsx
Normal file
326
src/components/DashboardGrid.tsx
Normal file
@@ -0,0 +1,326 @@
|
||||
// DashboardGrid.tsx
|
||||
|
||||
import { useState } from "react";
|
||||
import MultiRingCircularProgress from "./MultiRingCircularProgress";
|
||||
import CampaignTracker from "./CampaignTracker";
|
||||
import {
|
||||
ArrowLeft, Menu, FileText,
|
||||
TrendingUp,
|
||||
Info,
|
||||
ArrowUp,
|
||||
Link,
|
||||
ChevronDown
|
||||
} from "lucide-react";
|
||||
import MetricCard from "./shared/MetricCard";
|
||||
import UrlDropdown from "./shared/UrlDropdown";
|
||||
import HeaderPage from "./shared/HeaderPage";
|
||||
|
||||
const CARDS = [
|
||||
{
|
||||
title: "Richard Bower CPA",
|
||||
percent: 99,
|
||||
rings: [
|
||||
{ color: "#4285F4", value: 99 }, // blue
|
||||
{ color: "#34A853", value: 80 }, // green
|
||||
{ color: "#FBBC05", value: 60 }, // yellow
|
||||
{ color: "#EA4335", value: 40 } // red
|
||||
],
|
||||
tags: [
|
||||
{ text: "G 14", extra: "+1", color: "#4285F4" },
|
||||
{ text: "Ai" },
|
||||
{ text: "LLM" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "CPA Los Angeles",
|
||||
percent: 24,
|
||||
rings: [
|
||||
{ color: "#4285F4", value: 24 },
|
||||
{ color: "#34A853", value: 18 },
|
||||
{ color: "#FBBC05", value: 14 },
|
||||
{ color: "#EA4335", value: 8 }
|
||||
],
|
||||
tags: [
|
||||
{ text: "G 14", extra: "-2", color: "#4285F4" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "CPA Los Angeles4",
|
||||
percent: 45,
|
||||
rings: [
|
||||
{ color: "#4285F4", value: 45 },
|
||||
{ color: "#34A853", value: 42 },
|
||||
{ color: "#FBBC05", value: 32 },
|
||||
{ color: "#EA4335", value: 24 }
|
||||
],
|
||||
tags: [
|
||||
{ text: "G 14", extra: "-2", color: "#4285F4" },
|
||||
{ text: "+7" },
|
||||
{ text: "Ai" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Best CPA Los Angeles5",
|
||||
percent: 89,
|
||||
rings: [
|
||||
{ color: "#4285F4", value: 89 },
|
||||
{ color: "#34A853", value: 80 },
|
||||
{ color: "#FBBC05", value: 72 },
|
||||
{ color: "#EA4335", value: 57 }
|
||||
],
|
||||
tags: [
|
||||
{ text: "G 14", extra: "+1", color: "#4285F4" },
|
||||
{ text: "+7" },
|
||||
{ text: "Ai" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "CPA Hollywood",
|
||||
percent: 100,
|
||||
rings: [
|
||||
{ color: "#4285F4", value: 100 },
|
||||
{ color: "#34A853", value: 100 },
|
||||
{ color: "#FBBC05", value: 100 },
|
||||
{ color: "#EA4335", value: 100 }
|
||||
],
|
||||
tags: [
|
||||
{ text: "G 14", extra: "+1", color: "#4285F4" },
|
||||
{ text: "+7" },
|
||||
{ text: "Ai" }
|
||||
],
|
||||
badge: "Content Unlocked",
|
||||
actionLink: "View Published Content "
|
||||
},
|
||||
{
|
||||
title: "Best CPA Los Angeles21",
|
||||
percent: 89,
|
||||
rings: [
|
||||
{ color: "#cccccc", value: 89 },
|
||||
{ color: "#cccccc", value: 80 },
|
||||
{ color: "#cccccc", value: 72 },
|
||||
{ color: "#cccccc", value: 57 }
|
||||
],
|
||||
tags: [
|
||||
{ text: "G 14", extra: "+1", color: "#cccccc" },
|
||||
{ text: "+7", color: "#cccccc" },
|
||||
{ text: "Ai", color: "#cccccc" }
|
||||
],
|
||||
faded: true,
|
||||
paused: true
|
||||
}
|
||||
];
|
||||
|
||||
const pillClass = (val: string) =>
|
||||
val === 'Done' ? 'bg-green-100 text-green-700 font-bold'
|
||||
: val === 'In Progress' ? 'bg-blue-100 text-blue-700 font-bold'
|
||||
: 'bg-gray-100 text-gray-700 font-bold';
|
||||
|
||||
export default function DashboardGrid() {
|
||||
const [selectedCampaigns, setSelectedCampaigns] = useState<string[]>([])
|
||||
const [tableView, setTableView] = useState<string | null>(null)
|
||||
const [activeCard, setActiveCard] = useState<string | null>(null)
|
||||
|
||||
const handleCardClick = (campaignName: string, paused: boolean) => {
|
||||
if (paused) return;
|
||||
|
||||
if (!selectedCampaigns.includes(campaignName)) {
|
||||
setSelectedCampaigns(prev => [...prev, campaignName])
|
||||
}
|
||||
setActiveCard(campaignName)
|
||||
}
|
||||
|
||||
const handleBackClick = () => {
|
||||
if (tableView) {
|
||||
setTableView(null)
|
||||
} else if (activeCard) {
|
||||
// Remove only the active card from selected campaigns
|
||||
setSelectedCampaigns(prev => prev.filter(card => card !== activeCard))
|
||||
setActiveCard(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMenuClick = (campaignName: string) => {
|
||||
setTableView(campaignName)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderPage title="Dashboard" />
|
||||
|
||||
{/* Main content area with new metric cards */}
|
||||
<main className="pb-4 px-2 border-collapse border-2 mb-6 rounded-lg">
|
||||
<div className="flex flex-wrap gap-4 lg:flex-row flex-col">
|
||||
<MetricCard
|
||||
icon={FileText}
|
||||
value="5"
|
||||
label="Active Keywords"
|
||||
// tooltipText="Total Keywords"
|
||||
valueChange="10"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Link}
|
||||
value="112"
|
||||
label="Total Backlinks"
|
||||
// tooltipText="Total Backlinks"
|
||||
valueChange="10"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={TrendingUp}
|
||||
value="34%"
|
||||
valueChange="+6%"
|
||||
label="Portfolio Performance"
|
||||
tooltipText="The % of keywords with top rankings, including page 1, map pack, and Ai."
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7">
|
||||
{CARDS.map((card, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`bg-white rounded-2xl shadow-lg border transition-all duration-700 ease-in-out transform
|
||||
hover:shadow-2xl hover:scale-105 cursor-pointer
|
||||
${card.faded ? "opacity-60" : ""}
|
||||
${activeCard === card.title ? "cursor-default" : "cursor-pointer"}
|
||||
${selectedCampaigns.includes(card.title)
|
||||
? 'shadow-2xl scale-[1.02] '
|
||||
: 'hover:scale-105 hover:shadow-xl'
|
||||
}`}
|
||||
onClick={() => handleCardClick(card.title, card.paused)}
|
||||
style={{
|
||||
transform: selectedCampaigns.includes(card.title)
|
||||
? 'translateY(-5px) scale(1.02)'
|
||||
: 'translateY(0px) scale(1)'
|
||||
}}
|
||||
>
|
||||
{selectedCampaigns.includes(card.title) && activeCard === card.title ? (
|
||||
<div className="py-3 flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-gray-200 pb-2">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={handleBackClick}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-all duration-300 hover:scale-110"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5 text-gray-600" />
|
||||
</button>
|
||||
<h1 className="text-xl font-bold text-gray-900">{card.title}</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleMenuClick(card.title)}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-all duration-300 hover:scale-110"
|
||||
title="View table"
|
||||
>
|
||||
<Menu className="w-5 h-5 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content with smooth transitions */}
|
||||
<div className={`transition-all duration-700 ease-in-out ${tableView === card.title
|
||||
? 'opacity-0 translate-y-4 pointer-events-none'
|
||||
: 'opacity-100 translate-y-0'
|
||||
}`}
|
||||
style={{ display: tableView !== card.title ? 'block' : 'none' }}>
|
||||
<CampaignTracker />
|
||||
</div>
|
||||
|
||||
{/* Table View with smooth transitions */}
|
||||
<div className={`transition-all duration-700 ease-in-out ${tableView === card.title
|
||||
? 'opacity-100 translate-y-0'
|
||||
: 'opacity-0 translate-y-4 pointer-events-none'
|
||||
}`}
|
||||
style={{ display: tableView === card.title ? 'block' : 'none' }}
|
||||
>
|
||||
<div className="custom-scrollbar-table">
|
||||
<table className="w-full rounded-lg ">
|
||||
<tbody>
|
||||
{[
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' },
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' },
|
||||
{ icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' },
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' },
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' },
|
||||
{ icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' },
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' },
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' },
|
||||
{ icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' },
|
||||
{ icon: '🅿️', title: 'Pinterest DR 97 DA 95 Traffic 3,989,220' },
|
||||
{ icon: '📄', title: 'Questions to ask your CPA Substack DR 97 DA 95' }
|
||||
].map((row, rIdx) => (
|
||||
<tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
|
||||
<td className='py-3 pl-2 text-center w-10'>{row.icon}</td>
|
||||
<td className='py-3 px-1 min-w-[300px] text-[#4285F4] hover:text-[#1e40af] cursor-pointer font-medium' title={row.title}>
|
||||
<div className='truncate max-w-[300px] text-sm underline'>{row.title}</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div className="text-blue-600 text-sm cursor-pointer hover:underline transition-all duration-300 hover:text-blue-800 text-center pt-3" style={{ boxShadow: '#dadada 0px -6px 10px' }}>View All</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
) : (
|
||||
// Card preview state
|
||||
<div className="p-5 flex flex-col items-center">
|
||||
{card.badge && (
|
||||
<div className="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold transform rotate-12 shadow-lg">
|
||||
{card.badge}
|
||||
</div>
|
||||
)}
|
||||
<MultiRingCircularProgress card={card} />
|
||||
<div className={`mt-4 font-bold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
|
||||
{card.title}
|
||||
</div>
|
||||
<div className="mt-3 flex flex-row gap-2 flex-wrap justify-center">
|
||||
{card.tags.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={`rounded-full border-2 bg-white px-3 py-1 flex items-center text-sm font-medium transition-all duration-300 hover:scale-105 ${card.faded
|
||||
? "text-gray-400 border-gray-300"
|
||||
: "text-gray-700 border-gray-200 hover:border-blue-300"
|
||||
}`}
|
||||
style={tag.color ? { color: tag.color, borderColor: tag.color } : {}}
|
||||
>
|
||||
{tag.text}
|
||||
{tag.extra && (
|
||||
<span className={`ml-1 text-xs ${card.faded ? "text-gray-400" : "text-green-600 font-bold"
|
||||
}`}>
|
||||
{tag.extra}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{card.actionLink && (
|
||||
<div className="mt-3 text-blue-600 text-sm cursor-pointer hover:underline transition-all duration-300 hover:text-blue-800">
|
||||
{card.actionLink}
|
||||
</div>
|
||||
)}
|
||||
{card.paused && (
|
||||
<div className="mt-3 text-center">
|
||||
<div className="text-gray-400 text-sm">Campaign paused</div>
|
||||
<button className="text-blue-600 text-sm hover:underline transition-all duration-300 hover:text-blue-800">Resume</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// This line to make just try to open one card
|
||||
// 106
|
||||
// 112
|
||||
// 118-121
|
||||
// 149
|
||||
377
src/components/IntegratedStrategy.tsx
Normal file
377
src/components/IntegratedStrategy.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import './shared/scrollableComponent.css';
|
||||
|
||||
|
||||
interface TaskItem {
|
||||
id: string
|
||||
platform: string
|
||||
icon: string
|
||||
title: string
|
||||
metrics?: string
|
||||
isLink?: boolean
|
||||
}
|
||||
|
||||
interface Category {
|
||||
name: string
|
||||
count: number
|
||||
color: string
|
||||
items: TaskItem[]
|
||||
}
|
||||
|
||||
interface Column {
|
||||
title: string
|
||||
count: number
|
||||
date?: string
|
||||
categories: Category[]
|
||||
}
|
||||
|
||||
const IntegratedStrategy = () => {
|
||||
const columns: Column[] = [
|
||||
{
|
||||
title: "Built",
|
||||
count: 104,
|
||||
categories: [
|
||||
{
|
||||
name: "Social",
|
||||
count: 4,
|
||||
color: "bg-blue-100",
|
||||
items: [
|
||||
{
|
||||
id: "1",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
isLink: true,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
platform: "Substack",
|
||||
icon: "🟠",
|
||||
title: "Substack DR 97 DA 95",
|
||||
isLink: true,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
platform: "PayPal",
|
||||
icon: "🅿️",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
isLink: true,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
platform: "PayPal",
|
||||
icon: "🅿️",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
isLink: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Citation",
|
||||
count: 2,
|
||||
color: "bg-blue-100",
|
||||
items: [
|
||||
{
|
||||
id: "5",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
isLink: true,
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
platform: "Substack",
|
||||
icon: "🟠",
|
||||
title: "Substack DR 97 DA 95 Traffic",
|
||||
isLink: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Web 2.0",
|
||||
count: 3,
|
||||
color: "bg-green-100",
|
||||
items: [
|
||||
{
|
||||
id: "7",
|
||||
platform: "Apple Music",
|
||||
icon: "🎵",
|
||||
title: "Apple Music DR 97 DA 95 Traffic",
|
||||
isLink: true,
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
isLink: true,
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
platform: "Pinterest",
|
||||
icon: "⚫",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
isLink: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Multimedia",
|
||||
count: 1,
|
||||
color: "bg-yellow-100",
|
||||
items: [
|
||||
{
|
||||
id: "10",
|
||||
platform: "Pinterest",
|
||||
icon: "⚫",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
isLink: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "In Progress",
|
||||
count: 14,
|
||||
date: "23 Oct 2025",
|
||||
categories: [
|
||||
{
|
||||
name: "Social",
|
||||
count: 3,
|
||||
color: "bg-blue-100",
|
||||
items: [
|
||||
{
|
||||
id: "11",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
platform: "Substack",
|
||||
icon: "🟠",
|
||||
title: "Substack DR 97 DA 95",
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
platform: "PayPal",
|
||||
icon: "🅿️",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Citation",
|
||||
count: 5,
|
||||
color: "bg-blue-100",
|
||||
items: [
|
||||
{
|
||||
id: "14",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
{
|
||||
id: "16",
|
||||
platform: "Substack",
|
||||
icon: "🟠",
|
||||
title: "Substack DR 97 DA 95 Traffic",
|
||||
},
|
||||
{
|
||||
id: "17",
|
||||
platform: "PayPal",
|
||||
icon: "🅿️",
|
||||
title: "Paypal DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
{
|
||||
id: "18",
|
||||
platform: "Apple Music",
|
||||
icon: "🎵",
|
||||
title: "Apple Music DR 97 DA 95 Traffic",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Web 2.0",
|
||||
count: 5,
|
||||
color: "bg-green-100",
|
||||
items: [
|
||||
{
|
||||
id: "19",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
{
|
||||
id: "20",
|
||||
platform: "Questions",
|
||||
icon: "⚫",
|
||||
title: "Questions to ask your CPA Published o...",
|
||||
},
|
||||
{
|
||||
id: "21",
|
||||
platform: "PayPal",
|
||||
icon: "🅿️",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Coming up",
|
||||
count: 10,
|
||||
date: "23 Nov 2025",
|
||||
categories: [
|
||||
{
|
||||
name: "Social",
|
||||
count: 5,
|
||||
color: "bg-blue-100",
|
||||
items: [
|
||||
{
|
||||
id: "22",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
{
|
||||
id: "23",
|
||||
platform: "Substack",
|
||||
icon: "🟠",
|
||||
title: "Substack DR 97 DA 95",
|
||||
},
|
||||
{
|
||||
id: "24",
|
||||
platform: "PayPal",
|
||||
icon: "🅿️",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
},
|
||||
{
|
||||
id: "25",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
{
|
||||
id: "26",
|
||||
platform: "PayPal",
|
||||
icon: "🅿️",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Citation",
|
||||
count: 5,
|
||||
color: "bg-blue-100",
|
||||
items: [
|
||||
{
|
||||
id: "27",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
{
|
||||
id: "28",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
{
|
||||
id: "29",
|
||||
platform: "Substack",
|
||||
icon: "🟠",
|
||||
title: "Substack DR 97 DA 95 Traffic",
|
||||
},
|
||||
{
|
||||
id: "30",
|
||||
platform: "PayPal",
|
||||
icon: "🅿️",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
},
|
||||
{
|
||||
id: "31",
|
||||
platform: "Apple Music",
|
||||
icon: "🎵",
|
||||
title: "Apple Music DR 97 DA 95 Traffic",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Web 2.0",
|
||||
count: 2,
|
||||
color: "bg-green-100",
|
||||
items: [
|
||||
{
|
||||
id: "32",
|
||||
platform: "Pinterest",
|
||||
icon: "🅿️",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const CategorySection = ({ category }: { category: Category }) => (
|
||||
<div className="mb-4">
|
||||
<div className={`${category.color} px-3 py-2 border-l-4 border-blue-500`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<span className="font-medium text-gray-700">{category.name}</span>
|
||||
<span className="text-gray-600 text-sm">{category.count}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white border border-t-0 rounded-b-md">
|
||||
{category.items.map((item) => (
|
||||
<div key={item.id} className="px-3 py-2 border-b border-gray-100 last:border-b-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg mt-0.5">{item.icon}</span>
|
||||
<span
|
||||
className={`text-sm text-blue-600 hover:text-blue-800 ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
|
||||
>
|
||||
{item.title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="p-2 bg-gray-50">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{columns.map((column, index) => (
|
||||
<div key={index} className="bg-white rounded-lg shadow-sm border">
|
||||
<div className="border-b border-gray-200 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-lg font-semibold text-gray-900">{column.title}</h2>
|
||||
<span className="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-sm font-medium">
|
||||
{column.count}
|
||||
</span>
|
||||
</div>
|
||||
{column.date && <span className="text-sm text-gray-500">{column.date}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className=' custom-scrollbar'>
|
||||
{column.categories.map((category, categoryIndex) => (
|
||||
<CategorySection key={categoryIndex} category={category} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default IntegratedStrategy
|
||||
62
src/components/MultiRingCircularProgress.tsx
Normal file
62
src/components/MultiRingCircularProgress.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import { PieChart, Pie, Cell } from "recharts";
|
||||
|
||||
interface Ring {
|
||||
color: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
interface Card {
|
||||
percent: number;
|
||||
rings: Ring[];
|
||||
}
|
||||
|
||||
interface MultiRingCircularProgressProps {
|
||||
card: Card;
|
||||
}
|
||||
|
||||
export default function MultiRingCircularProgress({ card }: MultiRingCircularProgressProps) {
|
||||
const { percent, rings } = card;
|
||||
|
||||
// Create ring data with proper outer and inner radius calculations
|
||||
const ringData = rings.map((ring, index) => ({
|
||||
...ring,
|
||||
outerRadius: 120 - (index * 18), // Decrease by 18px for each ring
|
||||
innerRadius: 105 - (index * 18), // Decrease by 18px for each ring
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center pointer-events-none hover:scale-115 transition-all duration-300">
|
||||
<PieChart width={400} height={400}>
|
||||
{ringData.map((ring, index) => (
|
||||
<Pie
|
||||
key={index}
|
||||
data={[{ value: ring.value }, { value: 100 - ring.value }]}
|
||||
dataKey="value"
|
||||
startAngle={90}
|
||||
endAngle={-270}
|
||||
cornerRadius={50}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={ring.innerRadius}
|
||||
outerRadius={ring.outerRadius}
|
||||
paddingAngle={0}
|
||||
isAnimationActive={false}
|
||||
>
|
||||
<Cell fill={ring.color} />
|
||||
<Cell fill="#f2f3f5" />
|
||||
</Pie>
|
||||
))}
|
||||
<text
|
||||
x={200}
|
||||
y={204}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
style={{ fontSize: "1.3rem", fontWeight: "bold" }}
|
||||
>
|
||||
{percent}%
|
||||
</text>
|
||||
</PieChart>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
47
src/components/Portfolio/BacklinkTypeDropdown.tsx
Normal file
47
src/components/Portfolio/BacklinkTypeDropdown.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
const BacklinkTypeDropdown = () => {
|
||||
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const [checkedRings, setCheckedRings] = useState<Record<string, boolean>>({
|
||||
Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false
|
||||
});
|
||||
|
||||
const toggleRing = (ring: string) => setCheckedRings(r => ({ ...r, [ring]: !r[ring] }));
|
||||
|
||||
return (
|
||||
<div className='relative'>
|
||||
<button
|
||||
className='border rounded-lg px-3 py-1 bg-white text-gray-700 font-medium flex items-center text-xs'
|
||||
onClick={() => setDropdownOpen(v => !v)}
|
||||
>
|
||||
Backlink Type <svg className='ml-2 w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||||
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />
|
||||
</svg>
|
||||
</button>
|
||||
{dropdownOpen && (
|
||||
<div className='absolute z-10 bg-white shadow-lg border rounded-lg top-[110%] right-0 px-4 py-3 min-w-[190px]'>
|
||||
<div className='font-semibold text-xs text-gray-700 mb-2'>Show rings:</div>
|
||||
{Object.keys(checkedRings).map((ring, idx) => (
|
||||
<label
|
||||
key={idx}
|
||||
className='flex items-center gap-2 py-1 text-[14px] cursor-pointer select-none'
|
||||
style={{ fontWeight: 500 }}
|
||||
>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={checkedRings[ring]}
|
||||
className='form-checkbox accent-blue-600 w-4 h-4'
|
||||
onChange={() => toggleRing(ring)}
|
||||
/>
|
||||
{ring}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export default BacklinkTypeDropdown;
|
||||
93
src/components/Strategy/ProgressMetrics.tsx
Normal file
93
src/components/Strategy/ProgressMetrics.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import Preplextiy from "../../assets/icons/Preplextiy.png"
|
||||
import ChatGPT from "../../assets/icons/gpt.png"
|
||||
import MetricCard from "../shared/MetricCard"
|
||||
|
||||
|
||||
function ProgressMetrics() {
|
||||
return (
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
|
||||
<h3 className="text-lg font-bold text-gray-600 mb-2">CPA Los Angeles</h3>
|
||||
|
||||
<div className="flex items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4">
|
||||
{/* Left section with progress indicators */}
|
||||
<div className="flex items-center w-1/4 ">
|
||||
{/* 60% Progress */}
|
||||
<div className="w-[100%]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">60%</div>
|
||||
<div className="text-md font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
|
||||
{/* Progress bar */}
|
||||
<div className="w-70 h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-blue-500 via-green-500 via-yellow-500 to-orange-500 rounded-full"
|
||||
style={{ width: "60%" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex items-center w-1/3 2xl:gap-32 gap-3">
|
||||
{/* 75% Keyword Visibility */}
|
||||
<div className="w-[30%]">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">75%</div>
|
||||
<div className="text-sm text-gray-500">Keyword Visibility</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 w-[100%]">
|
||||
<div className="flex items-center gap-8">
|
||||
<MetricCard
|
||||
img={ChatGPT}
|
||||
value="10" label="ChatGPT" tooltipText="ChatGPT is a chatbot that can answer questions and help with tasks." valueChange="+1" size="sm" />
|
||||
{/* <img src={ChatGPT} alt="ChatGPT" className="w-8 h-8" /> */}
|
||||
|
||||
<MetricCard
|
||||
img={Preplextiy}
|
||||
value="10" label="Preplextiy" tooltipText="Preplextiy is a chatbot that can answer questions and help with tasks." valueChange="+1" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right section with Chat GPT and metrics */}
|
||||
<div className="flex items-center w-1/3">
|
||||
|
||||
{/* Performance metrics with chart */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-42 h-24 relative">
|
||||
<svg viewBox="0 0 96 48" className="w-full h-full">
|
||||
<defs>
|
||||
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stopColor="#10B981" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#10B981" stopOpacity="0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0,40 Q24,35 48,25 Q72,20 96,15" fill="none" stroke="#10B981" strokeWidth="2" />
|
||||
<path d="M0,40 Q24,35 48,25 Q72,20 96,15 L96,48 L0,48 Z" fill="url(#chartGradient)" />
|
||||
<circle cx="96" cy="15" r="2" fill="#10B981" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex items-center justify-end gap-1 mb-1">
|
||||
<span className="text-gray-400">G</span>
|
||||
<span className="text-lg font-bold text-gray-900">7</span>
|
||||
<span className="text-lg text-green-600 font-medium">+10</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-1 mb-1">
|
||||
<span className="text-orange-500">📍</span>
|
||||
<span className="text-lg font-bold text-gray-900">5</span>
|
||||
<span className="text-lg text-green-600 font-medium">+3</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Current Rank</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <ShowDetails /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProgressMetrics
|
||||
70
src/components/Strategy/RoadmapSidebar.tsx
Normal file
70
src/components/Strategy/RoadmapSidebar.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import Vector from "../../assets/icons/Vector.png"
|
||||
import Vector2 from "../../assets/icons/Vector2.png"
|
||||
|
||||
// Roadmap sidebar component
|
||||
const RoadmapSidebar = ({
|
||||
selectedKeyword,
|
||||
onKeywordSelect,
|
||||
mode
|
||||
}: {
|
||||
selectedKeyword: string
|
||||
onKeywordSelect: (keyword: string) => void
|
||||
mode: string
|
||||
}) => {
|
||||
const keywords = [
|
||||
"CPA Los Angeles",
|
||||
"Richard Bower CPA",
|
||||
"CPA Los Angeles 2",
|
||||
"CPA Hollywood",
|
||||
"Best CPA Los Angeles",
|
||||
"CPA Los Angeles 4",
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="w-80 h-[100%] bg-white border-2 border-gray-200 rounded-lg">
|
||||
{mode ?
|
||||
null
|
||||
:
|
||||
<div className="mb-2 border-b-2 border-gray-200 p-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-2">Roadmap</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-3xl font-bold text-green-600">1001</span>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">Total Links</div>
|
||||
<div className="text-sm text-gray-500">Across all keywords</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
<div className="space-y-2 pt-0">
|
||||
{keywords.map((keyword, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => onKeywordSelect(keyword)}
|
||||
className={`w-full text-left p-3 rounded-lg flex items-center gap-3 transition-colors ${selectedKeyword === keyword ? "bg-blue-50 border-2 border-dashed border-blue-300" : "hover:bg-gray-50"}`}
|
||||
>
|
||||
{
|
||||
selectedKeyword === keyword
|
||||
?
|
||||
<>
|
||||
<img src={Vector} alt={keyword} className="w-4 h-4" />
|
||||
<span className="text-md text-blue-600 font-bold">{keyword}</span>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<img src={Vector2} alt={keyword} className="w-4 h-4" />
|
||||
<span className="text-md text-gray-700 font-bold">{keyword}</span>
|
||||
</>
|
||||
|
||||
}
|
||||
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RoadmapSidebar
|
||||
262
src/components/Strategy/ShowDetails.tsx
Normal file
262
src/components/Strategy/ShowDetails.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
interface Task {
|
||||
id: string
|
||||
title: string
|
||||
platform: "wordpress" | "substack" | "paypal" | "pinterest" | "apple-music"
|
||||
metrics?: string
|
||||
}
|
||||
|
||||
interface Column {
|
||||
id: string
|
||||
title: string
|
||||
count: number
|
||||
date: string
|
||||
tasks: Task[]
|
||||
}
|
||||
|
||||
const platformIcons = {
|
||||
wordpress: (
|
||||
<div className="w-5 h-5 bg-blue-600 rounded-sm flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">W</span>
|
||||
</div>
|
||||
),
|
||||
substack: (
|
||||
<div className="w-5 h-5 bg-orange-500 rounded-sm flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">S</span>
|
||||
</div>
|
||||
),
|
||||
paypal: (
|
||||
<div className="w-5 h-5 bg-blue-500 rounded-sm flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">P</span>
|
||||
</div>
|
||||
),
|
||||
pinterest: (
|
||||
<div className="w-5 h-5 bg-red-500 rounded-sm flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">P</span>
|
||||
</div>
|
||||
),
|
||||
"apple-music": (
|
||||
<div className="w-5 h-5 bg-black rounded-sm flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">A</span>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
const initialData: Column[] = [
|
||||
{
|
||||
id: "published",
|
||||
title: "Published",
|
||||
count: 10,
|
||||
date: "Since 23 Oct 2025",
|
||||
tasks: [
|
||||
{
|
||||
id: "1",
|
||||
title: "Questions to ask your CPA Published o...",
|
||||
platform: "wordpress",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Substack DR 97 DA 95",
|
||||
platform: "substack",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
platform: "paypal",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Substack DR 97 DA 95 Traffic",
|
||||
platform: "substack",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
title: "Paypal DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "paypal",
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
title: "Apple Music DR 97 DA 95 Traffic",
|
||||
platform: "apple-music",
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
title: "Questions to ask your CPA Published o...",
|
||||
platform: "wordpress",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "in-progress",
|
||||
title: "In Progress",
|
||||
count: 10,
|
||||
date: "23 Oct 2025",
|
||||
tasks: [
|
||||
{
|
||||
id: "11",
|
||||
title: "Questions to ask your CPA Published o...",
|
||||
platform: "wordpress",
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
title: "Substack DR 97 DA 95",
|
||||
platform: "substack",
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
platform: "paypal",
|
||||
},
|
||||
{
|
||||
id: "14",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "16",
|
||||
title: "Substack DR 97 DA 95 Traffic",
|
||||
platform: "substack",
|
||||
},
|
||||
{
|
||||
id: "17",
|
||||
title: "Paypal DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "paypal",
|
||||
},
|
||||
{
|
||||
id: "18",
|
||||
title: "Apple Music DR 97 DA 95 Traffic",
|
||||
platform: "apple-music",
|
||||
},
|
||||
{
|
||||
id: "19",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "20",
|
||||
title: "Questions to ask your CPA Published o...",
|
||||
platform: "wordpress",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "next-month",
|
||||
title: "Next month",
|
||||
count: 10,
|
||||
date: "23 Nov 2025",
|
||||
tasks: [
|
||||
{
|
||||
id: "21",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "22",
|
||||
title: "Substack DR 97 DA 95",
|
||||
platform: "substack",
|
||||
},
|
||||
{
|
||||
id: "23",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "24",
|
||||
title: "Paypal DR 97 DA 95 Traffic",
|
||||
platform: "paypal",
|
||||
},
|
||||
{
|
||||
id: "25",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "26",
|
||||
title: "Substack DR 97 DA 95 Traffic",
|
||||
platform: "substack",
|
||||
},
|
||||
{
|
||||
id: "27",
|
||||
title: "Paypal DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "paypal",
|
||||
},
|
||||
{
|
||||
id: "28",
|
||||
title: "Apple Music DR 97 DA 95 Traffic",
|
||||
platform: "apple-music",
|
||||
},
|
||||
{
|
||||
id: "29",
|
||||
title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
|
||||
platform: "pinterest",
|
||||
},
|
||||
{
|
||||
id: "30",
|
||||
title: "Questions to ask your CPA Published o...",
|
||||
platform: "wordpress",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
function ShowDetails() {
|
||||
const [columns, setColumns] = useState<Column[]>(initialData)
|
||||
|
||||
return (
|
||||
<div className="p-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{columns.map((column) => (
|
||||
<div key={column.id} className="bg-white rounded-lg shadow-sm border border-gray-200 ">
|
||||
{/* Column Header */}
|
||||
<div className="p-4 border-b border-gray-200 bg-[#F6F6FA] rounded-lg flex justify-between items-center ">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-gray-900 text-lg">{column.title}</h3>
|
||||
<span className="bg-gray-100 text-gray-600 text-sm px-2 py-1 rounded-full">{column.count}</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">{column.date}</p>
|
||||
</div>
|
||||
|
||||
{/* Tasks List */}
|
||||
<div className="p-3 space-y-3 max-h-96 custom-scrollbar">
|
||||
{column.tasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-start gap-3 p-1 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer border-b-2 border-[#f1eeee]"
|
||||
>
|
||||
{platformIcons[task.platform]}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm line-clamp-2 leading-relaxed truncate max-w-[350px] whitespace-pre-wrap text-blue-600 hover:text-blue-800 underline">{task.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ShowDetails
|
||||
11
src/components/shared/ContainerPage.tsx
Normal file
11
src/components/shared/ContainerPage.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const ContainerPage = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<div className='min-h-screen container pt-6 pb-20'>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContainerPage
|
||||
32
src/components/shared/Footer.tsx
Normal file
32
src/components/shared/Footer.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-gray-100 py-6">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
{/* Navigation Links */}
|
||||
<nav className="flex flex-wrap items-center justify-center space-x-8 mb-4">
|
||||
<Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Home</Link>
|
||||
<Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">About</Link>
|
||||
<Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Journal</Link>
|
||||
<Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">SEO Tools</Link>
|
||||
<Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Backlinks</Link>
|
||||
<Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Help Desk</Link>
|
||||
</nav>
|
||||
|
||||
{/* Copyright and Legal */}
|
||||
<div className="flex items-center justify-center text-sm text-gray-600 lg:flex-row flex-col">
|
||||
<span>©One Keyword LLC. Premiere Position LLC.</span>
|
||||
<span className="mx-2">|</span>
|
||||
<span>30745 Pacific Coast Hwy Ste 21 Malibu, CA 90265</span>
|
||||
<span className="mx-2">|</span>
|
||||
<Link to="#" className="hover:text-gray-800">Terms of Service</Link>
|
||||
<span className="mx-2">|</span>
|
||||
<Link to="#" className="hover:text-gray-800">Privacy Policy</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
220
src/components/shared/Header.tsx
Normal file
220
src/components/shared/Header.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import { useLocation } from "react-router-dom";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
BookOpen,
|
||||
CalendarDays,
|
||||
Plus,
|
||||
User,
|
||||
Settings,
|
||||
CreditCard,
|
||||
HelpCircle,
|
||||
MessageCircle,
|
||||
LogOut,
|
||||
ChevronDown,
|
||||
Menu,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
|
||||
import logo from "../../assets/logo.png";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Header = () => {
|
||||
const location = useLocation();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
|
||||
|
||||
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
|
||||
const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
|
||||
|
||||
const navLinks = [
|
||||
{ name: 'Dashboard', to: '/', icon: LayoutDashboard },
|
||||
{ name: 'Portfolio', to: '/portfolio', icon: BookOpen },
|
||||
{ name: 'Strategy', to: '/strategy', icon: CalendarDays },
|
||||
];
|
||||
|
||||
const menuItems = [
|
||||
{ name: 'Edit Profile', icon: User, to: '/profile' },
|
||||
{ name: 'Settings', icon: Settings, to: '/settings' },
|
||||
{ name: 'Billing', icon: CreditCard, to: '/billing' },
|
||||
{ name: 'Help Desk', icon: HelpCircle, to: '/help-desk' },
|
||||
{ name: 'Feature Request', icon: MessageCircle, to: '/feature-request' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
setIsMenuOpen(false)
|
||||
}, [location.pathname]);
|
||||
|
||||
|
||||
return (
|
||||
<header className="pb-20">
|
||||
<nav className="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
|
||||
<div className="container mx-auto px-4 py-3 flex justify-between items-center">
|
||||
{/* Left: Logo */}
|
||||
<div className="flex items-center justify-between w-full md:w-auto">
|
||||
<Link to="/" className="flex items-center space-x-2">
|
||||
<img
|
||||
src={logo}
|
||||
alt="logo"
|
||||
className="w-auto h-8 sm:h-10 hover:scale-105 transition-all duration-300"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
<div className="md:hidden">
|
||||
<button onClick={toggleMobileNav}>
|
||||
{isMobileNavOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center Nav Links - Hidden on Mobile */}
|
||||
<div className="hidden md:flex md:justify-center md:items-center md:flex-grow">
|
||||
<div className="p-1 rounded-full bg-blue-100/70 shadow-inner flex">
|
||||
{navLinks.map((link, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
to={link.to}
|
||||
className={`px-4 py-2 flex items-center space-x-2 rounded-full font-medium transition-colors duration-200 ${
|
||||
location.pathname === link.to
|
||||
? 'bg-blue-500/80 text-white shadow-md'
|
||||
: 'text-black/80 hover:bg-blue-200/50'
|
||||
}`}
|
||||
>
|
||||
<link.icon size={18} />
|
||||
<span>{link.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Desktop Only */}
|
||||
<div className="hidden md:flex items-center space-x-4 relative">
|
||||
{/* Add Keyword Button */}
|
||||
<button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
|
||||
<Plus size={18} />
|
||||
<span>Add Keyword</span>
|
||||
</button>
|
||||
|
||||
{/* Profile Dropdown */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={toggleMenu}
|
||||
className="flex items-center space-x-2 rounded-full focus:outline-none"
|
||||
>
|
||||
<img
|
||||
src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
|
||||
alt="User avatar"
|
||||
className="w-10 h-10 rounded-full border-2 border-orange-400"
|
||||
/>
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`text-gray-500 transition-transform duration-200 ${
|
||||
isMenuOpen ? 'rotate-180' : 'rotate-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-3 w-64 bg-white rounded-xl shadow-2xl overflow-hidden py-2 text-gray-700 z-50">
|
||||
<div className="px-4 py-3 flex items-center space-x-3 border-b border-gray-200">
|
||||
<img
|
||||
src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
|
||||
alt="User avatar"
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-semibold text-sm text-gray-800">Mohammed Said</p>
|
||||
<p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-2">
|
||||
{menuItems.map((item, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
to={item.to}
|
||||
className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200"
|
||||
>
|
||||
<item.icon size={20} className="text-gray-500" />
|
||||
<span>{item.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t border-gray-200 pt-2">
|
||||
<button className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200">
|
||||
<LogOut size={20} className="text-gray-500" />
|
||||
<span>Log Out</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile nav - visible when toggled */}
|
||||
{isMobileNavOpen && (
|
||||
<div className="md:hidden px-4 pb-4">
|
||||
{/* Nav links */}
|
||||
<div className="flex flex-col gap-2 rounded-xl bg-blue-100/30 p-3 mt-2">
|
||||
{navLinks.map((link, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
to={link.to}
|
||||
className={`flex items-center px-3 py-2 rounded-lg transition-colors duration-200 ${
|
||||
location.pathname === link.to
|
||||
? 'bg-blue-500/80 text-white shadow-md'
|
||||
: 'text-black/80 hover:bg-blue-200/50'
|
||||
}`}
|
||||
>
|
||||
<link.icon size={18} className="mr-2" />
|
||||
<span>{link.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add Keyword Button */}
|
||||
<button className="mt-4 w-full flex items-center justify-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
|
||||
<Plus size={18} />
|
||||
<span>Add Keyword</span>
|
||||
</button>
|
||||
|
||||
{/* Profile menu */}
|
||||
<div className="mt-4 p-3 bg-white rounded-xl shadow-md">
|
||||
<div className="flex items-center space-x-3 border-b pb-3 mb-2">
|
||||
<img
|
||||
src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
|
||||
alt="User avatar"
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-semibold text-sm text-gray-800">Mohammed Said</p>
|
||||
<p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-2">
|
||||
{menuItems.map((item, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
to={item.to}
|
||||
className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100"
|
||||
>
|
||||
<item.icon size={18} />
|
||||
<span>{item.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
<button className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100">
|
||||
<LogOut size={18} />
|
||||
<span>Log Out</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
20
src/components/shared/HeaderPage.tsx
Normal file
20
src/components/shared/HeaderPage.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import MetricCard from "./MetricCard"
|
||||
import UrlDropdown from "./UrlDropdown"
|
||||
|
||||
const HeaderPage = ({ title }: { title: string }) => {
|
||||
return (
|
||||
<div className="flex space-x-4 my-4 lg:flex-row flex-col items-baseline">
|
||||
<h1 className="text-3xl font-bold text-gray-800">{title}</h1>
|
||||
|
||||
<UrlDropdown />
|
||||
|
||||
<div className="flex space-x-4">
|
||||
<MetricCard value="12" label="DR" valueChange="+1" size="sm" />
|
||||
<MetricCard value="14" label="DA" valueChange="+3" size="sm" />
|
||||
<MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeaderPage
|
||||
78
src/components/shared/MetricCard.tsx
Normal file
78
src/components/shared/MetricCard.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { ArrowUp, Info } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
// Reusable Metric Card Component
|
||||
const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size }: { icon: any, img: any, value: any, label: any, tooltipText: any, valueChange: any, size: any }) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
if (Img) {
|
||||
return (
|
||||
<div className="relative cursor-pointer"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}>
|
||||
<img src={Img} alt="Img" className="w-12 h-12" />
|
||||
<div className=" ">
|
||||
{tooltipText && (
|
||||
<div className="relative">
|
||||
{isHovered && (
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
|
||||
{/* Tooltip triangle */}
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
|
||||
{tooltipText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="flex-1 min-w-[50px] bg-white rounded-xl shadow-sm p-2 flex items-center space-x-2 relative"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
{Icon && (
|
||||
<div className="p-3 bg-gray-100 rounded-lg">
|
||||
<Icon size={24} className="text-gray-500" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
<div className="flex-1">
|
||||
<div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2`}>
|
||||
<span>{value}</span>
|
||||
{valueChange && (
|
||||
<div className="flex items-center text-sm font-semibold text-green-500">
|
||||
{Icon && (
|
||||
<ArrowUp size={14} className="inline-block mr-1" />
|
||||
)}
|
||||
<span>{valueChange}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-1 mt-1 text-gray-500">
|
||||
<span className="text-sm">{label}</span>
|
||||
{tooltipText && (
|
||||
<div className="relative">
|
||||
<Info size={16} className="text-gray-400 cursor-pointer" />
|
||||
{isHovered && (
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
|
||||
{/* Tooltip triangle */}
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
|
||||
{tooltipText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricCard
|
||||
11
src/components/shared/MyScrollableComponent.tsx
Normal file
11
src/components/shared/MyScrollableComponent.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import './scrollableComponent.css';
|
||||
|
||||
export default function MyScrollableComponent() {
|
||||
return (
|
||||
<div className="custom-scrollbar">
|
||||
{[...Array(30)].map((_, index) => (
|
||||
<p key={index}>Line {index + 1}</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
56
src/components/shared/UrlDropdown.tsx
Normal file
56
src/components/shared/UrlDropdown.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
// components/UrlDropdown.jsx
|
||||
import { useState } from "react";
|
||||
|
||||
const urlOptions = [
|
||||
"http://www.mysite.com",
|
||||
"http://www.myseosucks.com",
|
||||
"http://www.sribbble.com",
|
||||
"http://www.myseosucks.com",
|
||||
"http://www.myseosucks.com",
|
||||
"http://www.myseosucks.com",
|
||||
];
|
||||
|
||||
export default function UrlDropdown() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selected, setSelected] = useState(urlOptions[0]);
|
||||
|
||||
const toggleDropdown = () => setIsOpen((prev) => !prev);
|
||||
const handleSelect = (url) => {
|
||||
setSelected(url);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative text-sm max-w-[400px] min-w-[220px]">
|
||||
{/* Input box */}
|
||||
<div
|
||||
className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded-xl cursor-pointer"
|
||||
onClick={toggleDropdown}
|
||||
>
|
||||
<span className="truncate text-gray-800">{selected}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-500 text-xs">▼</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dropdown list */}
|
||||
{isOpen && (
|
||||
<div className="absolute mt-1 w-full bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10">
|
||||
{urlOptions.map((url, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => handleSelect(url)}
|
||||
className={`flex justify-between items-center px-3 py-2 hover:bg-gray-100 cursor-pointer ${selected === url ? "font-bold text-black" : "text-gray-700"
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{url}</span>
|
||||
{selected === url && (
|
||||
<span className="text-green-500 text-sm">✔</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
src/components/shared/scrollableComponent.css
Normal file
44
src/components/shared/scrollableComponent.css
Normal file
@@ -0,0 +1,44 @@
|
||||
.custom-scrollbar {
|
||||
max-height: 600px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid #ccc;
|
||||
/* padding: 10px; */
|
||||
}
|
||||
|
||||
.custom-scrollbar-table {
|
||||
max-height: 460px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* ==== WebKit-based browsers (Chrome, Edge, Safari) ==== */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #999;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Remove the up/down arrows */
|
||||
.custom-scrollbar::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* ==== Firefox ==== */
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #999 #eee;
|
||||
}
|
||||
3
src/index.css
Normal file
3
src/index.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
11
src/main.tsx
Normal file
11
src/main.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import './App.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
12
src/pages/Dashboard.tsx
Normal file
12
src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import DashboardGrid from "../components/DashboardGrid";
|
||||
import ContainerPage from "../components/shared/ContainerPage";
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<ContainerPage>
|
||||
<DashboardGrid />
|
||||
</ContainerPage>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dashboard
|
||||
204
src/pages/Portfolio.tsx
Normal file
204
src/pages/Portfolio.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Vector from "../assets/icons/Vector.png"
|
||||
import Vector2 from "../assets/icons/Vector2.png"
|
||||
import BacklinkTypeDropdown from '../components/Portfolio/BacklinkTypeDropdown';
|
||||
import RoadmapSidebar from '../components/Strategy/RoadmapSidebar';
|
||||
import HeaderPage from '../components/shared/HeaderPage';
|
||||
import ContainerPage from '../components/shared/ContainerPage';
|
||||
|
||||
|
||||
// Sidebar data
|
||||
const sidebarLinks = [
|
||||
'CPA Los Angeles',
|
||||
'Richard Bower CPA',
|
||||
'CPA Los Angeles',
|
||||
'CPA Hollywood',
|
||||
'Best CPA Los Angeles',
|
||||
'CPA Los Angeles',
|
||||
];
|
||||
|
||||
// Category table data
|
||||
const categories = [
|
||||
{
|
||||
name: 'Social',
|
||||
color: 'border-l-4 border-[#4285F4] bg-[#001EE21C]',
|
||||
rows: [
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA httpAmazon', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'In Progress', interlinked: 'N/A', date: '9/16/25' },
|
||||
{ icon: '🅿️', title: 'Pinterest DR 97 DA 95 Traffic 3,989,220', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '📄', title: 'Questions to ask your CPA Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'In Progress', interlinked: 'In Progress', date: '9/16/25' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Citation',
|
||||
color: 'border-l-4 border-[#0ea5e9] bg-[#3C87FF2B]',
|
||||
rows: [
|
||||
{ icon: '📄', title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'N/A', date: '9/16/25' },
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🅿️', title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Web 2.0',
|
||||
color: 'border-l-4 border-[#22c55e] bg-[#f0fdf4]',
|
||||
rows: [
|
||||
{ icon: '🅿️', title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'In Progress', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🎵', title: 'Apple Music DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '📄', title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
|
||||
{ icon: '🅿️', title: 'Pin DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const pillClass = (val: string) =>
|
||||
val === 'Done' ? 'bg-green-100 text-green-700 font-bold'
|
||||
: val === 'In Progress' ? 'bg-blue-100 text-blue-700 whitespace-nowrap font-bold'
|
||||
: 'bg-gray-100 text-gray-700 font-bold';
|
||||
|
||||
function Portfolio() {
|
||||
const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")
|
||||
|
||||
|
||||
return (
|
||||
<ContainerPage>
|
||||
<HeaderPage title="Live Library" />
|
||||
<div className='flex gap-8 mx-auto'>
|
||||
{/* Sidebar */}
|
||||
{/* <aside className='w-72 border rounded-2xl shadow-sm bg-white px-5 py-6 h-fit'>
|
||||
<div className='font-extrabold text-xl mb-5 text-[#4285F4] flex items-center'>
|
||||
<span className='w-3 h-3 rounded-full bg-[#4285F4] mr-2'></span>
|
||||
Live Library
|
||||
</div>
|
||||
<ul className='space-y-2'>
|
||||
{sidebarLinks.map((link, idx) => (
|
||||
<li key={idx} className={`px-3 py-2 text-md flex items-center gap-2 rounded-xl cursor-pointer hover:bg-[#e3edfc] transition-colors ${idx === 0 ? 'bg-[#e3edfc] text-[#4285F4] font-bold' : 'text-gray-700'}`}>
|
||||
|
||||
{
|
||||
idx === 0
|
||||
?
|
||||
<img src={Vector} alt={link} className="w-4 h-4" />
|
||||
:
|
||||
<img src={Vector2} alt={link} className="w-4 h-4" />
|
||||
|
||||
}
|
||||
{link}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</aside> */}
|
||||
|
||||
<RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
|
||||
|
||||
|
||||
{/* Table Section */}
|
||||
<section className='flex-1 bg-white border rounded-2xl shadow-sm px-6 py-4'>
|
||||
{/* Title Bar */}
|
||||
<div className='flex items-center justify-between mb-2'>
|
||||
<div className='flex flex-col items-start gap-3'>
|
||||
<span className='text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
|
||||
<span className='bg-[#f1f5f9] text-gray-700 px-3 py-1 rounded-md text-xs border font-medium'>Links: <b>Indexed 32%</b> • Interlinked <b>4%</b></span>
|
||||
|
||||
<span className='flex items-center gap-2 text-gray-800'>Content Publishing:
|
||||
<span className='bg-[#fee2e2] text-[#dc2626] px-2 py-0 rounded-md text-xs font-bold border'>Locked</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-3'>
|
||||
<BacklinkTypeDropdown />
|
||||
<select className='border px-3 py-1 rounded-lg text-xs bg-[#e3edfc] font-bold text-[#4285F4] hover:bg-[#4285F4] hover:text-white transition-colors'>
|
||||
<option>DA</option>
|
||||
<option>DR</option>
|
||||
<option>Traffic</option>
|
||||
</select>
|
||||
<select className='border px-3 py-1 rounded-lg text-xs bg-[#e3edfc] font-bold text-[#4285F4] hover:bg-[#4285F4] hover:text-white transition-colors'>
|
||||
<option>Traffic</option>
|
||||
<option>DA</option>
|
||||
<option>DR</option>
|
||||
</select>
|
||||
<button className='bg-[#e3edfc] text-[#4285F4] border px-4 py-1 rounded-lg text-xs font-bold hover:bg-[#4285F4] hover:text-white transition-colors'>Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Global Filter/Sort Header Row */}
|
||||
<div className='flex items-center justify-end gap-4 mb-2 px-4 py-3 '>
|
||||
<div className='flex items-center gap-8 text-sm font-medium text-gray-600'>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
DR <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
DA <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Traffic <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Indexed <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Interlinked <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
|
||||
Date <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
|
||||
<path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tables */}
|
||||
{categories.map((cat, idx) => (
|
||||
<div key={idx} className='mb-8 last:mb-0'>
|
||||
<div className={`px-4 py-3 rounded-lg font-bold text-sm ${cat.color} mb-3`}>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-lg'>{cat.name === 'Social' ? '💬' : cat.name === 'Citation' ? '📊' : '🌐'}</span>
|
||||
<span>{cat.name}</span>
|
||||
</div>
|
||||
<span className='text-xs font-semibold text-gray-500 bg-white px-2 py-1 rounded-full'>{cat.rows.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white rounded-xl border overflow-hidden shadow-sm'>
|
||||
<table className='w-full'>
|
||||
<tbody>
|
||||
{cat.rows.map((row, rIdx) => (
|
||||
<tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
|
||||
<td className='py-3 px-4 text-center w-12'>{row.icon}</td>
|
||||
<td className='py-3 px-4 w-full text-[#4285F4] hover:text-[#1e40af] cursor-pointer font-medium' title={row.title}>
|
||||
<div className='truncate max-w-[350px] whitespace-pre-wrap'>{row.title}</div>
|
||||
</td>
|
||||
<td className='py-3 px-4 text-center w-16 font-semibold'>{row.DR}</td>
|
||||
<td className='py-3 px-4 text-center w-16 font-semibold'>{row.DA}</td>
|
||||
<td className='py-3 px-4 text-center w-24 font-semibold'>{row.traffic}</td>
|
||||
<td className='py-3 px-4 text-center w-20'>
|
||||
<span className={`px-2 py-1 rounded-full text-xs ${pillClass(row.indexed)}`}>{row.indexed}</span>
|
||||
</td>
|
||||
<td className='py-3 px-4 text-center w-24'>
|
||||
<span className={`px-2 py-1 rounded-full text-xs ${pillClass(row.interlinked)}`}>{row.interlinked}</span>
|
||||
</td>
|
||||
<td className='py-3 px-4 text-center w-20 font-medium text-gray-600'>{row.date}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
</ContainerPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Portfolio;
|
||||
217
src/pages/Settings.tsx
Normal file
217
src/pages/Settings.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const Settings = () => {
|
||||
const [activeSection, setActiveSection] = useState("profile");
|
||||
const [activeSubSection, setActiveSubSection] = useState("payment-history");
|
||||
|
||||
const sidebarItems = [
|
||||
{
|
||||
id: "profile",
|
||||
label: "Profile",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
||||
</svg>
|
||||
),
|
||||
hasSubItems: false
|
||||
},
|
||||
{
|
||||
id: "campaigns",
|
||||
label: "Campaigns",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
),
|
||||
hasSubItems: false
|
||||
},
|
||||
{
|
||||
id: "billing",
|
||||
label: "Billing",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
|
||||
<path fillRule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
),
|
||||
hasSubItems: true,
|
||||
subItems: [
|
||||
"Billing info",
|
||||
"Update",
|
||||
"Monthly Engagement",
|
||||
"Billing Date",
|
||||
"Payment History",
|
||||
"Cancel Membership"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "help-desk",
|
||||
label: "Help Desk",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
|
||||
</svg>
|
||||
),
|
||||
hasSubItems: false
|
||||
},
|
||||
{
|
||||
id: "feature-request",
|
||||
label: "Feature Request",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
),
|
||||
hasSubItems: false
|
||||
}
|
||||
];
|
||||
|
||||
const handleSectionClick = (sectionId: string) => {
|
||||
setActiveSection(sectionId);
|
||||
if (sectionId === "billing") {
|
||||
setActiveSubSection("payment-history");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubSectionClick = (subSection: string) => {
|
||||
setActiveSubSection(subSection);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="flex gap-8">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 flex-shrink-0">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-8">Settings</h1>
|
||||
|
||||
<nav className="space-y-2">
|
||||
{sidebarItems.map((item) => (
|
||||
<div key={item.id}>
|
||||
<button
|
||||
onClick={() => handleSectionClick(item.id)}
|
||||
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
|
||||
activeSection === item.id
|
||||
? "bg-blue-50 text-blue-600"
|
||||
: "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
<span className="font-medium">{item.label}</span>
|
||||
{item.hasSubItems && (
|
||||
<svg className="w-4 h-4 ml-auto" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{item.hasSubItems && activeSection === item.id && (
|
||||
<div className="ml-8 mt-2 space-y-1">
|
||||
{item.subItems?.map((subItem) => (
|
||||
<button
|
||||
key={subItem}
|
||||
onClick={() => handleSubSectionClick(subItem.toLowerCase().replace(/\s+/g, "-"))}
|
||||
className={`w-full flex items-center px-4 py-2 rounded-lg text-left transition-colors ${
|
||||
activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-")
|
||||
? "bg-blue-600 text-white"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-") && (
|
||||
<div className="w-1 h-6 bg-blue-600 rounded-full mr-3"></div>
|
||||
)}
|
||||
<span className="text-sm">{subItem}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1">
|
||||
<div className="bg-white">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>
|
||||
<p className="text-gray-600 mb-8">
|
||||
View and update your personal details and account information.
|
||||
</p>
|
||||
|
||||
<form className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="Eugiene Jonathan"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
defaultValue="Eugiene Jonathan"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
defaultValue="Eugiene Jonathan"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Member Since
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="12 Aug 2025"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>Total Keywords Campaigns</span>
|
||||
<svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="234,029"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
47
src/pages/Strategy.tsx
Normal file
47
src/pages/Strategy.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
import { useState } from "react"
|
||||
// import { Search, MessageSquare } from "lucide-react"
|
||||
import IntegratedStrategy from "../components/IntegratedStrategy"
|
||||
import Vector from "../assets/icons/Vector.png"
|
||||
import Vector2 from "../assets/icons/Vector2.png"
|
||||
import ShowDetails from "../components/Strategy/ShowDetails"
|
||||
import ProgressMetrics from "../components/Strategy/ProgressMetrics"
|
||||
import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"
|
||||
import HeaderPage from "../components/shared/HeaderPage"
|
||||
import ContainerPage from "../components/shared/ContainerPage"
|
||||
|
||||
|
||||
|
||||
|
||||
// Main integrated dashboard component
|
||||
function Strategy() {
|
||||
const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")
|
||||
|
||||
return (
|
||||
<ContainerPage>
|
||||
<HeaderPage title="Strategy" />
|
||||
<div className="flex bg-white h-[100%]">
|
||||
|
||||
{/* <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} /> */}
|
||||
|
||||
<RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
|
||||
|
||||
<div className="flex-1 px-4">
|
||||
<ProgressMetrics />
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-3 pb-10">
|
||||
|
||||
{
|
||||
selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails />
|
||||
}
|
||||
{/* <IntegratedStrategy /> */}
|
||||
{/* <ShowDetails /> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ContainerPage>
|
||||
)
|
||||
}
|
||||
|
||||
export default Strategy
|
||||
1
src/vite-env.d.ts
مباع
Normal file
1
src/vite-env.d.ts
مباع
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
25
tailwind.config.js
Normal file
25
tailwind.config.js
Normal file
@@ -0,0 +1,25 @@
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
container: {
|
||||
center: true,
|
||||
padding: '1rem',
|
||||
screens: {
|
||||
sm: '100%',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1400px',
|
||||
'2xl': '1800px',
|
||||
// '3xl': '1800px',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
27
tsconfig.app.json
Normal file
27
tsconfig.app.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
25
tsconfig.node.json
Normal file
25
tsconfig.node.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
19
vite.config.ts
Normal file
19
vite.config.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// // https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
|
||||
plugins: [react()],
|
||||
})
|
||||
// /** @type {import('tailwindcss').Config} */
|
||||
// export default {
|
||||
// content: [
|
||||
// "./index.html",
|
||||
// "./src/**/*.{js,ts,jsx,tsx}",
|
||||
// ],
|
||||
// theme: {
|
||||
// extend: {},
|
||||
// },
|
||||
// plugins: [react()],
|
||||
// }
|
||||
المرجع في مشكلة جديدة
حظر مستخدم