Files
clinicpro/assets/admin/components/icons/FilesToolbarIcons.tsx
T
hamedandClaude Opus 4.8 38ba3ee8ea style(patients): match tauri /files toolbar pixel-for-pixel
Rebuild the پرونده‌ها header to mirror tauri files/head + files/inputs:
- title on its own row (font-bold, #525252, 16/18/20px).
- search field: 48px tall, #FAFAFA bg, #EFEFEF border, rounded-[6px], with a
  #5559CE 40px search-icon box (SearchHeaderP).
- view toggle with the exact tauri SVGs (PatientsGridView table / Patients
  CategoryView card), active bg #f4f5fd, #E0E0E0 border.
- filter button as a 62x48 #5559ce-bordered box (TurnsFilter icon).
- تشکیل پرونده as a 48h/137w #5559ce button (AddTurn icon + label).
Ported icons verbatim into components/icons/FilesToolbarIcons.tsx.

Frontend only. Tests + tsc + build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-15 09:39:16 +03:30

59 lines
4.2 KiB
TypeScript

/**
* Toolbar icons ported verbatim from clinic-pro-tauri `src/assets/icon` so the
* پرونده‌ها header matches the tauri /files page pixel-for-pixel.
*/
export function SearchHeaderP({ color = '#7E7E7E' }: { color?: string }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M22 22L20 20" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function TurnsFilter({ color = '#616161' }: { color?: string }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
<path d="M11.191 17.9756H4.36523" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.2363 7.47539H21.0621" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path fillRule="evenodd" clipRule="evenodd" d="M9.45413 7.41677C9.45413 6.01315 8.30779 4.875 6.89406 4.875C5.48033 4.875 4.33398 6.01315 4.33398 7.41677C4.33398 8.8204 5.48033 9.95855 6.89406 9.95855C8.30779 9.95855 9.45413 8.8204 9.45413 7.41677Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path fillRule="evenodd" clipRule="evenodd" d="M21.667 17.9331C21.667 16.5295 20.5216 15.3914 19.1078 15.3914C17.6932 15.3914 16.5469 16.5295 16.5469 17.9331C16.5469 19.3368 17.6932 20.4749 19.1078 20.4749C20.5216 20.4749 21.667 19.3368 21.667 17.9331Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
/** Table-view toggle icon (tauri `PatientsGridView`). */
export function PatientsGridView({ width = 24, height = 24, color = '#5559CE' }: { width?: number; height?: number; color?: string }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none">
<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M2.0293 8.5H21.9993" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M2.0293 15.5H21.9993" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.50977 21.9898V2.00977" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15.5098 21.9898V2.00977" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
/** Card-view toggle icon (tauri `PatientsCategoryView`). */
export function PatientsCategoryView({ width = 24, height = 24, color = '#616161' }: { width?: number; height?: number; color?: string }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none">
<path d="M5 10H7C9 10 10 9 10 7V5C10 3 9 2 7 2H5C3 2 2 3 2 5V7C2 9 3 10 5 10Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M17 10H19C21 10 22 9 22 7V5C22 3 21 2 19 2H17C15 2 14 3 14 5V7C14 9 15 10 17 10Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M17 22H19C21 22 22 21 22 19V17C22 15 21 14 19 14H17C15 14 14 15 14 17V19C14 21 15 22 17 22Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5 22H7C9 22 10 21 10 19V17C10 15 9 14 7 14H5C3 14 2 15 2 17V19C2 21 3 22 5 22Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function AddTurn({ color = '#E1E1E1' }: { color?: string }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M5 10H15" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
<path d="M10 15V5" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
</svg>
);
}