vrr/readest
2
0
Fork 0
mirror of https://github.com/readest/readest.git synced 2026-05-10 03:50:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Refactor BookDetailModal to use Next.js Image component and restore conditional rendering for modal visibility (#45)

Browse source
This commit is contained in:
Jiucheng(Oliver) 2024-12-26 11:39:38 -05:00 • committed by GitHub
parent 329c907f80
commit dc500c5bb4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 6 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/readest-app/src/components/BookDetailModal.tsx
View file

@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
import { Book } from '@/types/book';
import { EnvConfigType } from '@/services/environment';
import { useSettingsStore } from '@/store/settingsStore';
import Image from 'next/image';
import WindowButtons from '@/components/WindowButtons';
@ -17,7 +18,6 @@ const BookDetailModal = ({
book: Book;
envConfig: EnvConfigType;
}) => {
if (!isOpen) return null;
const [bookMeta, setBookMeta] = useState<null | {
title: string;
language: string | string[];
@ -40,6 +40,8 @@ const BookDetailModal = ({
fetchBookDetails();
}, [book]);
if (!isOpen) return null;
if (!bookMeta)
return (
<div className='fixed inset-0 z-50 flex items-center justify-center'>
@ -77,9 +79,11 @@ const BookDetailModal = ({
<div className='mb-6 flex items-start'>
{book.coverImageUrl ? (
<img
<Image
src={book.coverImageUrl}
alt={book.title}
width={110}
height={165}
className='mr-4 h-40 w-30 rounded-lg object-contain shadow-md'
/>
) : (