Merge branch 'page_layout' into 'master'

add result page layout

See merge request saburly/kitabcitab/kitabcitab-frontend!4

kitabcitab/.next/build-manifest.json

@@ -25,10 +25,10 @@
       "static/chunks/main.js",
       "static/chunks/pages/_error.js"
     ],
-    "/search": [
+    "/results/[id]": [
       "static/chunks/webpack.js",
       "static/chunks/main.js",
-      "static/chunks/pages/search.js"
+      "static/chunks/pages/results/[id].js"
     ]
   },
   "ampFirstPages": []

kitabcitab/.next/server/middleware-build-manifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST={"polyfillFiles":["static/chunks/polyfills.js"],"devFiles":["static/chunks/react-refresh.js"],"ampDevFiles":["static/chunks/webpack.js","static/chunks/amp.js"],"lowPriorityFiles":["static/development/_buildManifest.js","static/development/_ssgManifest.js"],"rootMainFiles":[],"pages":{"/_app":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_app.js"],"/_error":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_error.js"],"/search":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/search.js"]},"ampFirstPages":[]}
+self.__BUILD_MANIFEST={"polyfillFiles":["static/chunks/polyfills.js"],"devFiles":["static/chunks/react-refresh.js"],"ampDevFiles":["static/chunks/webpack.js","static/chunks/amp.js"],"lowPriorityFiles":["static/development/_buildManifest.js","static/development/_ssgManifest.js"],"rootMainFiles":[],"pages":{"/_app":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_app.js"],"/_error":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_error.js"],"/results/[id]":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/results/[id].js"]},"ampFirstPages":[]}

kitabcitab/.next/server/pages-manifest.json

@@ -2,5 +2,5 @@
   "/_app": "pages/_app.js",
   "/_error": "pages/_error.js",
   "/_document": "pages/_document.js",
-  "/search": "pages/search.js"
+  "/results/[id]": "pages/results/[id].js"
 }

kitabcitab/.next/server/pages/_app.js

@@ -12,27 +12,6 @@ exports.id = "pages/_app";
 exports.ids = ["pages/_app"];
 exports.modules = {
 
-/***/ "./styles/Layout.module.css":
-/*!**********************************!*\
-  !*** ./styles/Layout.module.css ***!
-  \**********************************/
-/***/ ((module) => {
-
-eval("// Exports\nmodule.exports = {\n\t\"center\": \"Layout_center__V1x2i\"\n};\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zdHlsZXMvTGF5b3V0Lm1vZHVsZS5jc3MuanMiLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9raXRhYmNpdGFiLy4vc3R5bGVzL0xheW91dC5tb2R1bGUuY3NzP2EzZjMiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gRXhwb3J0c1xubW9kdWxlLmV4cG9ydHMgPSB7XG5cdFwiY2VudGVyXCI6IFwiTGF5b3V0X2NlbnRlcl9fVjF4MmlcIlxufTtcbiJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./styles/Layout.module.css\n");
-
-/***/ }),
-
-/***/ "./components/Layout.js":
-/*!******************************!*\
-  !*** ./components/Layout.js ***!
-  \******************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ \"react/jsx-dev-runtime\");\n/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _styles_Layout_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../styles/Layout.module.css */ \"./styles/Layout.module.css\");\n/* harmony import */ var _styles_Layout_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_styles_Layout_module_css__WEBPACK_IMPORTED_MODULE_1__);\n\n\nconst Layout = ({ children  })=>{\n    return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(\"div\", {\n        className: (_styles_Layout_module_css__WEBPACK_IMPORTED_MODULE_1___default().center),\n        children: children\n    }, void 0, false, {\n        fileName: \"/home/ismail/Desktop/KitabCitab/kitabcitab-frontend/kitabcitab/components/Layout.js\",\n        lineNumber: 5,\n        columnNumber: 5\n    }, undefined);\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Layout);\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jb21wb25lbnRzL0xheW91dC5qcy5qcyIsIm1hcHBpbmdzIjoiOzs7Ozs7OztBQUFBO0FBQWdEO0FBRWhELE1BQU1DLFNBQVMsQ0FBQyxFQUFFQyxTQUFRLEVBQUUsR0FBSztJQUMvQixxQkFDRSw4REFBQ0M7UUFBSUMsV0FBV0oseUVBQWE7a0JBQ3hCRTs7Ozs7O0FBR1Q7QUFHQSxpRUFBZUQsTUFBTUEsRUFBQSIsInNvdXJjZXMiOlsid2VicGFjazovL2tpdGFiY2l0YWIvLi9jb21wb25lbnRzL0xheW91dC5qcz81MTVjIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZXMgZnJvbSAnLi4vc3R5bGVzL0xheW91dC5tb2R1bGUuY3NzJ1xuXG5jb25zdCBMYXlvdXQgPSAoeyBjaGlsZHJlbiB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e3N0eWxlcy5jZW50ZXJ9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgPC9kaXY+XG4gIClcbn1cblxuXG5leHBvcnQgZGVmYXVsdCBMYXlvdXQiXSwibmFtZXMiOlsic3R5bGVzIiwiTGF5b3V0IiwiY2hpbGRyZW4iLCJkaXYiLCJjbGFzc05hbWUiLCJjZW50ZXIiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./components/Layout.js\n");
-
-/***/ }),
-
 /***/ "./pages/_app.js":
 /*!***********************!*\
   !*** ./pages/_app.js ***!
@@ -40,7 +19,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ \"react/jsx-dev-runtime\");\n/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_Layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/Layout */ \"./components/Layout.js\");\n/* harmony import */ var _styles_globals_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../styles/globals.css */ \"./styles/globals.css\");\n/* harmony import */ var _styles_globals_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_styles_globals_css__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\nfunction App({ Component , pageProps  }) {\n    return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(Component, {\n        ...pageProps\n    }, void 0, false, {\n        fileName: \"/home/ismail/Desktop/KitabCitab/kitabcitab-frontend/kitabcitab/pages/_app.js\",\n        lineNumber: 6,\n        columnNumber: 10\n    }, this);\n}\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9wYWdlcy9fYXBwLmpzLmpzIiwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBO0FBQXlDO0FBQ1g7QUFFZixTQUFTQyxJQUFJLEVBQUVDLFVBQVMsRUFBRUMsVUFBUyxFQUFFLEVBQUU7SUFFcEQscUJBQU8sOERBQUNEO1FBQVcsR0FBR0MsU0FBUzs7Ozs7O0FBQ2pDLENBQUMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9raXRhYmNpdGFiLy4vcGFnZXMvX2FwcC5qcz9lMGFkIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBMYXlvdXQgZnJvbSAnLi4vY29tcG9uZW50cy9MYXlvdXQnXG5pbXBvcnQgJy4uL3N0eWxlcy9nbG9iYWxzLmNzcydcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gQXBwKHsgQ29tcG9uZW50LCBwYWdlUHJvcHMgfSkge1xuICBcbiAgcmV0dXJuIDxDb21wb25lbnQgey4uLnBhZ2VQcm9wc30gLz5cbn1cbiJdLCJuYW1lcyI6WyJMYXlvdXQiLCJBcHAiLCJDb21wb25lbnQiLCJwYWdlUHJvcHMiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./pages/_app.js\n");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ \"react/jsx-dev-runtime\");\n/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _styles_globals_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../styles/globals.css */ \"./styles/globals.css\");\n/* harmony import */ var _styles_globals_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_styles_globals_css__WEBPACK_IMPORTED_MODULE_1__);\n\n\nfunction App({ Component , pageProps  }) {\n    return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(Component, {\n        ...pageProps\n    }, void 0, false, {\n        fileName: \"/home/ismail/Desktop/KitabCitab/kitabcitab-frontend/kitabcitab/pages/_app.js\",\n        lineNumber: 5,\n        columnNumber: 10\n    }, this);\n}\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9wYWdlcy9fYXBwLmpzLmpzIiwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUE7QUFBOEI7QUFFZixTQUFTQSxJQUFJLEVBQUVDLFVBQVMsRUFBRUMsVUFBUyxFQUFFLEVBQUU7SUFFcEQscUJBQU8sOERBQUNEO1FBQVcsR0FBR0MsU0FBUzs7Ozs7O0FBQ2pDLENBQUMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9raXRhYmNpdGFiLy4vcGFnZXMvX2FwcC5qcz9lMGFkIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAnLi4vc3R5bGVzL2dsb2JhbHMuY3NzJ1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcHAoeyBDb21wb25lbnQsIHBhZ2VQcm9wcyB9KSB7XG5cbiAgcmV0dXJuIDxDb21wb25lbnQgey4uLnBhZ2VQcm9wc30gLz5cbn1cbiJdLCJuYW1lcyI6WyJBcHAiLCJDb21wb25lbnQiLCJwYWdlUHJvcHMiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./pages/_app.js\n");
 
 /***/ }),
 

kitabcitab/.next/static/chunks/webpack.js

@@ -131,7 +131,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "33827d3868b1c324"; }
+/******/ 		__webpack_require__.h = function() { return "643b973058be7d13"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

kitabcitab/.next/static/development/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST = {__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],"/search":["static\u002Fchunks\u002Fpages\u002Fsearch.js"],sortedPages:["\u002F_app","\u002F_error","\u002Fsearch"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()
+self.__BUILD_MANIFEST = {__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],"/results/[id]":["static\u002Fchunks\u002Fpages\u002Fresults\u002F[id].js"],sortedPages:["\u002F_app","\u002F_error","\u002Fresults\u002F[id]"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()

kitabcitab/.vscode/c_cpp_properties.json

@@ -0,0 +1,16 @@
+{
+    "configurations": [
+        {
+            "name": "Linux",
+            "includePath": [
+                "${workspaceFolder}/**"
+            ],
+            "defines": [],
+            "compilerPath": "/usr/bin/gcc",
+            "cStandard": "gnu17",
+            "cppStandard": "gnu++17",
+            "intelliSenseMode": "linux-gcc-x64"
+        }
+    ],
+    "version": 4
+}

kitabcitab/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

kitabcitab/components/Layout.js

@@ -1,12 +0,0 @@
-import styles from '../styles/Layout.module.css'
-
-const Layout = ({ children }) => {
-  return (
-    <div className={styles.center}>
-        {children}
-    </div>
-  )
-}
-
-
-export default Layout

kitabcitab/components/Page.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const Page = () => {
+
+    const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet, ante non condimentum tincidunt, nulla eros consectetur lacus, eu sagittis massa massa sit amet odio. Cras porttitor pharetra dapibus. Pellentesque lacinia iaculis libero eget dapibus. Nulla fermentum consectetur nisi, a sodales nisi dictum non. Sed placerat, enim quis tristique ullamcorper, nisl nisl semper lorem, vel euismod nunc mauris fringilla est. Vestibulum sit amet dui varius, posuere velit et, tempus est. Nullam pellentesque pretium nulla tempor ullamcorper. Curabitur at nisi pharetra, rhoncus risus at, malesuada velit. Nulla lobortis est vel odio pellentesque gravida. Ut id sem suscipit, maximus augue at, dictum sem. Ut vestibulum felis massa, ut dapibus elit porttitor et. Aenean consequat a ipsum volutpat pellentesque. Phasellus turpis ligula, mollis vel maximus ac, pretium sit amet magna. Suspendisse commodo sit amet arcu at condimentum. Praesent vitae enim turpis. Pellentesque luctus orci tincidunt felis iaculis scelerisque. Maecenas placerat, erat vitae scelerisque vehicula, neque augue imperdiet ligula, in pretium turpis mi at nulla. Nullam ornare dolor sapien, non suscipit risus laoreet ac. Suspendisse molestie leo a diam tincidunt, ac mattis nisi laoreet. Curabitur ultrices id augue suscipit euismod. Praesent rhoncus vitae nulla ultricies molestie. Quisque mi dolor, aliquam nec pellentesque sollicitudin, sagittis ut metus. Fusce eu diam eget lorem sollicitudin feugiat. Sed a urna mauris. Vestibulum eget elit dui. Curabitur at ex dolor. Aliquam erat volutpat. Duis quam ligula, imperdiet viverra quam vitae, facilisis suscipit metus. Praesent et pretium velit, ut sollicitudin mi. Nulla lacinia id nisi sit amet venenatis. In sollicitudin, dolor sit amet faucibus efficitur, metus urna pretium sapien, quis lacinia risus quam in felis. Curabitur tempor dui eget odio eleifend viverra."
+
+  return (
+    <div className='flex justify-self-end self-end'>
+    <p className='
+    min-w-[90vw]
+    w-[90vw]
+    tablet:w-[70vw]
+
+    laptop:min-w-[40vw]
+    laptop:w-[40vw]
+
+    laptop:self-end
+    laptop:justify-self-end
+    text-center
+    text-white
+    '
+    >
+        {text}
+    </p>
+    </div>
+  )
+}
+
+export default Page

kitabcitab/components/Result.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import Link from 'next/link'
+
+const Result = ({result}) => {
+
+    const {title, heading, writer, page} = result
+
+  return (
+    <Link href="/results/[id]" as={`/results/${result.id}`} className='
+    self-end
+    bg-[#202124] 
+    w-[100%]
+    max-w-[50vw]
+    p-3 m-auto
+    border-4
+    border-[#303134]
+    font-serif text-base 
+    text-lg
+    tablet:text-2xl text-white
+    laptop:text-lg
+    '
+    >
+        <p className='m-3'>{heading}</p>
+        <p className='m-3'>"{title}" - {writer} - str. {page}.</p>
+    </Link>
+  )
+}
+
+export default Result

kitabcitab/components/Results.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import Result from './Result'
+
+const Results = () => {
+
+
+    const data = [
+        {
+            id: 1,
+            title: 'Prevod Kur\'ana',
+            writer: 'Besim Korkut',
+            heading: '16. "Pa, koju blagodat Gospodara svoga poricete?"',
+            page: 531
+        },
+        {
+            id: 2,
+            title: 'Hamine pustolovine',
+            writer: 'Muhamed Ahmed Mustafa',
+            heading: 'Kad mu se Ramo pozalio da zena ne prica sa njim, Hamo je citirao ajet: "Pa, koju blagodat Gospodara svoga poricete?"',
+            page: 71
+        },
+    ]
+
+  return (
+    <div className='
+    flex flex-col justify-around gap-5
+
+    py-5
+    w-[90vw]
+    mt-5
+    m-auto
+    laptop:mt-0
+    laptop:ml-[8rem]
+    laptop:w-[55vw]
+    bg-[#202124]
+
+
+    '>
+        {data.map((result, id) => <Result key={id} result={result}/>)}
+    </div>
+  )
+}
+
+export default Results

kitabcitab/pages/_app.js

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

kitabcitab/pages/index.js

@@ -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>
 
     

kitabcitab/pages/results/[id]/index.js

@@ -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

kitabcitab/pages/search.js

@@ -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>
   )
 }
 

kitabcitab/styles/Layout.module.css

@@ -1,9 +0,0 @@
-.center {
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}