cleanup: remove unused components to trigger deployment
Some checks failed
Deploy to Production / Build and Deploy (push) Has been cancelled
Some checks failed
Deploy to Production / Build and Deploy (push) Has been cancelled
This commit is contained in:
65
architectural-grid 10/src/components/SlashMenu.tsx
Normal file
65
architectural-grid 10/src/components/SlashMenu.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Heading1,
|
||||
Heading2,
|
||||
List,
|
||||
Quote,
|
||||
Code,
|
||||
Image as ImageIcon,
|
||||
Type,
|
||||
Sparkles
|
||||
} from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
|
||||
interface SlashMenuProps {
|
||||
position: { top: number; left: number };
|
||||
onSelect: (type: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const SlashMenu: React.FC<SlashMenuProps> = ({ position, onSelect, onClose }) => {
|
||||
const commands = [
|
||||
{ id: 'h1', label: 'Titre Principal', icon: <Heading1 size={14} />, desc: 'Grand titre de section' },
|
||||
{ id: 'h2', label: 'Sous-titre', icon: <Heading2 size={14} />, desc: 'Titre de niveau 2' },
|
||||
{ id: 'bullet', label: 'Liste à puces', icon: <List size={14} />, desc: 'Liste simple' },
|
||||
{ id: 'quote', label: 'Citation', icon: <Quote size={14} />, desc: 'Bloc de texte mis en avant' },
|
||||
{ id: 'code', label: 'Bloc de Code', icon: <Code size={14} />, desc: 'Code ou texte technique' },
|
||||
{ id: 'image', label: 'Image', icon: <ImageIcon size={14} />, desc: 'Insérer un visuel' },
|
||||
{ id: 'ai-summary', label: 'Résumé IA', icon: <Sparkles size={14} />, desc: 'Générer un résumé court', special: true },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 z-[60]" onClick={onClose} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 10 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 10 }}
|
||||
className="fixed z-[70] w-64 bg-white dark:bg-[#1A1A1A] border border-border shadow-2xl rounded-xl overflow-hidden py-2"
|
||||
style={{ top: position.top, left: position.left }}
|
||||
>
|
||||
<div className="px-3 py-2 text-[10px] font-bold text-concrete uppercase tracking-widest border-b border-border/40 mb-1">
|
||||
Commandes rapides
|
||||
</div>
|
||||
<div className="max-h-80 overflow-y-auto custom-scrollbar">
|
||||
{commands.map((cmd) => (
|
||||
<button
|
||||
key={cmd.id}
|
||||
onClick={() => onSelect(cmd.id)}
|
||||
className="w-full flex items-start gap-3 px-3 py-2 hover:bg-paper dark:hover:bg-white/5 transition-colors group text-left"
|
||||
>
|
||||
<div className={`p-2 rounded-lg border border-border transition-colors group-hover:border-ink/20
|
||||
${cmd.special ? 'bg-blueprint/10 text-blueprint border-blueprint/20' : 'bg-white/50 dark:bg-white/5 text-ink'}`}>
|
||||
{cmd.icon}
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-xs font-bold text-ink">{cmd.label}</p>
|
||||
<p className="text-[10px] text-muted-ink leading-tight">{cmd.desc}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user