zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

refactor(admin): replace inline SVGs with icon components and fix icon imports

Browse Source
This commit is contained in:
Hyko
2026-04-22 12:58:28 -04:00
parent 17065292b8
commit e00d6b3c42
3 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/themes/index.js
+2 -2
View File
@@ -1,7 +1,7 @@
'use client';
import { useState, useEffect } from 'react';
import { Sun01Icon, Moon02Icon, SunCloud02Icon, MoonCloudIcon } from '@zen/core/shared/icons';
import { Sun01Icon, Moon02Icon, SunCloud01Icon, MoonCloudIcon } from '@zen/core/shared/icons';
// Script à injecter dans <head> pour appliquer le thème avant le premier rendu (anti-FOUC).
export const THEME_INIT_SCRIPT = `(function(){try{var t=localStorage.getItem('theme'),d=window.matchMedia('(prefers-color-scheme: dark)').matches;if(t==='dark'||(!t&&d))document.documentElement.classList.add('dark');}catch(e){}})();`;
@@ -32,7 +32,7 @@ export function applyTheme(theme) {
}
export function getThemeIcon(theme, systemIsDark) {
if (theme === 'auto') return systemIsDark ? MoonCloudIcon : SunCloud02Icon;
if (theme === 'auto') return systemIsDark ? MoonCloudIcon : SunCloud01Icon;
return THEME_ICONS[theme];
}
src/features/admin/components/AdminHeader.js
+4 -6
View File
@@ -2,7 +2,7 @@
import { Fragment } from 'react';
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@zen/core/shared/icons';
import { ChevronDownIcon, User03Icon } from '@zen/core/shared/icons';
import { useRouter, usePathname } from 'next/navigation';
import { useTheme, getThemeIcon } from '@zen/core/themes';
@@ -139,7 +139,7 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<MenuItems className="absolute right-0 mt-4 w-44 sm:w-64 outline-none rounded-xl border border-black/8 dark:border-white/8 bg-neutral-50 dark:bg-black shadow-lg overflow-hidden z-50">
<MenuItems className="absolute right-0 mt-4 w-44 outline-none rounded-xl border border-black/8 dark:border-white/8 bg-neutral-50 dark:bg-black shadow-lg overflow-hidden z-50">
<div className="p-1.5 flex flex-col gap-0.5">
{/* Quick links — mobile only */}
{quickLinks.length > 0 && (
@@ -167,9 +167,7 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
href="/admin/profile"
className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] text-neutral-500 dark:text-neutral-400 transition-colors duration-[120ms] ease-out data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
>
<svg className="w-[12px] h--[12px] shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<User03Icon />
Mon profil
</a>
</MenuItem>
@@ -189,7 +187,7 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
<MenuItem>
<button
onClick={handleLogout}
className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] text-neutral-500 dark:text-neutral-400 transition-colors duration-150 text-left data-focus:bg-red-50 dark:data-focus:bg-red-500/10 data-focus:text-red-500 dark:data-focus:text-red-400"
className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] text-red-500 dark:text-red-400 transition-colors duration-150 text-left data-focus:bg-red-50 dark:data-focus:bg-red-500/10"
>
<svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
src/shared/Icons.js
+18 -13
View File
@@ -381,29 +381,29 @@ export const ArrowDown01Icon = (props) => (
);
export const Moon02Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
<path d="M21.5 14.0784C20.3003 14.7189 18.9301 15.0821 17.4751 15.0821C12.7491 15.0821 8.91792 11.2509 8.91792 6.52485C8.91792 5.06986 9.28105 3.69968 9.92163 2.5C5.66765 3.49698 2.5 7.31513 2.5 11.8731C2.5 17.1899 6.8101 21.5 12.1269 21.5C16.6849 21.5 20.503 18.3324 21.5 14.0784Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M10.5163 2.04296C10.6958 2.27649 10.722 2.59345 10.5832 2.85326C9.99927 3.9469 9.66792 5.19607 9.66792 6.52485C9.66792 10.8367 13.1633 14.3321 17.4751 14.3321C18.8039 14.3321 20.0531 14.0007 21.1467 13.4168C21.4065 13.278 21.7235 13.3042 21.957 13.4837C22.1906 13.6632 22.2974 13.9627 22.2302 14.2495C21.1556 18.8349 17.0409 22.25 12.1269 22.25C6.39589 22.25 1.75 17.6041 1.75 11.8731C1.75 6.95906 5.16505 2.84445 9.7505 1.76979C10.0373 1.70258 10.3368 1.80944 10.5163 2.04296Z" fill="currentColor"></path>
</svg>
);
export const Sun01Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
<path d="M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z" stroke="currentColor" strokeWidth="2"></path>
<path d="M11.9955 3H12.0045M11.9961 21H12.0051M18.3588 5.63599H18.3678M5.63409 18.364H5.64307M5.63409 5.63647H5.64307M18.3582 18.3645H18.3672M20.991 12.0006H21M3 12.0006H3.00898" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M11.9991 17.75C15.1747 17.75 17.7491 15.1756 17.7491 12C17.7491 8.82436 15.1747 6.25 11.9991 6.25C8.82345 6.25 6.24908 8.82436 6.24908 12C6.24908 15.1756 8.82345 17.75 11.9991 17.75Z" fill="currentColor"></path>
<path d="M11.999 19.75C12.5513 19.75 12.999 20.1977 12.999 20.75C12.999 21.3023 12.5513 21.75 11.999 21.75C11.4468 21.7499 10.999 21.3022 10.999 20.75C10.999 20.1978 11.4468 19.7501 11.999 19.75ZM17.5557 17.4111C17.9222 17.1122 18.4518 17.1122 18.8184 17.4111L18.8945 17.4805L18.9629 17.5557C19.2834 17.9484 19.2606 18.5284 18.8945 18.8945C18.504 19.2851 17.87 19.2851 17.4795 18.8945C17.0892 18.5041 17.0894 17.871 17.4795 17.4805L17.5557 17.4111ZM5.18066 17.4111C5.54732 17.1118 6.07666 17.1119 6.44336 17.4111L6.51953 17.4795L6.58789 17.5557C6.90807 17.9483 6.88538 18.5275 6.51953 18.8936C6.12905 19.284 5.496 19.2839 5.10547 18.8936C4.71494 18.503 4.71494 17.87 5.10547 17.4795L5.18066 17.4111ZM21.75 12C21.75 12.5523 21.3023 13 20.75 13C20.1977 13 19.75 12.5523 19.75 12C19.75 11.4477 20.1977 11 20.75 11C21.3023 11 21.75 11.4477 21.75 12ZM5.10547 5.10547C5.49592 4.7151 6.12901 4.71521 6.51953 5.10547C6.91003 5.49597 6.90999 6.129 6.51953 6.51953C6.12901 6.91005 5.49599 6.91005 5.10547 6.51953C4.71519 6.12899 4.71503 5.49591 5.10547 5.10547ZM17.4795 5.10547C17.8699 4.71501 18.503 4.71514 18.8936 5.10547C19.2841 5.49599 19.2841 6.12901 18.8936 6.51953C18.503 6.90996 17.87 6.91002 17.4795 6.51953C17.0892 6.12902 17.0891 5.49594 17.4795 5.10547ZM12.1016 2.25488C12.606 2.30591 13 2.7321 13 3.25C13 3.80218 12.5521 4.24983 12 4.25C11.4823 4.25 11.0562 3.85665 11.0049 3.35254L11 3.25L11.0049 3.14746C11.0562 2.64335 11.4823 2.25 12 2.25L12.1016 2.25488ZM4.25 12C4.25 12.5523 3.80228 13 3.25 13C2.69771 13 2.25 12.5523 2.25 12C2.25 11.4477 2.69772 11 3.25 11C3.80228 11 4.25 11.4477 4.25 12Z" fill="currentColor"></path>
</svg>
);
export const MoonCloudIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
<path d="M17.4776 12.0001C17.485 12 17.4925 12 17.5 12C19.9853 12 22 14.0147 22 16.5C22 18.9853 19.9853 21 17.5 21H7C4.23858 21 2 18.7614 2 16C2 13.4003 3.98398 11.2641 6.52042 11.0227M17.4776 12.0001C17.4924 11.8354 17.5 11.6686 17.5 11.5C17.5 8.46243 15.0376 6 12 6C9.12324 6 6.76233 8.20862 6.52042 11.0227M17.4776 12.0001C17.3753 13.1345 16.9286 14.1696 16.2428 15M6.52042 11.0227C6.67826 11.0077 6.83823 11 7 11C8.12582 11 9.16474 11.3721 10.0005 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
<path d="M11 5.53058C10.9061 5.04705 10.7328 4.5707 10.4752 4.12013C9.85932 3.04292 8.87603 2.31347 7.77746 2C7.94723 3.37965 7.30486 4.79173 6.03759 5.53058C4.77033 6.26942 3.23814 6.12516 2.13984 5.28687C1.85939 6.40434 1.99332 7.62899 2.6092 8.7062C3.44206 10.1629 4.94685 10.9839 6.5 11" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"></path>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M1.37498 16.625C1.37498 13.842 3.35162 11.5214 5.97798 10.9895C6.51229 8.07956 9.06083 5.875 12.125 5.875C15.5108 5.875 18.2677 8.56724 18.3719 11.9277C20.9176 12.2903 22.875 14.4791 22.875 17.125C22.875 20.0245 20.5245 22.375 17.625 22.375H7.12498C3.94934 22.375 1.37498 19.8006 1.37498 16.625Z" fill="currentColor" />
<path d="M3.60235 8.83488C3.35216 8.39727 3.20336 7.92884 3.14882 7.45682C4.2892 7.78584 5.55651 7.66651 6.66629 7.01948C7.77558 6.37274 8.50844 5.32681 8.79433 4.16956C9.16398 4.45033 9.48526 4.80976 9.73209 5.24148C9.90943 5.55165 10.0353 5.87623 10.1132 6.20586C10.7335 5.99507 11.3977 5.87908 12.0885 5.87512C11.9705 5.31677 11.7652 4.76801 11.4684 4.24881C10.7187 2.93759 9.51825 2.04614 8.17688 1.6634C7.8544 1.57138 7.50728 1.64713 7.25245 1.86511C6.99762 2.0831 6.86902 2.41431 6.90997 2.74714C7.03309 3.74774 6.56556 4.76312 5.65894 5.29169C4.7544 5.81906 3.65982 5.71859 2.87159 5.11697C2.60422 4.9129 2.25218 4.85691 1.9347 4.96796C1.61721 5.07901 1.37682 5.34223 1.29495 5.66846C0.954296 7.02578 1.11669 8.5168 1.86609 9.82755C2.36903 10.7072 3.07404 11.3973 3.88823 11.8721C4.50851 11.4489 5.21593 11.1439 5.97806 10.9896C6.00386 10.8491 6.03435 10.7102 6.06937 10.5732C5.07004 10.3992 4.15103 9.79456 3.60235 8.83488Z" fill="currentColor" />
</svg>
);
export const SunCloud02Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
<path d="M17.4776 12.0001C17.485 12 17.4925 12 17.5 12C19.9853 12 22 14.0147 22 16.5C22 18.9853 19.9853 21 17.5 21H7C4.23858 21 2 18.7614 2 16C2 13.4003 3.98398 11.2641 6.52042 11.0227M17.4776 12.0001C17.4924 11.8354 17.5 11.6686 17.5 11.5C17.5 8.46243 15.0376 6 12 6C9.12324 6 6.76233 8.20862 6.52042 11.0227M17.4776 12.0001C17.3753 13.1345 16.9286 14.1696 16.2428 15M6.52042 11.0227C6.67826 11.0077 6.83823 11 7 11C8.12582 11 9.16474 11.3721 10.0005 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
<path d="M2.95939 10.1937C2.21865 7.47179 3.85922 4.67397 6.6237 3.94463M2.95939 10.1937L2 10.4468M2.95939 10.1937C3.14359 10.8706 3.4577 11.479 3.86823 12M6.6237 3.94463L6.36663 3M6.6237 3.94463C8.66673 3.40563 10.7518 4.14719 12 5.66961M3.4765 6.32297L2.4644 5.74628M11.1407 3.45725L10.557 4.45494" stroke="currentColor" strokeWidth="2" strokeLinecap="round"></path>
export const SunCloud01Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M1.375 15.125C1.375 12.342 3.35164 10.0214 5.978 9.48954C6.51231 6.57956 9.06085 4.375 12.125 4.375C15.5108 4.375 18.2678 7.06724 18.3719 10.4277C20.9177 10.7903 22.875 12.9791 22.875 15.625C22.875 18.5245 20.5245 20.875 17.625 20.875H7.125C3.94936 20.875 1.375 18.3006 1.375 15.125Z" fill="currentColor" />
<path d="M3.125 7.98179C3.125 6.40086 4.40141 5.125 5.96888 5.125C6.74917 5.125 7.45701 5.44017 7.97224 5.95404C8.47713 5.50479 9.05535 5.1362 9.68671 4.86845C8.79983 3.80488 7.46405 3.125 5.96888 3.125C3.29052 3.125 1.125 5.30262 1.125 7.98179C1.125 9.37511 1.71096 10.632 2.64756 11.517C3.07158 10.9915 3.58625 10.5422 4.16783 10.1928C3.53021 9.66805 3.125 8.8729 3.125 7.98179Z" fill="currentColor" />
</svg>
);
@@ -566,4 +566,9 @@ export const CloudIcon = (props) => (
</svg>
);
export const User03Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M7.25 7C7.25 4.37665 9.37665 2.25 12 2.25C14.6234 2.25 16.75 4.37665 16.75 7C16.75 9.62335 14.6234 11.75 12 11.75C9.37665 11.75 7.25 9.62335 7.25 7Z" fill="currentColor"></path>
<path d="M4.25 19C4.25 15.8244 6.82436 13.25 10 13.25H14C17.1756 13.25 19.75 15.8244 19.75 19C19.75 20.5188 18.5188 21.75 17 21.75H7C5.48122 21.75 4.25 20.5188 4.25 19Z" fill="currentColor"></path>
</svg>
);