senaduka/old-kitabcitab-frontend
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add result page layout

Browse Source
This commit is contained in:
ismailsosic
2023-01-03 13:31:47 +01:00
parent ad0b9b36b9
commit e5c38d74f8
44 changed files with 1533 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
kitabcitab/pages/_app.js
View File

@@ -1,7 +1,6 @@
import Layout from '../components/Layout'
import '../styles/globals.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}

10
kitabcitab/pages/index.js
View File

@@ -1,5 +1,5 @@
import { AiOutlineSearch, AiOutlineClose } from 'react-icons/ai'
import '../styles/Layout.module.css'
import Link from 'next/link'
export default function HomePage() {
return (
@@ -17,16 +17,16 @@ export default function HomePage() {
laptop:w-[40%]
"
>
<a className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => console.log("Search for results")}><AiOutlineSearch size={25}/></a>
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => console.log("Search for results")}><AiOutlineSearch size={25}/></i>
<input className="bg-[#202124] group-hover:bg-[#303134] w-[80%] px-2 active:border-none text-white outline-none text-xl"/>
<a className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></a>
<i className='rounded-3xl hover:border-black text-[#9aa0a6] px-3' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></i>
</div>
<a href='/search'><button
<Link href='/search'><button
className='py-1 px-10 mt-10 text-3xl rounded-md bg-[#303134] text-white font-serif border-[1px] border-[#303134] hover:border-[#fff] hover:border-[1px]'
onClick={() => console.log("Searching")}
>
Traži
</button></a>
</button></Link>
</div>

42
kitabcitab/pages/results/[id]/index.js Normal file
View File

@@ -0,0 +1,42 @@
import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai'
import Link from "next/link"
import Page from '../../../components/Page'
const result = () => {
return (
<>
<div className="flex flex-col laptop:flex-row flex-wrap items-start 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]
w-[90vw]
bg-[#202124]
flex flex-row justify-around items-center
tablet:w-[70vw]
laptop:min-w-[40vw]
laptop:w-[60vw]
laptop:mx-0
laptop:my-10
laptop:justify-between
"
>
<i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => console.log("Prev page")}><AiOutlineLeft size={25} /></i>
<p className="text-xl tablet:text-2xl laptop:text-3xl text-[#fff] font-serif text-center">"Hamine pustolovine", Muhamed Ahmed Mustafa, str.71</p>
<i className='rounded-3xl text-[#fff] px-3 py-auto' onClick={() => console.log("Next page")}><AiOutlineRight size={25} /></i>
</div>
<Page />
</div>
</>
)
}
export default result

24
kitabcitab/pages/search.js
View File

@@ -1,37 +1,41 @@
import React from 'react'
import Results from '../components/Results'
import { AiOutlineClose } from 'react-icons/ai'
import Link from 'next/link'
const SearchPage = () => {
return (
<>
<div className="flex flex-col laptop:flex-row flex-wrap items-start w-[100vw] laptop:w-[80vw] h-[100vh]">
<div className="p-10 w-[100vw] laptop:w-[20vw]">
<a href='/'><p className="text-5xl tablet:text-6xl laptop:text-3xl text-white text-center font-serif ">KitabCitab</p></a>
<div className='flex flex-col justify-center'>
<div className="flex flex-col laptop:flex-row flex-wrap items-start w-[100vw] laptop:w-[80vw] laptop: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-[4vh]
max-w-[90vw]
min-w-[90vw]
bg-[#303134]
border-[1px] w-[90%] border-[#bdc1c6] rounded-3xl
border-[1px] w-[90vw] border-[#bdc1c6] rounded-3xl
flex flex-row justify-around items-center
tablet:w-[70%]
tablet:w-[70vw]
laptop:min-w-[40vw]
laptop:w-[40vw]
laptop:mx-0
laptop:my-10
laptop:justify-between
"
>
<input className="bg-[#303134] ml-5 w-[80%] active:border-none text-white outline-none text-lg "/>
<a className='rounded-3xl hover:border-black text-[#9aa0a6] px-3 py-auto' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></a>
<input className="bg-[#303134] ml-5 w-[80vw] active:border-none text-white outline-none text-lg "/>
<i className='rounded-3xl text-[#9aa0a6] px-3 py-auto' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></i>
</div>
</div>
</>
<Results />
</div>
)
}