Michael/Menu
1
0 Fork 0
mirror of https://github.com/R0m1k3/Menu.git synced 2026-10-11 17:28:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement admin authentication pages and reusable UI components including GlassCard, IconPicker, and ThemeToggle

Browse Source
This commit is contained in:
Michael committed 2026-04-10 11:37:44 +02:00
1 parent 229b3525d3
commit d253eff0fa
9 files changed
+133 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/AddButtonForm.tsx
+15 -9
View File
@@ -28,10 +28,12 @@ export function AddButtonForm() {
return (
<div style={{
background: 'rgba(255,255,255,0.07)',
position: 'relative',
zIndex: 50,
background: 'var(--card-bg)',
backdropFilter: 'blur(24px)',
WebkitBackdropFilter: 'blur(24px)',
border: '1px solid rgba(255,255,255,0.12)',
border: '1px solid var(--card-border)',
borderRadius: '20px',
padding: '1.75rem',
marginBottom: '2rem',
@@ -39,7 +41,7 @@ export function AddButtonForm() {
<h2 style={{
fontSize: '0.78rem',
fontWeight: 700,
color: 'rgba(255,255,255,0.4)',
color: 'var(--fg-muted)',
marginBottom: '1.25rem',
letterSpacing: '0.08em',
display: 'flex',
@@ -52,7 +54,7 @@ export function AddButtonForm() {
<form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
{/* Icon picker */}
<div>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
ICÔNE
</label>
<IconPicker
@@ -65,7 +67,7 @@ export function AddButtonForm() {
{/* Name */}
<div style={{ flex: '1 1 140px' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
NOM
</label>
<input name="name" type="text" placeholder="Ex: Slack, Notion…" required />
@@ -73,19 +75,20 @@ export function AddButtonForm() {
{/* URL */}
<div style={{ flex: '2 1 240px' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'rgba(255,255,255,0.4)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
URL
</label>
<input name="url" type="url" placeholder="https://…" required />
</div>
<button
className="add-btn"
type="submit"
disabled={loading}
style={{
background: 'rgba(255,255,255,0.14)',
border: '1px solid rgba(255,255,255,0.2)',
color: '#fff',
background: 'var(--accent-btn-hover)',
border: '1px solid var(--card-border)',
color: 'var(--fg)',
padding: '0.78rem 1.25rem',
borderRadius: '12px',
fontWeight: 600,
@@ -99,6 +102,9 @@ export function AddButtonForm() {
>
{loading ? '…' : 'Ajouter →'}
</button>
<style>{`
.add-btn:hover { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
`}</style>
</form>
</div>
);
components/AdminButtonRow.tsx
+2
View File
@@ -55,6 +55,8 @@ export function AdminButtonRow({ button }: AdminButtonRowProps) {
if (isEditing) {
return (
<div style={{
position: 'relative',
zIndex: 40,
background: 'var(--card-bg)',
backdropFilter: 'blur(20px)',
border: '1px solid var(--card-hover-border)',
components/GlassCard.module.css
+8 -6
View File
@@ -1,15 +1,17 @@
.card {
background: var(--glass-bg);
backdrop-filter: blur(24px) saturate(1.8);
-webkit-backdrop-filter: blur(24px) saturate(1.8);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
background: var(--card-bg);
backdrop-filter: blur(28px) saturate(1.8);
-webkit-backdrop-filter: blur(28px) saturate(1.8);
border: 1px solid var(--card-border);
box-shadow: var(--card-shadow);
border-radius: 20px;
transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hoverable:hover {
box-shadow: var(--glass-hover-shadow);
background: var(--card-hover-bg);
border-color: var(--card-hover-border);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
components/IconPicker.tsx
+28 -20
View File
@@ -26,24 +26,28 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
<div style={{ position: 'relative' }}>
{/* Trigger */}
<button
className="icon-picker-trigger"
type="button"
onClick={() => setOpen(!open)}
title="Choisir une icône"
style={{
width: '56px', height: '56px',
borderRadius: '14px',
background: 'rgba(255,255,255,0.08)',
border: '1px solid rgba(255,255,255,0.15)',
background: 'var(--card-bg)',
border: '1px solid var(--card-border)',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
transition: 'background 200ms ease',
transition: 'all 200ms ease',
}}
>
<SelectedIcon size={28} color={color} strokeWidth={1.8} />
</button>
<style>{`
.icon-picker-trigger:hover { background: var(--card-hover-bg) !important; border-color: var(--card-hover-border) !important; transform: scale(1.05); }
`}</style>
{/* Picker panel */}
{open && (
@@ -59,17 +63,17 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
left: 0,
zIndex: 100,
width: '320px',
background: 'rgba(25, 5, 35, 0.95)',
background: 'var(--bg-color)',
backdropFilter: 'blur(30px)',
WebkitBackdropFilter: 'blur(30px)',
border: '1px solid rgba(255,255,255,0.12)',
border: '1px solid var(--card-border)',
borderRadius: '18px',
padding: '1.1rem',
boxShadow: '0 20px 60px rgba(0,0,0,0.6)',
boxShadow: 'var(--card-shadow)',
}}>
{/* Search */}
<div style={{ position: 'relative', marginBottom: '0.85rem' }}>
<Search size={14} color="rgba(255,255,255,0.4)" style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)' }} />
<Search size={14} color="var(--fg-muted)" style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)' }} />
<input
type="text"
placeholder="Rechercher…"
@@ -81,7 +85,7 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
</div>
{/* Icon grid */}
<div style={{
<div className="icon-grid" style={{
display: 'grid',
gridTemplateColumns: 'repeat(7, 1fr)',
gap: '4px',
@@ -95,38 +99,41 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
return (
<button
key={name}
className={`icon-btn ${isSelected ? 'selected' : ''}`}
type="button"
title={name}
onClick={() => { onIconChange(name); }}
style={{
background: isSelected ? 'rgba(255,255,255,0.18)' : 'transparent',
border: isSelected ? '1px solid rgba(255,255,255,0.3)' : '1px solid transparent',
background: isSelected ? 'var(--accent-btn-hover)' : 'transparent',
border: isSelected ? '1px solid var(--card-border)' : '1px solid transparent',
borderRadius: '8px',
padding: '6px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background 120ms',
transition: 'all 120ms',
}}
onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; }}
onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = 'transparent'; }}
>
<Icon size={18} color={isSelected ? color : 'rgba(255,255,255,0.65)'} strokeWidth={1.7} />
<Icon size={18} color={isSelected ? color : 'var(--fg-secondary)'} strokeWidth={1.7} />
</button>
);
})}
<style>{`
.icon-btn:hover:not(.selected) { background: var(--accent-btn-bg) !important; }
`}</style>
</div>
{/* Color palette */}
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: '0.85rem' }}>
<p style={{ fontSize: '0.7rem', color: 'rgba(255,255,255,0.35)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: '0.6rem' }}>
<div style={{ borderTop: '1px solid var(--card-border)', paddingTop: '0.85rem' }}>
<p style={{ fontSize: '0.7rem', color: 'var(--fg-muted)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: '0.6rem' }}>
COULEUR
</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
{ICON_COLORS.map((c) => (
<button
key={c.value}
className="color-btn"
type="button"
title={c.label}
onClick={() => onColorChange(c.value)}
@@ -135,16 +142,17 @@ export function IconPicker({ iconName, color, onIconChange, onColorChange }: Ico
borderRadius: '50%',
background: c.value,
border: color === c.value
? '2px solid white'
? `2px solid var(--fg)`
: '2px solid transparent',
boxShadow: color === c.value ? '0 0 0 2px rgba(255,255,255,0.3)' : 'none',
boxShadow: color === c.value ? `0 0 0 2px var(--card-border)` : 'none',
cursor: 'pointer',
transition: 'transform 150ms',
}}
onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.15)')}
onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
/>
))}
<style>{`
.color-btn:hover { transform: scale(1.15) !important; }
`}</style>
</div>
</div>
</div>
components/ThemeToggle.tsx
+7 -5
View File
@@ -17,10 +17,10 @@ export function ThemeToggle() {
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
aria-label="Basculer le thème"
style={{
background: 'rgba(255,255,255,0.12)',
background: 'var(--card-bg)',
backdropFilter: 'blur(16px)',
WebkitBackdropFilter: 'blur(16px)',
border: '1px solid rgba(255,255,255,0.18)',
border: '1px solid var(--card-border)',
borderRadius: '50%',
width: '38px',
height: '38px',
@@ -28,12 +28,14 @@ export function ThemeToggle() {
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'background 260ms ease',
transition: 'all 260ms ease',
}}
onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--card-hover-bg)'; e.currentTarget.style.borderColor = 'var(--card-hover-border)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--card-bg)'; e.currentTarget.style.borderColor = 'var(--card-border)'; }}
>
{theme === 'dark'
? <Sun size={15} color="rgba(255,255,255,0.85)" />
: <Moon size={15} color="rgba(255,255,255,0.85)" />
? <Sun size={15} color="var(--fg-secondary)" />
: <Moon size={15} color="var(--fg-secondary)" />
}
</button>
);