continue: add violation panel

src/app/ui/violations/file-page/violation-page-title.tsx

@@ -1,45 +1,28 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation'
 import { IconEyeDashed } from '@/app/ui/icons/icons';
+import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
 
-export default function ViolationPageTitle() {
+export default function ViolationPageTitle({ fileInfo }: { fileInfo: FileDetails }) {
 	const t = useTranslations('Global');
-	const params = useParams()
-	const id = params.id
 
 	return (
 		<div className="page-title-color-frame violation-page">
 			<div
 				className="violation-page-icon"
 			>
-				<IconEyeDashed />
-			</div>
-			<div>
-				<h1>
-					file id: {id}
-				</h1>
-				<div
-					className="violation-page-info"
-				>
-					<span>
-						fileType
-					</span>
 
-					<span>
-						fileSize
-					</span>
+				{fileInfo.thumbnailFileUrl ? (
+					<img src={fileInfo.thumbnailFileUrl} alt={fileInfo.fileName} />
+				) : (
+					<IconEyeDashed />
+				)}
 
-					<span>
-						fileViolationDate
-					</span>
-
-					<span>
-						fileViolationType
-					</span>
-				</div>
 			</div>
+			<h1>
+				{t('file-name')}: {fileInfo?.fileName ? fileInfo.fileName : '#'}
+			</h1>
 		</div>
 	)
 }