mirror of
https://github.com/R0m1k3/Menu.git
synced 2026-10-11 17:28:28 +02:00
feat: add global styles and reusable glassmorphism component modules
This commit is contained in:
Michael committed
1 parent
0bfed1adf2
commit
b1a411bfdc
12 files changed
+1188
-537
No files matched your search
+140
-40
@@ -4,16 +4,18 @@ import React, { useState } from 'react';
|
||||
import { addButton } from '@/app/actions/admin';
|
||||
import { IconPicker } from '@/components/IconPicker';
|
||||
import { serializeIcon } from '@/lib/lucideIcons';
|
||||
import { PlusCircle } from 'lucide-react';
|
||||
import { PlusCircle, Check } from 'lucide-react';
|
||||
|
||||
export function AddButtonForm() {
|
||||
const [iconName, setIconName] = useState('Globe');
|
||||
const [iconColor, setIconColor] = useState('#22d3ee');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setSuccess(false);
|
||||
const formData = new FormData(e.currentTarget);
|
||||
formData.set('icon', serializeIcon(iconName, iconColor));
|
||||
try {
|
||||
@@ -21,6 +23,8 @@ export function AddButtonForm() {
|
||||
(e.target as HTMLFormElement).reset();
|
||||
setIconName('Globe');
|
||||
setIconColor('#22d3ee');
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 2000);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -33,29 +37,90 @@ export function AddButtonForm() {
|
||||
background: 'var(--card-bg)',
|
||||
backdropFilter: 'blur(24px)',
|
||||
WebkitBackdropFilter: 'blur(24px)',
|
||||
border: '1px solid var(--card-border)',
|
||||
border: '1.5px solid var(--card-border)',
|
||||
borderRadius: '20px',
|
||||
padding: '1.75rem',
|
||||
marginBottom: '2rem',
|
||||
padding: 'clamp(1.5rem, 3vw, 2rem)',
|
||||
marginBottom: 'clamp(1.5rem, 3vw, 2.5rem)',
|
||||
transition: 'all 300ms ease',
|
||||
animation: 'fadeInUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both',
|
||||
}}>
|
||||
<style>{`
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes successPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.add-btn {
|
||||
padding: 0.8rem 1.4rem;
|
||||
background: var(--success);
|
||||
border: 1.5px solid var(--success);
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
whiteSpace: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, box-shadow;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.add-btn:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 30px rgba(50, 215, 75, 0.3);
|
||||
background: #38e55f;
|
||||
}
|
||||
.add-btn:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.add-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.add-btn.success {
|
||||
animation: successPulse 400ms ease;
|
||||
background: var(--success);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
fontSize: 'clamp(0.75rem, 1.5vw, 0.8rem)',
|
||||
fontWeight: 800,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '1.25rem',
|
||||
letterSpacing: '0.08em',
|
||||
marginBottom: 'clamp(1rem, 2vw, 1.5rem)',
|
||||
letterSpacing: '0.09em',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
gap: '0.6rem',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
<PlusCircle size={14} /> AJOUTER UNE APPLICATION
|
||||
<PlusCircle size={14} strokeWidth={2} /> Ajouter une application
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||
<form onSubmit={handleSubmit} style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'auto 1fr 2fr auto',
|
||||
gap: 'clamp(0.75rem, 2vw, 1rem)',
|
||||
alignItems: 'flex-end',
|
||||
}}>
|
||||
{/* Icon picker */}
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
|
||||
ICÔNE
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '0.6rem',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
Icône
|
||||
</label>
|
||||
<IconPicker
|
||||
iconName={iconName}
|
||||
@@ -66,46 +131,81 @@ export function AddButtonForm() {
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div style={{ flex: '1 1 140px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
|
||||
NOM
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '0.6rem',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
Nom
|
||||
</label>
|
||||
<input name="name" type="text" placeholder="Ex: Slack, Notion…" required />
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Ex: Slack, Notion, Figma…"
|
||||
required
|
||||
style={{ fontSize: '0.92rem' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL */}
|
||||
<div style={{ flex: '2 1 240px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '0.6rem',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
URL
|
||||
</label>
|
||||
<input name="url" type="url" placeholder="https://…" required />
|
||||
<input
|
||||
name="url"
|
||||
type="url"
|
||||
placeholder="https://app.example.com"
|
||||
required
|
||||
style={{ fontSize: '0.92rem' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
className="add-btn"
|
||||
className={`add-btn ${success ? 'success' : ''}`}
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: 'var(--accent-btn-hover)',
|
||||
border: '1px solid var(--card-border)',
|
||||
color: 'var(--fg)',
|
||||
padding: '0.78rem 1.25rem',
|
||||
borderRadius: '12px',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.88rem',
|
||||
cursor: 'pointer',
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
transition: 'all 200ms ease',
|
||||
opacity: loading ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
{loading ? '…' : 'Ajouter →'}
|
||||
{loading ? (
|
||||
<span>…</span>
|
||||
) : success ? (
|
||||
<>
|
||||
<Check size={16} strokeWidth={2} /> Ajouté
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlusCircle size={16} strokeWidth={2} /> Ajouter
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<style>{`
|
||||
.add-btn:hover { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
|
||||
`}</style>
|
||||
</form>
|
||||
|
||||
{/* Responsive */}
|
||||
<style>{`
|
||||
@media (max-width: 768px) {
|
||||
form {
|
||||
grid-template-columns: auto 1fr !important;
|
||||
}
|
||||
.add-btn {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user