Skip to content

Commit

Permalink
update homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Jul 26, 2023
1 parent f329b29 commit a981b5c
Show file tree
Hide file tree
Showing 6 changed files with 186 additions and 135 deletions.
154 changes: 81 additions & 73 deletions src/components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ export default function Header({}) {
const [searchValue, setSearchValue] = useState('')
const { account, wallet, logout, unlinkWallet } = useContext(Context)
const searchComic = useApi<any[]>(async () => await search(searchValue), !!searchValue, [searchValue])

useEffect(() => {
;(window as any).isSearchFocused = isSearchFocused
}, [isSearchFocused])
useEffect(() => {
ref.current?.addEventListener(
'keypress',
Expand Down Expand Up @@ -116,47 +120,49 @@ export default function Header({}) {
/>
{!!searchComic.data?.length && (
<div
className={`absolute bg-light-gray transition-all -bottom-4 translate-y-full w-full duration-500 p-5 rounded-[20px] flex flex-col gap-7 max-h-[40vh] overflow-auto ${
isSearchFocused ? 'opacity-100' : 'pointer-events-none opacity-0 '
className={`absolute bg-light-gray transition-all -bottom-4 translate-y-full duration-500 rounded-[20px] max-h-[40vh] overflow-hidden ${
isSearchFocused ? 'opacity-100 w-[160%]' : 'pointer-events-none opacity-0 w-full'
}`}>
{searchComic.data?.map((manga, index) => (
<div key={index} className='flex gap-2'>
<Image
src={manga.image || NoImage}
width={48}
height={64}
className='w-12 h-16 bg-medium-gray rounded-xl object-cover'
alt=''
/>
<div className='flex flex-col justify-between'>
<div>
<p
className='text-second-color text-base font-bold cursor-pointer'
onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
{manga[locale].title}
</p>
<div className='text-xs'>
{manga.authors.map((author, index) => (
<Fragment key={index}>
<span className='text-second-color font-[600] first:hidden'>, </span>
<span className='text-second-color font-[600]'>{author}</span>
</Fragment>
))}
<div className={`max-h-[40vh] overflow-auto flex flex-col gap-7 p-5`}>
{searchComic.data?.map((manga, index) => (
<div key={index} className='flex gap-2'>
<Image
src={manga.image || NoImage}
width={48}
height={64}
className='w-12 h-16 bg-medium-gray rounded-xl object-cover'
alt=''
/>
<div className='flex flex-col justify-between'>
<div>
<p
className='text-second-color text-base font-bold cursor-pointer'
onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
{manga[locale].title}
</p>
<div className='text-xs'>
{manga.authors.map((author, index) => (
<Fragment key={index}>
<span className='text-second-color font-[600] first:hidden'>, </span>
<span className='text-second-color font-[600]'>{author}</span>
</Fragment>
))}
</div>
</div>
{!!manga.latestChap.number && (
<p className='text-xs'>
Latest chap:{' '}
<span
className='text-second-color font-semibold cursor-pointer'
onClick={() => router.push(`/comic/${manga.id}/chapter/${manga.latestChap.number}`)}>
{manga.latestChap.number}
</span>
</p>
)}
</div>
{!!manga.latestChap.number && (
<p className='text-xs'>
Latest chap:{' '}
<span
className='text-second-color font-semibold cursor-pointer'
onClick={() => router.push(`/comic/${manga.id}/chapter/${manga.latestChap.number}`)}>
{manga.latestChap.number}
</span>
</p>
)}
</div>
</div>
))}
))}
</div>
</div>
)}
</div>
Expand Down Expand Up @@ -278,47 +284,49 @@ export default function Header({}) {
/>
{!!searchComic.data?.length && (
<div
className={`absolute bg-light-gray transition-all -bottom-4 translate-y-full duration-500 p-5 rounded-[20px] flex flex-col gap-7 max-h-[40vh] overflow-auto ${
className={`absolute bg-light-gray transition-all -bottom-4 translate-y-full duration-500 rounded-[20px] max-h-[40vh] overflow-hidden ${
isSearchFocused ? 'opacity-100 w-[160%]' : 'pointer-events-none opacity-0 w-full'
}`}>
{searchComic.data?.map((manga, index) => (
<div key={index} className='flex gap-2'>
<Image
src={manga.image || NoImage}
width={48}
height={64}
className='w-12 h-16 bg-medium-gray rounded-xl object-cover'
alt=''
/>
<div className='flex flex-col justify-between'>
<div>
<p
className='text-second-color text-base font-bold cursor-pointer'
onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
{manga[locale].title}
</p>
<div className='text-xs'>
{manga.authors.map((author, index) => (
<Fragment key={index}>
<span className='text-second-color font-[600] first:hidden'>, </span>
<span className='text-second-color font-[600]'>{author}</span>
</Fragment>
))}
<div className={`max-h-[40vh] overflow-auto flex flex-col gap-7 p-5`}>
{searchComic.data?.map((manga, index) => (
<div key={index} className='flex gap-2'>
<Image
src={manga.image || NoImage}
width={48}
height={64}
className='w-12 h-16 bg-medium-gray rounded-xl object-cover'
alt=''
/>
<div className='flex flex-col justify-between'>
<div>
<p
className='text-second-color text-base font-bold cursor-pointer'
onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
{manga[locale].title}
</p>
<div className='text-xs'>
{manga.authors.map((author, index) => (
<Fragment key={index}>
<span className='text-second-color font-[600] first:hidden'>, </span>
<span className='text-second-color font-[600]'>{author}</span>
</Fragment>
))}
</div>
</div>
{!!manga.latestChap.number && (
<p className='text-xs'>
Latest chap:{' '}
<span
className='text-second-color font-semibold cursor-pointer'
onClick={() => router.push(`/comic/${manga.id}/chapter/${manga.latestChap.number}`)}>
{manga.latestChap.number}
</span>
</p>
)}
</div>
{!!manga.latestChap.number && (
<p className='text-xs'>
Latest chap:{' '}
<span
className='text-second-color font-semibold cursor-pointer'
onClick={() => router.push(`/comic/${manga.id}/chapter/${manga.latestChap.number}`)}>
{manga.latestChap.number}
</span>
</p>
)}
</div>
</div>
))}
))}
</div>
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/chapter/readingSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default function ReadingSection({

useEffect(() => {
const pageHandler = (event: any) => {
if (!chapterData || !chapterData?.[chapterLocale]) return
if (!chapterData || !chapterData?.[chapterLocale] || (window as any).isSearchFocused) return
if (event.deltaY < 0 || event.which == 37 || event.which == 38) {
setCurrentPage((prevState) => (prevState - 2 < 0 ? 0 : prevState - 2))
} else if (event.deltaY > 0 || event.which == 39 || event.which == 40) {
Expand Down
41 changes: 30 additions & 11 deletions src/components/pages/homepage/comic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,22 @@ import { IComic } from 'src/models/comic'

export default function Comic(props: IComic) {
const { locale } = useRouter()
const router = useRouter()
return (
<>
<div className='hidden md:flex gap-[20px]'>
<Link href={`/comic/${props.id}/chapter/1`} className='flex-auto w-1/3'>
<Link href={`/comic/${props.id}`} className='flex-auto w-1/3 xl:hidden'>
<Image
src={props.image || NoImage}
alt=''
width={180}
height={240}
className={`${
props.image ? 'object-cover' : 'object-contain bg-light-gray'
} rounded-[15px] w-[180px] aspect-[180/240]`}
/>
</Link>
<Link href={`/comic/${props.id}/chapter/1`} className='flex-auto w-1/3 hidden xl:block'>
<Image
src={props.image || NoImage}
alt=''
Expand All @@ -27,7 +39,12 @@ export default function Comic(props: IComic) {
<div className='flex-auto w-2/3 flex flex-col justify-between gap-[10px]'>
<div className='flex flex-col gap-[10px]'>
<div>
<Link href={`/comic/${props.id}/chapter/1`} className=' text-second-color font-bold text-[18px]'>
<Link href={`/comic/${props.id}`} className=' text-second-color font-bold text-[18px] xl:hidden'>
{props[locale].title} <StatusLabel status={props.status.type}>{props.status.text}</StatusLabel>
</Link>
<Link
href={`/comic/${props.id}/chapter/1`}
className=' text-second-color font-bold text-[18px] hidden xl:block'>
{props[locale].title} <StatusLabel status={props.status.type}>{props.status.text}</StatusLabel>
</Link>
<div>
Expand All @@ -40,7 +57,7 @@ export default function Comic(props: IComic) {
))}
</div>
</div>
<div className='flex gap-[8px] '>
<div className='flex gap-[8px] flex-wrap'>
{props.tags.map((tag, index) => {
return <Tag key={index}>{tag[locale]}</Tag>
})}
Expand All @@ -55,14 +72,16 @@ export default function Comic(props: IComic) {
</div>
<div className=' text-[16px] leading-[20px] line-clamp-3'>{props[locale].description}</div>
</div>
<div className='leading-[20px]'>
Latest:{' '}
<Link
href={`/comic/${props.id}/chapter/${props.latestChap.number}`}
className='text-second-color font-[600]'>
Chap #{props.latestChap.number}
</Link>
</div>
{!!props.latestChap.number && (
<div className='leading-[20px]'>
Latest:{' '}
<Link
href={`/comic/${props.id}/chapter/${props.latestChap.number}`}
className='text-second-color font-[600]'>
Chap #{props.latestChap.number}
</Link>
</div>
)}
</div>
</div>
<div className='md:hidden'>
Expand Down
68 changes: 45 additions & 23 deletions src/components/pages/homepage/trendingComic.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,46 @@
import { EyeIcon } from "@heroicons/react/20/solid"
import NoImage from "images/no_img.png"
import Image from "next/image"
import Link from "next/link"
import { useRouter } from "next/router"
import { Fragment } from "react"
import { IComic } from "src/models/comic"
import { EyeIcon } from '@heroicons/react/20/solid'
import NoImage from 'images/no_img.png'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { Fragment } from 'react'
import { IComic } from 'src/models/comic'

export default function TrendingComic(props: IComic) {
const { locale } = useRouter()
return (
<div className='flex gap-[20px]'>
<div className='flex-auto w-1/3'>
<Image
src={props.image || NoImage}
alt=''
width={140}
height={180}
className={`rounded-[15px] w-[140px] aspect-[14/18] ${
props.image ? 'object-cover' : 'object-contain bg-light-gray'
}`}
/>
<Link href={`/comic/${props.id}`} className='flex-auto w-1/3 xl:hidden'>
<Image
src={props.image || NoImage}
alt=''
width={140}
height={180}
className={`rounded-[15px] w-[140px] aspect-[14/18] ${
props.image ? 'object-cover' : 'object-contain bg-light-gray'
}`}
/>
</Link>
<Link href={`/comic/${props.id}/chapter/1`} className='flex-auto w-1/3 hidden xl:block'>
<Image
src={props.image || NoImage}
alt=''
width={140}
height={180}
className={`rounded-[15px] w-[140px] aspect-[14/18] ${
props.image ? 'object-cover' : 'object-contain bg-light-gray'
}`}
/>
</Link>
</div>
<div className='flex-auto w-2/3 flex flex-col'>
<div className='font-bold text-[18px]'>{props[locale].title}</div>
<Link href={`/comic/${props.id}`} className=' font-bold text-[18px] xl:hidden'>
{props[locale].title}
</Link>
<Link href={`/comic/${props.id}/chapter/1`} className=' font-bold text-[18px] hidden xl:block'>
{props[locale].title}
</Link>
<div>
{props.authors.map((author, index) => (
<Fragment key={index}>
Expand All @@ -36,12 +54,16 @@ export default function TrendingComic(props: IComic) {
<EyeIcon className='w-5 inline mr-1' /> {props.views.toLocaleString('en-US')}
</div>
</div>
<div className='mt-[10px] [20px]'>
Latest:{' '}
<Link href={`/comic/${props.id}/chapter/${props.latestChap.number}`} className='text-second-color font-[600]'>
Chap #{props.latestChap.number}
</Link>
</div>
{!!props.latestChap.number && (
<div className='mt-[10px] [20px]'>
Latest:{' '}
<Link
href={`/comic/${props.id}/chapter/${props.latestChap.number}`}
className='text-second-color font-[600]'>
Chap #{props.latestChap.number}
</Link>
</div>
)}
</div>
</div>
)
Expand Down
Loading

0 comments on commit a981b5c

Please sign in to comment.