74 lines
4.0 KiB
TypeScript
74 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '../../common/Button';
|
|
import { URLS } from '@/lib/config/constants';
|
|
|
|
// Fonction utilitaire simple pour combiner les classes
|
|
const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {
|
|
return classes.filter(Boolean).join(' ');
|
|
};
|
|
|
|
interface ActionButtonsProps {
|
|
scrolled?: boolean;
|
|
languageSwitcher: React.ReactElement;
|
|
className?: string;
|
|
}
|
|
|
|
export const ActionButtons: React.FC<ActionButtonsProps> = ({
|
|
scrolled = false,
|
|
languageSwitcher,
|
|
className
|
|
}) => {
|
|
return (
|
|
<div className={mergeClasses(
|
|
'hidden md:flex items-center space-x-3',
|
|
className
|
|
)}>
|
|
{/* Sélecteur de langue moderne */}
|
|
<div className="relative">
|
|
{languageSwitcher}
|
|
</div>
|
|
|
|
{/* Bouton Discord moderne */}
|
|
<button
|
|
onClick={() => window.open(URLS.social.discord, '_blank')}
|
|
className={mergeClasses(
|
|
// Base styles
|
|
'inline-flex items-center px-4 py-2.5 text-sm font-medium',
|
|
'bg-indigo-600 text-white rounded-xl border border-indigo-500/20',
|
|
'transition-all duration-200 ease-in-out',
|
|
'hover:bg-indigo-700 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-500/25',
|
|
'focus:outline-none focus:ring-2 focus:ring-indigo-400/50',
|
|
'active:scale-[0.98]',
|
|
|
|
// Mobile adaptation
|
|
'hidden lg:flex'
|
|
)}
|
|
aria-label="Rejoindre notre Discord"
|
|
>
|
|
<svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
|
</svg>
|
|
Discord
|
|
</button>
|
|
|
|
{/* Version icon seulement pour les écrans moyens */}
|
|
<button
|
|
onClick={() => window.open(URLS.social.discord, '_blank')}
|
|
className={mergeClasses(
|
|
'flex lg:hidden items-center justify-center w-10 h-10',
|
|
'bg-indigo-600 text-white rounded-xl border border-indigo-500/20',
|
|
'transition-all duration-200 ease-in-out',
|
|
'hover:bg-indigo-700 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-500/25',
|
|
'focus:outline-none focus:ring-2 focus:ring-indigo-400/50',
|
|
'active:scale-[0.98]'
|
|
)}
|
|
aria-label="Rejoindre Discord"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|