+ {page.elements.map((element, index) => {
+ if (element.type === 'text') {
+ return (
+ 
+ );
+ }
+
+ return null;
+ })}
+
+ );
+});
+
+BookPage.displayName = 'BookPage';
+
+export default BookPage;
+
diff --git a/src/pages/viewer/components/BookViewer.tsx b/src/pages/viewer/components/BookViewer.tsx
new file mode 100644
index 0000000..5555917
--- /dev/null
+++ b/src/pages/viewer/components/BookViewer.tsx
@@ -0,0 +1,125 @@
+import { type FC, useRef, useCallback, useState } from 'react';
+import HTMLFlipBook from 'react-pageflip';
+import { type PageData } from '../types';
+import BookPage from './BookPage';
+import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
+
+type BookViewerProps = {
+ pages: PageData[];
+};
+
+interface PageFlipAPI {
+ flipNext: () => void;
+ flipPrev: () => void;
+}
+
+interface FlipBookInstance {
+ pageFlip: () => PageFlipAPI | undefined;
+}
+
+interface FlipEvent {
+ data: number;
+}
+
+/**
+ * کامپوننت اصلی کتابخوان با استفاده از react-pageflip
+ * این کامپوننت از HTMLFlipBook استفاده میکند که یک wrapper برای PageFlip است
+ * از HTML برای رندر صفحات استفاده میشود (نه Canvas) برای سازگاری با Konva در آینده
+ */
+const BookViewer: FC
+ {element.text}
+
+ );
+ }
+
+ if (element.type === 'image') {
+ return (
+
+ {/* نمایش کتاب */}
+
+ );
+};
+
+export default BookViewer;
diff --git a/src/pages/viewer/components/mockData.ts b/src/pages/viewer/components/mockData.ts
new file mode 100644
index 0000000..70e8732
--- /dev/null
+++ b/src/pages/viewer/components/mockData.ts
@@ -0,0 +1,179 @@
+import { type PageData } from '../types';
+
+/**
+ * دادههای mock برای 6 صفحه کتاب
+ * این ساختار داده برای سازگاری با Konva در آینده طراحی شده است
+ */
+export const mockPages: PageData[] = [
+ {
+ id: 1,
+ width: 794,
+ height: 1123,
+ elements: [
+ {
+ type: 'text',
+ x: 100,
+ y: 150,
+ text: 'صفحه اول\nخوش آمدید',
+ fontSize: 48,
+ color: '#1a1a1a',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 250,
+ text: 'این یک کتاب نمایشی است\nبرای تست کتابخوان',
+ fontSize: 24,
+ color: '#333333',
+ },
+ ],
+ },
+ {
+ id: 2,
+ width: 794,
+ height: 1123,
+ elements: [
+ {
+ type: 'text',
+ x: 100,
+ y: 100,
+ text: 'فصل اول: مقدمه',
+ fontSize: 36,
+ color: '#000000',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 180,
+ text: 'این یک متن نمونه است که در صفحه دوم نمایش داده میشود.\nمتنهای بیشتر برای نمایش بهتر صفحه.',
+ fontSize: 20,
+ color: '#2c2c2c',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 320,
+ text: 'محتوا در اینجا ادامه دارد...',
+ fontSize: 18,
+ color: '#444444',
+ },
+ ],
+ },
+ {
+ id: 3,
+ width: 794,
+ height: 1123,
+ elements: [
+ {
+ type: 'text',
+ x: 100,
+ y: 100,
+ text: 'صفحه سوم',
+ fontSize: 32,
+ color: '#1a1a1a',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 200,
+ text: 'این صفحه شامل محتوای بیشتری است.\n\nمیتوانید متنهای مختلفی در اینجا اضافه کنید.',
+ fontSize: 22,
+ color: '#333333',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 400,
+ text: 'نکته: این یک نمایش نمونه است',
+ fontSize: 18,
+ color: '#666666',
+ },
+ ],
+ },
+ {
+ id: 4,
+ width: 794,
+ height: 1123,
+ elements: [
+ {
+ type: 'text',
+ x: 100,
+ y: 150,
+ text: 'فصل دوم: ادامه',
+ fontSize: 36,
+ color: '#000000',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 250,
+ text: 'در این بخش محتوای بیشتری اضافه میشود.\n\nاین کتاب نمونه برای نمایش قابلیتهای کتابخوان طراحی شده است.',
+ fontSize: 20,
+ color: '#2c2c2c',
+ },
+ ],
+ },
+ {
+ id: 5,
+ width: 794,
+ height: 1123,
+ elements: [
+ {
+ type: 'text',
+ x: 100,
+ y: 120,
+ text: 'صفحه پنجم',
+ fontSize: 40,
+ color: '#1a1a1a',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 220,
+ text: 'محتوا در صفحات مختلف توزیع شده است.\n\nهر صفحه میتواند شامل متن و تصویر باشد.',
+ fontSize: 22,
+ color: '#333333',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 400,
+ text: 'ادامه در صفحه بعد...',
+ fontSize: 18,
+ color: '#666666',
+ },
+ ],
+ },
+ {
+ id: 6,
+ width: 794,
+ height: 1123,
+ elements: [
+ {
+ type: 'text',
+ x: 100,
+ y: 200,
+ text: 'صفحه آخر',
+ fontSize: 36,
+ color: '#1a1a1a',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 300,
+ text: 'این آخرین صفحه کتاب است.\n\nاز کتابخوان استفاده کرده و صفحات را ورق بزنید!',
+ fontSize: 24,
+ color: '#333333',
+ },
+ {
+ type: 'text',
+ x: 100,
+ y: 500,
+ text: 'پایان',
+ fontSize: 32,
+ color: '#000000',
+ },
+ ],
+ },
+];
+
diff --git a/src/pages/viewer/types/index.ts b/src/pages/viewer/types/index.ts
new file mode 100644
index 0000000..dd0e942
--- /dev/null
+++ b/src/pages/viewer/types/index.ts
@@ -0,0 +1,11 @@
+export type PageElement =
+ | { type: "text"; x: number; y: number; text: string; fontSize: number; color: string }
+ | { type: "image"; x: number; y: number; src: string; width: number; height: number };
+
+export type PageData = {
+ id: number;
+ width: number;
+ height: number;
+ elements: PageElement[];
+};
+
diff --git a/src/pages/viewer/types/page-flip.d.ts b/src/pages/viewer/types/page-flip.d.ts
new file mode 100644
index 0000000..92a74b3
--- /dev/null
+++ b/src/pages/viewer/types/page-flip.d.ts
@@ -0,0 +1,19 @@
+declare module 'page-flip' {
+ export interface PageFlipSettings {
+ width: number;
+ height: number;
+ size?: 'fixed' | 'stretch';
+ showCover?: boolean;
+ maxShadowOpacity?: number;
+ mobileScrollSupport?: boolean;
+ }
+
+ export class PageFlip {
+ constructor(block: HTMLElement, setting: PageFlipSettings);
+ loadFromHTML(pages: NodeListOf
+ {/* Border و Shadow عمودی در وسط کتاب */}
+
+
+ {pages.map((page) => (
+
+
+
+ {/* کنترلهای ناوبری */}
+
+ {/* دکمه صفحه بعد (در RTL، صفحه سمت چپ) */}
+
+
+ {/* شماره صفحه */}
+
+
+
+ صفحه {currentPage + 1} از {pages.length}
+
+
+
+ {/* دکمه صفحه قبل (در RTL، صفحه سمت راست) */}
+
+