+ Это тестовая страница. Если вы это видите, React работает!
+
+
+
Тест компонентов:
+
+
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 0000000..7043f58
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import Layout from '@/components/Layout';
+import BooksList from '@/components/BooksList';
+import BookDetailModal from '@/components/BookDetailModal';
+import { Button } from '@/components/ui/button';
+import type { Book } from '@/types';
+
+function App() {
+ const [selectedBookId, setSelectedBookId] = useState(null);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const handleBookClick = (book: Book) => {
+ setSelectedBookId(book.id);
+ setIsModalOpen(true);
+ };
+
+ const handleSearch = (query: string) => {
+ // This will be handled by the BooksList component
+ console.log('Search query:', query);
+ };
+
+ return (
+
+ {/* Hero Section */}
+
+
Книги по Python
+
+ Откройте для себя лучшие книги по программированию на Python для любого уровня навыков.
+ От новичков до экспертов - найдите свою следующую отличную книгу.
+
+
+
+
+ {/* Books List */}
+
+
+ {/* Book Detail Modal */}
+
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/frontend/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/components/BookCard.tsx b/frontend/src/components/BookCard.tsx
new file mode 100644
index 0000000..2d886d8
--- /dev/null
+++ b/frontend/src/components/BookCard.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Calendar, User, Building, FileText } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import BookImage from './BookImage';
+import type { Book } from '@/types';
+
+interface BookCardProps {
+ book: Book;
+ onClick?: (book: Book) => void;
+}
+
+export default function BookCard({ book, onClick }: BookCardProps) {
+ const handleClick = () => {
+ onClick?.(book);
+ };
+
+ return (
+
+
+