From cec949dfe767116e2aec0cb83c8dc56ec96ecdae Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 17 Feb 2026 18:07:50 +0000 Subject: [PATCH 01/10] Rebrand visa-map to GlobeReach with full UI overhaul - Rebrand all pages, titles, and metadata from Visa-map to GlobeReach - Replace GitHub logo with GlobeReach globe logo linking to home page - Remove "table" tab from header navigation - Add "The Elite" page showcasing celebrities with multiple passports - Create admin panel for passport data and blog management - Remove all Abkhazia data from visa policy/duration JSON, maps, arrays - Modernize UI with dark navy theme (#0F1420), teal accent (#00D4AA) - Update header with gradient background and active state highlighting - Restyle selector drawer, progress bars, FAQ accordions, and all pages https://claude.ai/code/session_01UHGS9EtFYTfgg2Cu4nwo7k --- components/GithubLogo.tsx | 26 +- components/Header.tsx | 61 +- components/InfoBox.tsx | 18 +- components/LanguageSelect.tsx | 11 +- components/Map/MapSVG.tsx | 2 - components/Map/PassportMap.tsx | 2 - components/ProgressBar.tsx | 2 +- components/Selector/Selector.tsx | 3 +- components/Selector/SelectorButton.tsx | 4 +- .../Selector/SelectorButtonContainer.tsx | 21 +- .../Selector/SelectorPassportContainer.tsx | 4 +- logic/percentageCalculation.ts | 2 +- logic/rankSorting/fetchSortData.ts | 19 +- .../individualVisaDurationCalculation.ts | 8 +- .../individualVisaPolicyCalculation.ts | 6 +- pages/404.tsx | 2 +- pages/_app.tsx | 13 +- pages/admin.tsx | 992 + pages/blog.tsx | 15 +- pages/blog/easiestcitizenship.tsx | 2 +- pages/elite.tsx | 253 + pages/faq.tsx | 25 +- pages/index.tsx | 21 +- pages/privacy.tsx | 2 +- pages/rank.tsx | 14 +- pages/table.tsx | 18 +- pages/visapolicy.tsx | 17 +- public/globereach-logo.svg | 16 + public/visaDuration.json | 106535 +++++++-------- public/visaPolicy.json | 106535 +++++++-------- styles/Rank.module.css | 20 +- styles/globals.css | 27 +- 32 files changed, 107540 insertions(+), 107156 deletions(-) create mode 100644 pages/admin.tsx create mode 100644 pages/elite.tsx create mode 100644 public/globereach-logo.svg diff --git a/components/GithubLogo.tsx b/components/GithubLogo.tsx index f6095fae..4bbeede4 100644 --- a/components/GithubLogo.tsx +++ b/components/GithubLogo.tsx @@ -1,19 +1,35 @@ import Image from 'next/image' -import logo from '../public/github-mark-white.svg' +import Link from 'next/link' +import logo from '../public/globereach-logo.svg' -const GithubLogo:React.FC = () => { +const GlobeReachLogo:React.FC = () => { return (
- {'Github'}/ + + {'GlobeReach'}/ + GlobeReach +
) } -export default GithubLogo \ No newline at end of file +export default GlobeReachLogo \ No newline at end of file diff --git a/components/Header.tsx b/components/Header.tsx index 08567235..53a137a9 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,15 +1,15 @@ import { useMemo, useContext } from 'react' import { DimensionsContext } from '../logic/context/DimensionsContext' import { Stack, createTheme, ThemeProvider } from '@mui/material' -import GithubLogo from './GithubLogo' +import GlobeReachLogo from './GithubLogo' import Link from 'next/link' import { useRouter } from 'next/router' import LanguageSelect from './LanguageSelect' -const headerEN:string[] = ['map','table','rank','visa','blog','faq'] -const headerES:string[] = ['mapa','tabla','rango','visado','blog','faq'] -const headerPT:string[] = ['mapa','tabela','classe','visado','blog','faq'] -const headerFR:string[] = ['carte','tableau','rang','visa','blog','faq'] -const headerHR:string[] = ['karta','tablica','rang','viza','blog','faq'] +const headerEN:string[] = ['map','rank','visa','the elite','blog','faq'] +const headerES:string[] = ['mapa','rango','visado','la élite','blog','faq'] +const headerPT:string[] = ['mapa','classe','visado','a elite','blog','faq'] +const headerFR:string[] = ['carte','rang','visa','l\'élite','blog','faq'] +const headerHR:string[] = ['karta','rang','viza','elita','blog','faq'] interface Props { language:string; setLanguage:Function; @@ -59,55 +59,54 @@ const Header:React.FC = ({ language, setLanguage }) => { position: fixed; left: 0px; top: 0px; - height: 40px; + height: 44px; width: 100%; - background-color: #111111; + background: linear-gradient(135deg, #0A0F1C 0%, #131B2E 100%); z-index: 2; - } - .screenshot { - top: 13px; - right: 550px; - position: absolute; - color: #FFFFFF; + border-bottom: 1px solid rgba(0,212,170,0.15); } .map { - ${(pathname === '/') && 'text-decoration: underline;'} - } - .table { - ${(pathname.includes('/table')) && 'text-decoration: underline;'} + ${(pathname === '/') && 'color: #00D4AA !important; font-weight: 600;'} } .rank { - ${(pathname.includes('/rank')) && 'text-decoration: underline;'} + ${(pathname.includes('/rank')) && 'color: #00D4AA !important; font-weight: 600;'} } .visapolicy { - ${(pathname.includes('/visapolicy')) && 'text-decoration: underline;'} + ${(pathname.includes('/visapolicy')) && 'color: #00D4AA !important; font-weight: 600;'} + } + .elite { + ${(pathname.includes('/elite')) && 'color: #00D4AA !important; font-weight: 600;'} } .blog { - ${(pathname.includes('/blog')) && 'text-decoration: underline;'} + ${(pathname.includes('/blog')) && 'color: #00D4AA !important; font-weight: 600;'} } .faq { - ${(pathname.includes('/faq')) && 'text-decoration: underline;'} + ${(pathname.includes('/faq')) && 'color: #00D4AA !important; font-weight: 600;'} } p { - color: #FFFFFF; + color: rgba(255,255,255,0.8); text-decoration: none; + font-size: 14px; + letter-spacing: 0.5px; + text-transform: uppercase; + transition: color 0.2s ease; } p:visited { - color: #FFFFFF; + color: rgba(255,255,255,0.8); text-decoration: none; } p:hover { - color: #FFFFFF; - text-decoration: underline; + color: #00D4AA; + text-decoration: none; } `} - - {dimensions.width > 800 && } + + {dimensions.width > 800 && }

{'/' + languageCaculation[0] + '/'}

-

{'/' + languageCaculation[1] + '/'}

-

{'/' + languageCaculation[2] + '/'}

-

{'/' + languageCaculation[3] + '/'}

+

{'/' + languageCaculation[1] + '/'}

+

{'/' + languageCaculation[2] + '/'}

+

{'/' + languageCaculation[3] + '/'}

{'/' + languageCaculation[4] + '/'}

{dimensions.width > 800 &&

{'/' + languageCaculation[5] + '/'}

} = ({ language, setLanguage }) => { .language-select { height: 30px; padding: 5px; - background-color: #000; - color: #fff; - border: 1px solid #fff; + background-color: #0A0F1C; + color: rgba(255,255,255,0.8); + border: 1px solid rgba(0,212,170,0.3); border-radius: 5px; font-size: 14px; appearance: none; background-position-x: calc(100% - 10px); background-position-y: center; + transition: border-color 0.2s ease; } .language-select:hover { - border-color: #ccc; + border-color: #00D4AA; } .language-select:focus { outline: none; - border-color: #ccc; + border-color: #00D4AA; } `} diff --git a/components/Map/MapSVG.tsx b/components/Map/MapSVG.tsx index a007ed38..af0dfd6a 100644 --- a/components/Map/MapSVG.tsx +++ b/components/Map/MapSVG.tsx @@ -1,7 +1,6 @@ import { useEffect, useContext, useRef, MutableRefObject } from 'react' import { DimensionsContext } from '../../logic/context/DimensionsContext' import Panzoom from 'panzoom' -import Abkhazia from '../countries/Abkhazia' import Afghanistan from '../countries/Afghanistan' import Albania from '../countries/Albania' import Algeria from '../countries/Algeria' @@ -456,7 +455,6 @@ const MapSVG:React.FC = ({ setHover, panzoomReset, priorityRef, diffRef, {/* Cutoff point, all country components below are rendered on top of the previous country components*/} - diff --git a/components/Map/PassportMap.tsx b/components/Map/PassportMap.tsx index 6a3cdf36..1808f680 100644 --- a/components/Map/PassportMap.tsx +++ b/components/Map/PassportMap.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useRef, useContext, MutableRefObject } from 'react' import { DimensionsContext } from '../../logic/context/DimensionsContext' import Panzoom from 'panzoom' -import Abkhazia from '../countries/Abkhazia' import Afghanistan from '../countries/Afghanistan' import Albania from '../countries/Albania' import Algeria from '../countries/Algeria' @@ -489,7 +488,6 @@ const MapSVG:React.FC = ({ setHover, selected, priorityRef, setCountrySel {/* Cutoff point, all country components below are rendered on top of the previous country components*/} - diff --git a/components/ProgressBar.tsx b/components/ProgressBar.tsx index 2e6ebdec..48bb401c 100644 --- a/components/ProgressBar.tsx +++ b/components/ProgressBar.tsx @@ -31,7 +31,7 @@ const ProgressBar:React.FC = ({ verticalColumn, width, height, color, per transformOrigin: 'center center', }, trail: { - stroke: '#222222', + stroke: '#1A2235', strokeLinecap: 'butt', transform: 'rotate(0.25turn)', transformOrigin: 'center center', diff --git a/components/Selector/Selector.tsx b/components/Selector/Selector.tsx index 44cc2a87..36586f31 100644 --- a/components/Selector/Selector.tsx +++ b/components/Selector/Selector.tsx @@ -26,7 +26,8 @@ interface Props { const CustomizedDrawer = styled(Drawer)` .MuiDrawer-paper { - background-color: #000000; + background-color: #0A0F1C; + border-left: 1px solid rgba(0,212,170,0.15); } ` diff --git a/components/Selector/SelectorButton.tsx b/components/Selector/SelectorButton.tsx index 5b5d1e92..aa910248 100644 --- a/components/Selector/SelectorButton.tsx +++ b/components/Selector/SelectorButton.tsx @@ -11,8 +11,8 @@ interface Props { num:number; } -const passportsArray:string[] = ['abkhazia','afghanistan','albania','algeria','andorra','angola','anguilla','antiguaAndBarbuda','argentina','armenia','australia','austria','azerbaijan','bahamas','bahrain','bangladesh','barbados','belarus','belgium','belize','benin','bermuda','bhutan','bolivia','bosniaAndHerzegovina','botswana','brazil','britishNationalOverseas','britishVirginIslands','brunei','bulgaria','burkinaFaso','burundi','cambodia','cameroon','canada','capeVerde','caymanIslands','centralAfricanRepublic','chad','chile','china','colombia','comoros','costaRica','croatia','cuba','cyprus','czechRepublic','democraticRepublicOfTheCongo','denmark','djibouti','dominica','dominicanRepublic','eastTimor','ecuador','egypt','elSalvador','equatorialGuinea','eritrea','estonia','eswatini','ethiopia','fiji','finland','france','gabon','gambia','georgia','germany','ghana','greece','grenada','guatemala','guinea','guineaBissau','guyana','haiti','honduras','hongKong','hungary','iceland','india','indonesia','iran','iraq','ireland','israel','italy','ivoryCoast','jamaica','japan','jordan','kazakhstan','kenya','kiribati','kosovo','kuwait','kyrgyzstan','laos','latvia','lebanon','lesotho','liberia','libya','liechtenstein','lithuania','luxembourg','macao','madagascar','malawi','malaysia','maldives','mali','malta','marshallIslands','mauritania','mauritius','mexico','micronesia','moldova','monaco','mongolia','montenegro','montserrat','morocco','mozambique','myanmar','namibia','nauru','nepal','netherlands','newZealand','nicaragua','niger','nigeria','northernCyprus','northKorea','northMacedonia','norway','oman','pakistan','palau','palestine','panama','papuaNewGuinea','paraguay','peru','philippines','poland','portugal','qatar','republicOfTheCongo','romania','russia','rwanda','saintHelena','saintKittsAndNevis','saintLucia','saintVincentAndTheGrenadines','samoa','sanMarino','saoTomeAndPrincipe','saudiArabia','senegal','serbia','seychelles','sierraLeone','singapore','slovakia','slovenia','solomonIslands','somalia','somaliland','southAfrica','southKorea','southOssetia','southSudan','sovereignMilitaryOrderOfMalta','spain','sriLanka','sudan','suriname','sweden','switzerland','syria','taiwan','tajikistan','tanzania','teudatMaavar','thailand','togo','tonga','trinidadAndTobago','tunisia','turkey','turkmenistan','turksAndCaicos','tuvalu','uganda','ukraine','unitedArabEmirates','unitedKingdom','unitedStates','uruguay','uzbekistan','vanuatu','vaticanCity','venezuela','vietnam','westernSahara','yemen','zambia','zimbabwe'] -const passportsArrayWithSpaces:string[] = ['abkhazia','afghanistan','albania','algeria','andorra','angola','anguilla','antigua and Barbuda','argentina','armenia','australia','austria','azerbaijan','bahamas','bahrain','bangladesh','barbados','belarus','belgium','belize','benin','bermuda','bhutan','bolivia','bosnia and Herzegovina','botswana','brazil','british National (Overseas)','british Virgin Islands','brunei','bulgaria','burkina Faso','burundi','cambodia','cameroon','canada','cape Verde','cayman Islands','central African Republic','chad','chile','china','colombia','comoros','costa Rica','croatia','cuba','cyprus','czech Republic','democratic Republic of the Congo','denmark','djibouti','dominica','dominican Republic','east Timor','ecuador','egypt','el Salvador','equatorial Guinea','eritrea','estonia','eswatini','ethiopia','fiji','finland','france','gabon','gambia','georgia','germany','ghana','greece','grenada','guatemala','guinea','guinea Bissau','guyana','haiti','honduras','hong Kong','hungary','iceland','india','indonesia','iran','iraq','ireland','israel','italy','ivory Coast','jamaica','japan','jordan','kazakhstan','kenya','kiribati','kosovo','kuwait','kyrgyzstan','laos','latvia','lebanon','lesotho','liberia','libya','liechtenstein','lithuania','luxembourg','macao','madagascar','malawi','malaysia','maldives','mali','malta','marshall Islands','mauritania','mauritius','mexico','micronesia','moldova','monaco','mongolia','montenegro','montserrat','morocco','mozambique','myanmar','namibia','nauru','nepal','netherlands','new Zealand','nicaragua','niger','nigeria','northern Cyprus','north Korea','north Macedonia','norway','oman','pakistan','palau','palestine','panama','papua New Guinea','paraguay','peru','philippines','poland','portugal','qatar','republic of the Congo','romania','russia','rwanda','saint Helena','saint Kitts and Nevis','saint Lucia','saint Vincent and the Grenadines','samoa','san Marino','sao Tome and Principe','saudi Arabia','senegal','serbia','seychelles','sierra Leone','singapore','slovakia','slovenia','solomon Islands','somalia','somaliland','south Africa','south Korea','south Ossetia','south Sudan','sovereign Military Order of Malta','spain','sri Lanka','sudan','suriname','sweden','switzerland','syria','taiwan','tajikistan','tanzania','teudat Maavar','thailand','togo','tonga','trinidad and Tobago','tunisia','turkey','turkmenistan','turks and Caicos','tuvalu','uganda','ukraine','united Arab Emirates','united Kingdom','united States','uruguay','uzbekistan','vanuatu','vatican City','venezuela','vietnam','western Sahara','yemen','zambia','zimbabwe'] +const passportsArray:string[] = ['afghanistan','albania','algeria','andorra','angola','anguilla','antiguaAndBarbuda','argentina','armenia','australia','austria','azerbaijan','bahamas','bahrain','bangladesh','barbados','belarus','belgium','belize','benin','bermuda','bhutan','bolivia','bosniaAndHerzegovina','botswana','brazil','britishNationalOverseas','britishVirginIslands','brunei','bulgaria','burkinaFaso','burundi','cambodia','cameroon','canada','capeVerde','caymanIslands','centralAfricanRepublic','chad','chile','china','colombia','comoros','costaRica','croatia','cuba','cyprus','czechRepublic','democraticRepublicOfTheCongo','denmark','djibouti','dominica','dominicanRepublic','eastTimor','ecuador','egypt','elSalvador','equatorialGuinea','eritrea','estonia','eswatini','ethiopia','fiji','finland','france','gabon','gambia','georgia','germany','ghana','greece','grenada','guatemala','guinea','guineaBissau','guyana','haiti','honduras','hongKong','hungary','iceland','india','indonesia','iran','iraq','ireland','israel','italy','ivoryCoast','jamaica','japan','jordan','kazakhstan','kenya','kiribati','kosovo','kuwait','kyrgyzstan','laos','latvia','lebanon','lesotho','liberia','libya','liechtenstein','lithuania','luxembourg','macao','madagascar','malawi','malaysia','maldives','mali','malta','marshallIslands','mauritania','mauritius','mexico','micronesia','moldova','monaco','mongolia','montenegro','montserrat','morocco','mozambique','myanmar','namibia','nauru','nepal','netherlands','newZealand','nicaragua','niger','nigeria','northernCyprus','northKorea','northMacedonia','norway','oman','pakistan','palau','palestine','panama','papuaNewGuinea','paraguay','peru','philippines','poland','portugal','qatar','republicOfTheCongo','romania','russia','rwanda','saintHelena','saintKittsAndNevis','saintLucia','saintVincentAndTheGrenadines','samoa','sanMarino','saoTomeAndPrincipe','saudiArabia','senegal','serbia','seychelles','sierraLeone','singapore','slovakia','slovenia','solomonIslands','somalia','somaliland','southAfrica','southKorea','southOssetia','southSudan','sovereignMilitaryOrderOfMalta','spain','sriLanka','sudan','suriname','sweden','switzerland','syria','taiwan','tajikistan','tanzania','teudatMaavar','thailand','togo','tonga','trinidadAndTobago','tunisia','turkey','turkmenistan','turksAndCaicos','tuvalu','uganda','ukraine','unitedArabEmirates','unitedKingdom','unitedStates','uruguay','uzbekistan','vanuatu','vaticanCity','venezuela','vietnam','westernSahara','yemen','zambia','zimbabwe'] +const passportsArrayWithSpaces:string[] = ['afghanistan','albania','algeria','andorra','angola','anguilla','antigua and Barbuda','argentina','armenia','australia','austria','azerbaijan','bahamas','bahrain','bangladesh','barbados','belarus','belgium','belize','benin','bermuda','bhutan','bolivia','bosnia and Herzegovina','botswana','brazil','british National (Overseas)','british Virgin Islands','brunei','bulgaria','burkina Faso','burundi','cambodia','cameroon','canada','cape Verde','cayman Islands','central African Republic','chad','chile','china','colombia','comoros','costa Rica','croatia','cuba','cyprus','czech Republic','democratic Republic of the Congo','denmark','djibouti','dominica','dominican Republic','east Timor','ecuador','egypt','el Salvador','equatorial Guinea','eritrea','estonia','eswatini','ethiopia','fiji','finland','france','gabon','gambia','georgia','germany','ghana','greece','grenada','guatemala','guinea','guinea Bissau','guyana','haiti','honduras','hong Kong','hungary','iceland','india','indonesia','iran','iraq','ireland','israel','italy','ivory Coast','jamaica','japan','jordan','kazakhstan','kenya','kiribati','kosovo','kuwait','kyrgyzstan','laos','latvia','lebanon','lesotho','liberia','libya','liechtenstein','lithuania','luxembourg','macao','madagascar','malawi','malaysia','maldives','mali','malta','marshall Islands','mauritania','mauritius','mexico','micronesia','moldova','monaco','mongolia','montenegro','montserrat','morocco','mozambique','myanmar','namibia','nauru','nepal','netherlands','new Zealand','nicaragua','niger','nigeria','northern Cyprus','north Korea','north Macedonia','norway','oman','pakistan','palau','palestine','panama','papua New Guinea','paraguay','peru','philippines','poland','portugal','qatar','republic of the Congo','romania','russia','rwanda','saint Helena','saint Kitts and Nevis','saint Lucia','saint Vincent and the Grenadines','samoa','san Marino','sao Tome and Principe','saudi Arabia','senegal','serbia','seychelles','sierra Leone','singapore','slovakia','slovenia','solomon Islands','somalia','somaliland','south Africa','south Korea','south Ossetia','south Sudan','sovereign Military Order of Malta','spain','sri Lanka','sudan','suriname','sweden','switzerland','syria','taiwan','tajikistan','tanzania','teudat Maavar','thailand','togo','tonga','trinidad and Tobago','tunisia','turkey','turkmenistan','turks and Caicos','tuvalu','uganda','ukraine','united Arab Emirates','united Kingdom','united States','uruguay','uzbekistan','vanuatu','vatican City','venezuela','vietnam','western Sahara','yemen','zambia','zimbabwe'] const SelectorButton:React.FC = ({ setOpenDrawer, selectRef, selectArrayRef, num }) => { diff --git a/components/Selector/SelectorButtonContainer.tsx b/components/Selector/SelectorButtonContainer.tsx index 47de6f89..0bdfc4fa 100644 --- a/components/Selector/SelectorButtonContainer.tsx +++ b/components/Selector/SelectorButtonContainer.tsx @@ -55,7 +55,8 @@ const SelectorButtonContainer:React.FC = ({ setOpenDrawer, selectRef, sel bottom: 0px; height: 110px; width: 100%; - background-color: #111111; + background: linear-gradient(0deg, #0A0F1C 0%, #0D1525 100%); + border-top: 1px solid rgba(0,212,170,0.15); } .text { position: fixed; @@ -63,9 +64,17 @@ const SelectorButtonContainer:React.FC = ({ setOpenDrawer, selectRef, sel color: #ffffff; } .button { - border-color: red; - background-color: red; + border: 1px solid rgba(255,80,80,0.6); + background-color: rgba(255,50,50,0.2); + color: #ff6b6b; + border-radius: 6px; + padding: 6px 12px; + cursor: pointer; user-select: none; + transition: background-color 0.2s ease; + } + .button:hover { + background-color: rgba(255,50,50,0.4); } .faq { position: absolute; @@ -83,12 +92,12 @@ const SelectorButtonContainer:React.FC = ({ setOpenDrawer, selectRef, sel } {renderSelectorButtons(selectorButtonArray)} + + + +
+ + {/* ========================= */} + {/* PASSPORT DATA SECTION */} + {/* ========================= */} + {activeTab === 'passport' && ( + <> + {/* Add New Entry Card */} +
+
+

{'Add Visa Policy Entry'}

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + setNewDuration(e.target.value)} + placeholder='90' + style={{ width: '90px' }} + /> +
+ +
+
+ + {/* Entries Table Card */} +
+
+

{'Visa Policy Entries'}

+ + {`${filteredEntries.length} of ${passportEntries.length} entries`} + +
+ + {/* Filters */} +
+ setFromFilter(e.target.value)} + style={{ flex: '1', minWidth: '180px' }} + /> + setToFilter(e.target.value)} + style={{ flex: '1', minWidth: '180px' }} + /> +
+ + {filteredEntries.length === 0 ? ( +
+

{passportEntries.length === 0 + ? 'No passport entries yet. Add one above to get started.' + : 'No entries match your filter criteria.' + }

+
+ ) : ( +
+ + + + + + + + + + + + {filteredEntries.map((entry, index) => { + const realIndex = passportEntries.indexOf(entry) + const isEditing = editingIndex === realIndex + const policyClass = 'policy-' + entry.policy.replace(/ /g, '-') + return ( + + + + + + + + ) + })} + +
{'From'}{'To'}{'Visa Policy'}{'Duration'}{'Actions'}
{entry.from}{entry.to} + {isEditing ? ( + + ) : ( + + {entry.policy} + + )} + + {isEditing ? ( + setEditDuration(e.target.value)} + style={{ width: '70px', padding: '6px 10px', fontSize: '0.8rem' }} + /> + ) : ( + {entry.duration ? `${entry.duration} days` : '-'} + )} + +
+ {isEditing ? ( + <> + + + + ) : ( + <> + + + + )} +
+
+
+ )} + +
+ + {passportSaveStatus && ( + {passportSaveStatus} + )} +
+
+ + )} + + {/* ========================= */} + {/* BLOG MANAGEMENT SECTION */} + {/* ========================= */} + {activeTab === 'blog' && ( + <> + {/* Blog Form */} + {showBlogForm && ( +
+

{editingPostId ? 'Edit Blog Post' : 'Create New Blog Post'}

+
+
+ + setBlogTitle(e.target.value)} + placeholder='Enter post title...' + /> +
+
+ + setBlogAuthor(e.target.value)} + placeholder='Author name...' + /> +
+
+
+ + setBlogDate(e.target.value)} + style={{ maxWidth: '220px' }} + /> +
+
+ +