maximx1/ever-given-pod
1
0
Fork 0
Code Issues 25 Pull Requests Packages Projects Releases Wiki Activity

#30 Adding some spacing to the home page.

Browse Source
This commit is contained in:
Justin Walrath 2025-05-16 15:33:46 -04:00
parent dfe97bf864
commit 08b7f8a5ae
1 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/page.tsx
View File

@ -28,39 +28,41 @@ export default function Home() {
return (
<Main>
<div className="w-full flex justify-center mt-15">
<div className="w-[100px] h-[100px] flex items-center justify-center">
<Image
src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/site-icon.svg`}
alt="Site Icon"
width={100}
height={100}
className="object-contain"
priority
/>
</div>
</div>
<div className="w-full flex justify-center mt-15 mb-25">
<div className="relative w-[320px]">
<input
ref={inputRef}
type='text'
placeholder='Search…'
className='w-full pr-12 pl-4 py-4 rounded-lg bg-purple-200 text-base outline-none border border-purple-200'
/>
<button
type="button"
onClick={handleSearchClick}
className="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded hover:bg-purple-100 transition"
tabIndex={0}
>
<div className='min-h-[65vh]'>
<div className="w-full flex justify-center mt-15">
<div className="w-[100px] h-[100px] flex items-center justify-center">
<Image
src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/icons/search.svg`}
alt="Search"
width={24}
height={24}
src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/site-icon.svg`}
alt="Site Icon"
width={100}
height={100}
className="object-contain"
priority
/>
</button>
</div>
</div>
<div className="w-full flex justify-center mt-15 mb-25">
<div className="relative w-[320px]">
<input
ref={inputRef}
type='text'
placeholder='Search…'
className='w-full pr-12 pl-4 py-4 rounded-lg bg-purple-200 text-base outline-none border border-purple-200'
/>
<button
type="button"
onClick={handleSearchClick}
className="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded hover:bg-purple-100 transition"
tabIndex={0}
>
<Image
src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/icons/search.svg`}
alt="Search"
width={24}
height={24}
/>
</button>
</div>
</div>
</div>
@ -75,7 +77,7 @@ export default function Home() {
</div>
</div>
<div className="w-full px-8 mt-8">
<div className="w-full max-w-[1200px] px-8 mt-8 mx-auto">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
{podcasts.map(podcast => (
<button