Files
old-kitabcitab-frontend/kitabcitab/pages/[book]/[id]/index.js
2023-02-09 15:49:17 +01:00

95 lines
2.8 KiB
JavaScript

import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
import Link from "next/link"
import { useRouter } from 'next/router'
import { ENV_VAR } from '../../../envconfig'
const result = ({data}) => {
const router = useRouter()
console.log(data)
const {book, writer, text} = data._source
const nextPageHandler = () => {
if(Number(data._id) + 1 === Number(data._source.numOfPages) + 1) return
router.push(`/${book.toLowerCase()}/${Number(data._id) + 1}`)
}
const prevPageHandler = () => {
if(data._id - 1 === 0) return
router.push(`/${book.toLowerCase()}/${Number(data._id) - 1}`)
}
return (
<>
<div className="flex flex-col laptop:flex-row flex-wrap items-end w-[100vw] laptop:w-[84vw] laptop:min-h-[20vh] laptop:max-w-[90vw]">
<div className="p-10 w-[100vw] laptop:w-[25rem]">
<Link href='/'><p className="text-5xl tablet:text-6xl laptop:text-3xl text-white text-center font-serif ">KitabCitab</p></Link>
</div>
<div className="group
my-3
mx-auto
py-5
h-[5vh]
min-w-[90vw]n
w-[90vw]
bg-[#202124]
flex flex-row justify-around items-center
tablet:w-[70vw]
laptop:min-w-[40vw]
laptop:w-[40vw]
laptop:mx-0
laptop:my-10
laptop:justify-between
"
>
<i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => prevPageHandler()}><AiOutlineLeft size={25} /></i>
<p className="text-base tablet:text-2xl laptop:text-2xl text-[#fff] font-serif text-center">"{book}", {writer}, str.{data._id}</p>
<i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => nextPageHandler()}><AiOutlineRight size={25} /></i>
</div>
<div className='page flex laptop:justify-center laptop:min-w-[100%]'>
<p className='
min-w-[90vw]
w-[100%]
px-5
mt-8
pb-[5rem]
tablet:w-[100%]
tablet:px-[5rem]
laptop:min-w-[45vw]
laptop:w-[60vw]
text-white
font-serif
text-2xl
'
>
{text}
</p>
</div>
</div>
</>
)
}
export default result
export async function getServerSideProps (context) {
try{
const res = await fetch(`${ENV_VAR}library${context.resolvedUrl}`)
const data = await res.json()
return { props: {data} }
}
catch{err => console.log(err)}
}