streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maj countries + cover annuaire details
Some checks failed
Build and Push App / build (push) Failing after 53m38s
Details

Browse Source
This commit is contained in:
streaper2
2026-04-23 13:23:03 +02:00
parent 12e48a738c
commit 33ec11d6db
6 changed files with 348 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
components/dashboard/DashboardProfile.tsx
View File

@@ -29,6 +29,9 @@ const normalizeBusinessData = (b: Business): Business => ({
showSocials: b.showSocials ?? true,
slug: b.slug || '',
videoUrl: b.videoUrl || '',
coverUrl: b.coverUrl || '',
coverPosition: b.coverPosition || '50% 50%',
coverZoom: b.coverZoom || 1,
contactPhone: b.contactPhone || '',
websiteUrl: b.websiteUrl || '',
socialLinks: {
@@ -164,7 +167,7 @@ const DashboardProfile = ({ business, setBusiness }: { business: Business, setBu
const isNameOk = formData.name && formData.name !== "Nouvelle Entreprise";
const isDescOk = formData.description && formData.description.length >= 20;
const isLocOk = formData.location && formData.location !== "Ma Ville";
const isLocOk = (formData.countryId && formData.city) || (formData.location && formData.location !== "Ma Ville");
const isEmailOk = !!formData.contactEmail;
const isPhoneOk = !!formData.contactPhone;
const isActive = isNameOk && isDescOk && isLocOk && isEmailOk && isPhoneOk;
@@ -220,14 +223,89 @@ const DashboardProfile = ({ business, setBusiness }: { business: Business, setBu
<div className="bg-white shadow rounded-lg p-6">
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><ImageIcon className="w-5 h-5 mr-2 text-brand-600" /> Identité Visuelle</h3>
<div className="flex items-center space-x-6">
<div className="shrink-0">
<div className="shrink-0 flex flex-col items-center gap-2">
<img className="h-24 w-24 object-cover rounded-full border-2 border-gray-200" src={formData.logoUrl} alt="Logo actuel" />
<span className="text-[10px] font-bold text-gray-400 uppercase">Logo</span>
</div>
<div className="flex-1 border-2 border-dashed border-gray-300 rounded-md p-6 flex flex-col items-center justify-center hover:border-brand-400 transition-colors cursor-pointer bg-gray-50">
<ImageIcon className="h-8 w-8 text-gray-400" />
<p className="mt-1 text-xs text-gray-500">Glissez votre logo ici ou cliquez pour parcourir</p>
<p className="mt-1 text-xs text-gray-500">Modifier le logo</p>
</div>
</div>
<div className="mt-8">
<label className="block text-sm font-medium text-gray-700 mb-2">Photo de Couverture (Bannière)</label>
<div className="relative h-48 w-full rounded-lg overflow-hidden bg-gray-100 border-2 border-dashed border-gray-300 group transition-all">
{formData.coverUrl ? (
<img
src={formData.coverUrl}
className="w-full h-full object-cover transition-transform duration-200"
style={{
objectPosition: formData.coverPosition || '50% 50%',
transform: `scale(${formData.coverZoom || 1})`
}}
alt="Couverture"
/>
) : (
<div className="w-full h-full flex flex-col items-center justify-center text-gray-400">
<ImageIcon className="w-8 h-8 mb-1" />
<span className="text-xs">Aucune bannière personnalisée</span>
</div>
)}
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<button className="bg-white text-gray-900 px-4 py-1.5 rounded-full text-xs font-bold shadow-lg">Changer la photo</button>
</div>
</div>
<div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4 bg-gray-50 p-4 rounded-lg border border-gray-200">
<div>
<label className="block text-xs font-bold text-gray-500 uppercase mb-2">Zoom : {(formData.coverZoom || 1).toFixed(1)}x</label>
<input
type="range"
min="1" max="3" step="0.1"
value={formData.coverZoom || 1}
onChange={(e) => setFormData({...formData, coverZoom: parseFloat(e.target.value)})}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-brand-600"
/>
</div>
<div>
<label className="block text-xs font-bold text-gray-500 uppercase mb-2">Position Horizontale</label>
<input
type="range"
min="0" max="100" step="1"
value={parseInt((formData.coverPosition || '50% 50%').split(' ')[0]) || 50}
onChange={(e) => {
const y = (formData.coverPosition || '50% 50%').split(' ')[1] || '50%';
setFormData({...formData, coverPosition: `${e.target.value}% ${y}`});
}}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-brand-600"
/>
</div>
<div>
<label className="block text-xs font-bold text-gray-500 uppercase mb-2">Position Verticale</label>
<input
type="range"
min="0" max="100" step="1"
value={parseInt((formData.coverPosition || '50% 50%').split(' ')[1]) || 50}
onChange={(e) => {
const x = (formData.coverPosition || '50% 50%').split(' ')[0] || '50%';
setFormData({...formData, coverPosition: `${x} ${e.target.value}%`});
}}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-brand-600"
/>
</div>
</div>
<input
type="text"
name="coverUrl"
value={formData.coverUrl || ''}
onChange={handleInputChange}
placeholder="URL de votre image de couverture (ex: https://...)"
className="mt-4 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-brand-500 focus:border-brand-500 sm:text-sm"
/>
<p className="mt-1 text-[10px] text-gray-500 italic">Ajustez le zoom et la position pour un rendu optimal sur votre fiche.</p>
</div>
<div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6 mt-6">
<div className="sm:col-span-3">
<label className="block text-sm font-medium text-gray-700">Nom de l'entreprise</label>