Skip to content

made some ui changes #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
side-quest2001 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

made some ui changes #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 42 additions & 30 deletions frontend/src/pages/ShowBook.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,39 +24,51 @@ const ShowBook = () => {
}, []);

return (
<div className='p-4'>
<div className="p-6 bg-gray-50 min-h-screen">
<BackButton />
<h1 className='text-3xl my-4'>Show Book</h1>
{loading ? (
<Spinner />
) : (
<div className='flex flex-col border-2 border-sky-400 rounded-xl w-fit p-4'>
<div className='my-4'>
<span className='text-xl mr-4 text-gray-500'>Id</span>
<span>{book._id}</span>
<div className="max-w-3xl mx-auto">
<h1 className="text-4xl font-bold text-sky-600 mb-6 text-center">
Book Details
</h1>
{loading ? (
<div className="flex justify-center items-center h-64">
<Spinner />
</div>
<div className='my-4'>
<span className='text-xl mr-4 text-gray-500'>Title</span>
<span>{book.title}</span>
) : (
<div className="bg-white shadow-md rounded-lg border border-gray-200 p-6">
<div className="grid grid-cols-1 gap-y-4">
<div>
<span className="block text-gray-500 font-medium text-lg">ID</span>
<span className="text-gray-800">{book._id}</span>
</div>
<div>
<span className="block text-gray-500 font-medium text-lg">Title</span>
<span className="text-gray-800 font-semibold text-xl">{book.title}</span>
</div>
<div>
<span className="block text-gray-500 font-medium text-lg">Author</span>
<span className="text-gray-800">{book.author}</span>
</div>
<div>
<span className="block text-gray-500 font-medium text-lg">Publish Year</span>
<span className="text-gray-800">{book.publishYear}</span>
</div>
<div>
<span className="block text-gray-500 font-medium text-lg">Created At</span>
<span className="text-gray-800">
{new Date(book.createdAt).toLocaleString()}
</span>
</div>
<div>
<span className="block text-gray-500 font-medium text-lg">Last Updated At</span>
<span className="text-gray-800">
{new Date(book.updatedAt).toLocaleString()}
</span>
</div>
</div>
</div>
<div className='my-4'>
<span className='text-xl mr-4 text-gray-500'>Author</span>
<span>{book.author}</span>
</div>
<div className='my-4'>
<span className='text-xl mr-4 text-gray-500'>Publish Year</span>
<span>{book.publishYear}</span>
</div>
<div className='my-4'>
<span className='text-xl mr-4 text-gray-500'>Create Time</span>
<span>{new Date(book.createdAt).toString()}</span>
</div>
<div className='my-4'>
<span className='text-xl mr-4 text-gray-500'>Last Update Time</span>
<span>{new Date(book.updatedAt).toString()}</span>
</div>
</div>
)}
)}
</div>
</div>
);
};
Expand Down