1-
2- import { useState , useEffect } from "react" ;
3- import { cn } from "@/lib/utils" ;
4- import PageSkeleton from "./PageSkeleton" ;
1+ import { useState , useEffect } from 'react' ;
2+ import { cn } from '@/lib/utils' ;
3+ import PageSkeleton from './PageSkeleton' ;
54
65interface PageViewerProps {
76 pageNumber : number ;
@@ -12,86 +11,90 @@ interface PageViewerProps {
1211export default function PageViewer ( { pageNumber, totalPages, className } : PageViewerProps ) {
1312 const [ isLoading , setIsLoading ] = useState ( true ) ;
1413 const [ error , setError ] = useState < string | null > ( null ) ;
15-
14+
1615 // Format page number to 3 digits with leading zeros
1716 const formattedPageNumber = pageNumber . toString ( ) . padStart ( 3 , '0' ) ;
18-
17+
1918 // SVG path
2019 const pagePath = `https://raw.githubusercontent.com/yaqiin/quran-svg/refs/heads/main/hafs/${ formattedPageNumber } ;
21-
20+
2221 useEffect ( ( ) => {
2322 // Reset loading state when page changes
2423 setIsLoading ( true ) ;
2524 setError ( null ) ;
26-
25+
2726 // Simulate loading - in production, this would be real SVG loading
2827 const timer = setTimeout ( ( ) => {
2928 setIsLoading ( false ) ;
3029 } , 500 ) ;
31-
30+
3231 return ( ) => clearTimeout ( timer ) ;
3332 } , [ pageNumber ] ) ;
34-
33+
3534 const handleImageLoad = ( ) => {
3635 setIsLoading ( false ) ;
3736 } ;
38-
37+
3938 const handleImageError = ( ) => {
4039 setIsLoading ( false ) ;
4140 setError ( `لم يتم العثور على الصفحة ${ pageNumber } ) ;
4241 } ;
43-
42+
4443 if ( pageNumber > totalPages || pageNumber < 1 ) {
4544 return (
46- < div className = { cn ( " flex items-center justify-center bg-muted rounded-lg" , className ) } >
45+ < div className = { cn ( ' flex items-center justify-center rounded-lg bg-muted' , className ) } >
4746 < p className = "text-muted-foreground" > لا توجد صفحة</ p >
4847 </ div >
4948 ) ;
5049 }
51-
50+
5251 return (
53- < div className = { cn ( "relative flex items-center justify-center overflow-hidden bg-white rounded-lg shadow-md" , className ) } >
52+ < div
53+ className = { cn (
54+ 'relative flex items-center justify-center overflow-hidden rounded-lg bg-white shadow-md' ,
55+ className ,
56+ ) }
57+ >
5458 { isLoading && < PageSkeleton /> }
55-
59+
5660 { error ? (
5761 < div className = "flex items-center justify-center p-8" >
5862 < p className = "text-destructive" > { error } </ p >
5963 </ div >
6064 ) : (
6165 < >
62- { /* For the demo, we'll use placeholder images */ }
63- < img
66+ < img
6467 src = { pagePath }
6568 alt = { `صفحة ${ pageNumber } }
6669 className = { cn (
67- "w -full h -full object-contain transition-opacity duration-300" ,
68- isLoading ? " opacity-0" " opacity-100"
70+ 'h -full w -full object-contain transition-opacity duration-300' ,
71+ isLoading ? ' opacity-0' ' opacity-100' ,
6972 ) }
7073 onLoad = { handleImageLoad }
7174 onError = { handleImageError }
7275 />
73-
76+
7477 { /* This would be the actual SVG in production */ }
75- { /*
76- <object
78+ { /*
79+ <object
7780 data={pagePath}
7881 type="image/svg+xml"
7982 className={cn(
80- "w-full h-full transition-opacity duration-300",
83+ "w-full h-full transition-opacity duration-300",
8184 isLoading ? "opacity-0" : "opacity-100"
8285 )}
8386 onLoad={handleImageLoad}
8487 onError={handleImageError}
8588 >
86- <img
87- src={`https://placehold.co/800x1200/e2e8f0/1e293b?text=صفحة+${pageNumber}`}
89+ <img
90+ src={`https://placehold.co/800x1200/e2e8f0/1e293b?text=صفحة+${pageNumber}`}
8891 alt={`صفحة ${pageNumber}`}
8992 className="w-full h-full object-contain"
9093 />
9194 </object>
9295 */ }
93-
94- < span className = "absolute bottom-2 left-1/2 transform -translate-x-1/2 text-xs text-muted-foreground bg-white/80 px-2 py-1 rounded-full " >
96+
97+ < span className = "absolute bottom-2 left-1/2 -translate-x-1/2 transform rounded-full bg-white/80 px-2 py-1 text-xs text-muted-foreground " >
9598 { pageNumber }
9699 </ span >
97100 </ >
0 commit comments