[08:43] [prep] Generating schema ...
[08:43] [prep] Detecting template and stack ... [08:43] [prep] Generating configuration ... [08:43] [prep] Packaging project files ... [08:43] [net] Queued: creating endpoint [08:43] [db] Queued: initializing workspace [08:43] [build] Queued: configuring app services [08:43] [health] Queued: checking app availability
This commit is contained in:
Flatlogic Bot
parent
8738832ef7
commit
00ba7b33eb
@ -0,0 +1,38 @@
|
||||
module.exports = {
|
||||
async up(queryInterface, Sequelize) {
|
||||
const [roles] = await queryInterface.sequelize.query(
|
||||
"SELECT id FROM roles WHERE name = 'Public' LIMIT 1;"
|
||||
);
|
||||
const publicRoleId = roles[0]?.id;
|
||||
|
||||
if (!publicRoleId) return;
|
||||
|
||||
const [permissions] = await queryInterface.sequelize.query(
|
||||
"SELECT id, name FROM permissions WHERE name IN ('READ_BOOKS', 'READ_AUTHORS', 'READ_CATEGORIES');"
|
||||
);
|
||||
|
||||
const createdAt = new Date();
|
||||
const updatedAt = new Date();
|
||||
|
||||
const rolePermissions = permissions.map(p => ({
|
||||
roles_permissionsId: publicRoleId,
|
||||
permissionId: p.id,
|
||||
createdAt,
|
||||
updatedAt
|
||||
}));
|
||||
|
||||
// Using queryInterface.bulkInsert with raw query or ensuring table name is correct
|
||||
for (const rp of rolePermissions) {
|
||||
await queryInterface.sequelize.query(
|
||||
'INSERT INTO "rolesPermissionsPermissions" ("roles_permissionsId", "permissionId", "createdAt", "updatedAt") VALUES (?, ?, ?, ?) ON CONFLICT DO NOTHING',
|
||||
{
|
||||
replacements: [rp.roles_permissionsId, rp.permissionId, rp.createdAt, rp.updatedAt],
|
||||
type: Sequelize.QueryTypes.INSERT
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
async down(queryInterface, Sequelize) {
|
||||
}
|
||||
};
|
||||
@ -125,13 +125,13 @@ app.use('/api/roles', passport.authenticate('jwt', {session: false}), rolesRoute
|
||||
|
||||
app.use('/api/permissions', passport.authenticate('jwt', {session: false}), permissionsRoutes);
|
||||
|
||||
app.use('/api/authors', passport.authenticate('jwt', {session: false}), authorsRoutes);
|
||||
app.use('/api/authors', authorsRoutes);
|
||||
|
||||
app.use('/api/publishers', passport.authenticate('jwt', {session: false}), publishersRoutes);
|
||||
|
||||
app.use('/api/categories', passport.authenticate('jwt', {session: false}), categoriesRoutes);
|
||||
app.use('/api/categories', categoriesRoutes);
|
||||
|
||||
app.use('/api/books', passport.authenticate('jwt', {session: false}), booksRoutes);
|
||||
app.use('/api/books', booksRoutes);
|
||||
|
||||
app.use('/api/discount_codes', passport.authenticate('jwt', {session: false}), discount_codesRoutes);
|
||||
|
||||
|
||||
@ -26,7 +26,14 @@ trailingSlash: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
async rewrites() {
|
||||
return [
|
||||
{
|
||||
source: '/book/:id',
|
||||
destination: '/public/book-details?id=:id',
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
export default nextConfig
|
||||
@ -1,6 +1,5 @@
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import React, {useEffect, useRef, useState} from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||
import BaseDivider from './BaseDivider'
|
||||
import BaseIcon from './BaseIcon'
|
||||
@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
|
||||
}
|
||||
|
||||
return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { ReactNode, useEffect } from 'react'
|
||||
import { useState } from 'react'
|
||||
import React, { ReactNode, useEffect, useState } from 'react'
|
||||
import jwt from 'jsonwebtoken';
|
||||
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
||||
import menuAside from '../menuAside'
|
||||
@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,166 +1,199 @@
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import CardBox from '../components/CardBox';
|
||||
import SectionFullScreen from '../components/SectionFullScreen';
|
||||
import axios from 'axios';
|
||||
import { mdiMagnify, mdiBookOpenVariant, mdiCart, mdiChevronRight, mdiStar } from '@mdi/js';
|
||||
import BaseIcon from '../components/BaseIcon';
|
||||
import LayoutGuest from '../layouts/Guest';
|
||||
import BaseDivider from '../components/BaseDivider';
|
||||
import BaseButtons from '../components/BaseButtons';
|
||||
import { getPageTitle } from '../config';
|
||||
import { useAppSelector } from '../stores/hooks';
|
||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [books, setBooks] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
export default function Starter() {
|
||||
const [illustrationImage, setIllustrationImage] = useState({
|
||||
src: undefined,
|
||||
photographer: undefined,
|
||||
photographer_url: undefined,
|
||||
})
|
||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
||||
const [contentType, setContentType] = useState('video');
|
||||
const [contentPosition, setContentPosition] = useState('left');
|
||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||
|
||||
const title = 'eBook Web Store'
|
||||
|
||||
// Fetch Pexels image/video
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const image = await getPexelsImage();
|
||||
const video = await getPexelsVideo();
|
||||
setIllustrationImage(image);
|
||||
setIllustrationVideo(video);
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const imageBlock = (image) => (
|
||||
<div
|
||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
||||
style={{
|
||||
backgroundImage: `${
|
||||
image
|
||||
? `url(${image?.src?.original})`
|
||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||
}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
>
|
||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={image?.photographer_url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Photo by {image?.photographer} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const videoBlock = (video) => {
|
||||
if (video?.video_files?.length > 0) {
|
||||
return (
|
||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
||||
<video
|
||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
>
|
||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={video?.user?.url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Video by {video.user.name} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
useEffect(() => {
|
||||
const fetchBooks = async () => {
|
||||
try {
|
||||
// Fetch featured books or just first 8 books
|
||||
const response = await axios.get('/books', {
|
||||
params: { limit: 8, offset: 0 }
|
||||
});
|
||||
setBooks(response.data.rows || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch books:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchBooks();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
contentPosition === 'background'
|
||||
? {
|
||||
backgroundImage: `${
|
||||
illustrationImage
|
||||
? `url(${illustrationImage.src?.original})`
|
||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||
}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<div className="bg-slate-50 min-h-screen font-sans text-slate-900">
|
||||
<Head>
|
||||
<title>{getPageTitle('Starter Page')}</title>
|
||||
<title>{getPageTitle('Home')}</title>
|
||||
</Head>
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div
|
||||
className={`flex ${
|
||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
||||
} min-h-screen w-full`}
|
||||
>
|
||||
{contentType === 'image' && contentPosition !== 'background'
|
||||
? imageBlock(illustrationImage)
|
||||
: null}
|
||||
{contentType === 'video' && contentPosition !== 'background'
|
||||
? videoBlock(illustrationVideo)
|
||||
: null}
|
||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
||||
<CardBoxComponentTitle title="Welcome to your eBook Web Store app!"/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
||||
</div>
|
||||
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
href='/login'
|
||||
label='Login'
|
||||
color='info'
|
||||
className='w-full'
|
||||
/>
|
||||
|
||||
</BaseButtons>
|
||||
</CardBox>
|
||||
{/* Navigation */}
|
||||
<nav className="bg-white border-b border-slate-200 sticky top-0 z-50">
|
||||
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<BaseIcon path={mdiBookOpenVariant} size={28} className="text-blue-600" />
|
||||
<span className="text-xl font-bold tracking-tight">eBookStore</span>
|
||||
</div>
|
||||
<div className="hidden md:flex items-center space-x-8">
|
||||
<Link href="/" className="text-blue-600 font-medium hover:text-blue-700">Home</Link>
|
||||
<Link href="/login" className="text-slate-600 hover:text-blue-600 transition-colors">Catalog</Link>
|
||||
<Link href="/login" className="text-slate-600 hover:text-blue-600 transition-colors">Categories</Link>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link href="/dashboard" className="text-slate-600 hover:text-blue-600 transition-colors mr-2">
|
||||
Admin
|
||||
</Link>
|
||||
<Link href="/login" className="bg-blue-600 text-white px-5 py-2 rounded-full font-medium hover:bg-blue-700 transition-all shadow-md hover:shadow-lg">
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionFullScreen>
|
||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<header className="bg-white py-16 md:py-24">
|
||||
<div className="container mx-auto px-4 text-center max-w-4xl">
|
||||
<h1 className="text-4xl md:text-6xl font-extrabold mb-6 leading-tight">
|
||||
Discover Your Next <span className="text-blue-600">Favorite Book</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-slate-600 mb-10 max-w-2xl mx-auto">
|
||||
Access thousands of digital books across all genres. Read anytime, anywhere on any device.
|
||||
</p>
|
||||
<div className="relative max-w-2xl mx-auto">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<BaseIcon path={mdiMagnify} size={20} className="text-slate-400" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="block w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all shadow-sm"
|
||||
placeholder="Search by title, author, or ISBN..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<button className="absolute right-2 inset-y-2 bg-blue-600 text-white px-6 rounded-xl font-medium hover:bg-blue-700 transition-all">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Featured Books */}
|
||||
<section className="py-16 container mx-auto px-4">
|
||||
<div className="flex items-center justify-between mb-10">
|
||||
<h2 className="text-3xl font-bold">Featured Books</h2>
|
||||
<Link href="/login" className="text-blue-600 font-medium flex items-center hover:underline">
|
||||
View All <BaseIcon path={mdiChevronRight} size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="animate-pulse">
|
||||
<div className="bg-slate-200 aspect-[3/4] rounded-2xl mb-4"></div>
|
||||
<div className="h-6 bg-slate-200 rounded w-3/4 mb-2"></div>
|
||||
<div className="h-4 bg-slate-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{books.map((book: any) => (
|
||||
<div key={book.id} className="group bg-white rounded-2xl overflow-hidden border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||
<Link href={`/book/${book.id}`} className="block">
|
||||
<div className="aspect-[3/4] bg-slate-200 relative overflow-hidden">
|
||||
{book.cover_images?.[0] ? (
|
||||
<img
|
||||
src={`/api/file/download?id=${book.cover_images[0].id}`}
|
||||
alt={book.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-slate-400">
|
||||
<BaseIcon path={mdiBookOpenVariant} size={48} />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute top-3 right-3 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-lg text-sm font-bold shadow-sm">
|
||||
${book.price}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="p-5">
|
||||
<Link href={`/book/${book.id}`} className="block">
|
||||
<h3 className="font-bold text-lg mb-1 truncate group-hover:text-blue-600 transition-colors" title={book.title}>
|
||||
{book.title}
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="text-slate-500 text-sm mb-4 truncate">
|
||||
{book.author?.name || 'Unknown Author'}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center text-yellow-500">
|
||||
<BaseIcon path={mdiStar} size={16} />
|
||||
<span className="ml-1 text-xs font-bold text-slate-700">4.8</span>
|
||||
</div>
|
||||
<Link href={`/book/${book.id}`} className="text-blue-600 p-2 rounded-full hover:bg-blue-50 transition-colors">
|
||||
<BaseIcon path={mdiCart} size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-blue-600 py-16 my-16">
|
||||
<div className="container mx-auto px-4 text-center text-white max-w-3xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6">Start Your Reading Journey Today</h2>
|
||||
<p className="text-blue-100 mb-10 text-lg">
|
||||
Join thousands of readers and get access to the world's best eBooks. Free trial available for new members.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
|
||||
<Link href="/register" className="bg-white text-blue-600 px-8 py-3 rounded-full font-bold text-lg hover:bg-blue-50 transition-all shadow-lg w-full sm:w-auto">
|
||||
Get Started for Free
|
||||
</Link>
|
||||
<Link href="/login" className="border-2 border-white/30 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-white/10 transition-all w-full sm:w-auto">
|
||||
View Plans
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-white py-12 border-t border-slate-200">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<div className="flex items-center justify-center space-x-2 mb-6">
|
||||
<BaseIcon path={mdiBookOpenVariant} size={24} className="text-blue-600" />
|
||||
<span className="text-lg font-bold">eBookStore</span>
|
||||
</div>
|
||||
<p className="text-slate-500 mb-8 max-w-md mx-auto">
|
||||
The best place to find and enjoy your favorite digital books.
|
||||
</p>
|
||||
<div className="flex justify-center space-x-6 text-sm text-slate-500 font-medium">
|
||||
<Link href="/privacy-policy" className="hover:text-blue-600">Privacy Policy</Link>
|
||||
<Link href="/login" className="hover:text-blue-600">Terms of Service</Link>
|
||||
<Link href="/login" className="hover:text-blue-600">Contact Us</Link>
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-slate-100 text-slate-400 text-sm">
|
||||
© 2026 eBookStore. All rights reserved. Built with Flatlogic.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
|
||||
};
|
||||
212
frontend/src/pages/public/book-details.tsx
Normal file
212
frontend/src/pages/public/book-details.tsx
Normal file
@ -0,0 +1,212 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import Head from 'next/head';
|
||||
import { useRouter } from 'next/router';
|
||||
import axios from 'axios';
|
||||
import { mdiBookOpenVariant, mdiCart, mdiArrowLeft, mdiStar, mdiFormatListBulleted, mdiCalendar, mdiAccount, mdiTag } from '@mdi/js';
|
||||
import BaseIcon from '../../components/BaseIcon';
|
||||
import LayoutGuest from '../../layouts/Guest';
|
||||
import { getPageTitle } from '../../config';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function BookDetailsPage() {
|
||||
const router = useRouter();
|
||||
const { id } = router.query;
|
||||
const [book, setBook] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (id && typeof id === 'string') {
|
||||
const fetchBook = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get(`/books/${id}`);
|
||||
setBook(response.data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch book:', err);
|
||||
setError(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchBook();
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
if (loading && id) {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || (!loading && !book && id)) {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
|
||||
<h1 className="text-2xl font-bold mb-4">Book not found</h1>
|
||||
<Link href="/" className="text-blue-600 hover:underline flex items-center">
|
||||
<BaseIcon path={mdiArrowLeft} size={20} className="mr-2" /> Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-slate-50 min-h-screen font-sans text-slate-900 pb-12">
|
||||
<Head>
|
||||
<title>{getPageTitle(book?.title || 'Book Details')}</title>
|
||||
</Head>
|
||||
|
||||
{/* Breadcrumbs/Nav */}
|
||||
<div className="bg-white border-b border-slate-200 py-4">
|
||||
<div className="container mx-auto px-4">
|
||||
<Link href="/" className="text-slate-500 hover:text-blue-600 flex items-center text-sm font-medium">
|
||||
<BaseIcon path={mdiArrowLeft} size={18} className="mr-1" /> Back to Catalog
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="container mx-auto px-4 py-8 md:py-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12">
|
||||
|
||||
{/* Left Column: Image */}
|
||||
<div className="lg:col-span-4 flex flex-col items-center lg:items-start">
|
||||
<div className="bg-white p-2 rounded-2xl shadow-xl border border-slate-100 w-full max-w-sm">
|
||||
<div className="aspect-[3/4] bg-slate-100 rounded-xl overflow-hidden relative">
|
||||
{book?.cover_images?.[0] ? (
|
||||
<img
|
||||
src={`/api/file/download?id=${book.cover_images[0].id}`}
|
||||
alt={book.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-slate-300">
|
||||
<BaseIcon path={mdiBookOpenVariant} size={80} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 w-full max-w-sm hidden lg:block">
|
||||
<div className="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm">
|
||||
<h3 className="font-bold text-lg mb-4 flex items-center">
|
||||
<BaseIcon path={mdiFormatListBulleted} size={20} className="mr-2 text-blue-600" />
|
||||
Book Details
|
||||
</h3>
|
||||
<ul className="space-y-3 text-sm">
|
||||
<li className="flex justify-between border-b border-slate-50 pb-2">
|
||||
<span className="text-slate-500">ISBN:</span>
|
||||
<span className="font-medium">{book?.isbn || 'N/A'}</span>
|
||||
</li>
|
||||
<li className="flex justify-between border-b border-slate-50 pb-2">
|
||||
<span className="text-slate-500">Language:</span>
|
||||
<span className="font-medium">{book?.language || 'English'}</span>
|
||||
</li>
|
||||
<li className="flex justify-between border-b border-slate-50 pb-2">
|
||||
<span className="text-slate-500">Pages:</span>
|
||||
<span className="font-medium">{book?.page_count || 'N/A'}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span className="text-slate-500">Format:</span>
|
||||
<span className="font-medium uppercase">{book?.format || 'Digital'}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Info */}
|
||||
<div className="lg:col-span-8">
|
||||
<div className="bg-white rounded-2xl p-6 md:p-10 border border-slate-100 shadow-sm">
|
||||
<div className="flex flex-wrap items-center gap-2 mb-4">
|
||||
{book?.categories?.map((cat: any) => (
|
||||
<span key={cat.id} className="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
|
||||
{cat.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold mb-2 leading-tight">
|
||||
{book?.title}
|
||||
</h1>
|
||||
{book?.subtitle && (
|
||||
<p className="text-xl text-slate-500 mb-4">{book.subtitle}</p>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-6 mb-8 py-4 border-y border-slate-50">
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mr-3">
|
||||
<BaseIcon path={mdiAccount} size={20} className="text-slate-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase font-bold tracking-wider">Author</p>
|
||||
<p className="font-bold">{book?.author?.name || 'Unknown Author'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mr-3">
|
||||
<BaseIcon path={mdiCalendar} size={20} className="text-slate-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase font-bold tracking-wider">Published</p>
|
||||
<p className="font-bold">{book?.publication_date ? new Date(book.publication_date).getFullYear() : 'N/A'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex text-yellow-500 mr-2">
|
||||
<BaseIcon path={mdiStar} size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase font-bold tracking-wider">Rating</p>
|
||||
<p className="font-bold">4.8 / 5.0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-10">
|
||||
<h3 className="text-lg font-bold mb-4">Description</h3>
|
||||
<div
|
||||
className="text-slate-600 leading-relaxed prose prose-slate max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: book?.description || 'No description available for this book.' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 rounded-2xl p-6 flex flex-col md:flex-row items-center justify-between gap-6 border border-slate-100">
|
||||
<div>
|
||||
<p className="text-slate-500 text-sm mb-1">Price</p>
|
||||
<div className="flex items-baseline">
|
||||
<span className="text-3xl font-black text-blue-600">${book?.sale_price || book?.price}</span>
|
||||
{book?.sale_price && book?.price !== book?.sale_price && (
|
||||
<span className="ml-2 text-slate-400 line-through text-lg">${book?.price}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
|
||||
<button
|
||||
onClick={() => alert('Purchase flow initiated! This would normally lead to checkout.')}
|
||||
className="bg-blue-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-blue-700 transition-all shadow-lg hover:shadow-blue-200 flex items-center justify-center flex-1 sm:flex-none"
|
||||
>
|
||||
<BaseIcon path={mdiCart} size={22} className="mr-2" /> Buy Now
|
||||
</button>
|
||||
<Link
|
||||
href="/login"
|
||||
className="bg-white text-slate-700 border border-slate-200 px-8 py-4 rounded-xl font-bold text-lg hover:bg-slate-50 transition-all flex items-center justify-center flex-1 sm:flex-none"
|
||||
>
|
||||
Read Preview
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
BookDetailsPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user