From 61852360041d99f225868dcd3c837eea5e7c2e0b Mon Sep 17 00:00:00 2001 From: Paulina Prokop Date: Tue, 25 Oct 2022 12:42:43 +0200 Subject: [PATCH] add components --- README.md | 57 +++++++++++++++++----------------- components/Layout.tsx | 21 +++++++++++-- pages/terms-and-conditions.tsx | 23 ++++++++++++++ 3 files changed, 69 insertions(+), 32 deletions(-) create mode 100644 pages/terms-and-conditions.tsx diff --git a/README.md b/README.md index 10badba..ebb0ce9 100644 --- a/README.md +++ b/README.md @@ -2,39 +2,38 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next ## Getting Started -First, install dependencies: +First, run the development server: -```bash -npm install -# or -yarn -``` - -## Api key -* Create account and generate API key for Pexels API https://www.pexels.com/join-consumer/ -* Add .env.local file to your root folder and inside add your Pexels key to the API_KEY variable. - -## Running development server ```bash npm run dev # or yarn dev ``` -## Tasks - -#### Add list of images -- Display images by 5 in row -- After clicking image, image should be visible in the modal. Also, author of the photo should be displayed in right bottom corner -- Modal can be closed by clicking 'X' icon, outside of photo and pressing 'Esc' key on the keyboard. - -#### Searching images -- Add search field above image list -- Images should be filtered by typed text. -- Request should be fetched when user stopped typing (not for each letter ;) ) -- User should be able to choose how many images is visible per page. Available values: 10, 25, 50, -- List should be paginated - - #### Terms and condition page - - Add link in the footer of app 'Terms and Condition'. Link should provide to another page - - Get content for page from http://legalipsum.com/?count=2 +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +**Api key** + +add .env.local file to your root folder and inside add your pexels key to the API_KEY variable. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. + diff --git a/components/Layout.tsx b/components/Layout.tsx index 56db7b6..e886b2e 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,3 +1,4 @@ +import Link from 'next/link'; import { Container, Menu } from 'semantic-ui-react'; import { Icon } from 'semantic-ui-react' @@ -5,14 +6,28 @@ const Layout = ({ children }) => { return ( <> - Interview Frontend App + + + + Interview Frontend App + + + { children } - - @Interview Frontend App 2021 + +

@Interview Frontend App 2021

+
+ + Terms & Conditions + +
) diff --git a/pages/terms-and-conditions.tsx b/pages/terms-and-conditions.tsx new file mode 100644 index 0000000..7995b2c --- /dev/null +++ b/pages/terms-and-conditions.tsx @@ -0,0 +1,23 @@ +import { + Container, + Header, +} from 'semantic-ui-react'; + +const Terms = () => { + return ( + +
+ TERMS AND CONDITIONS +
+

Your Obligations Regarding Distribution. Application of This License Agreement does not bring the other work which contains a complete machine-readable copy of the Standard or Modified Versions of the preceding Paragraph, in the Source Code. Any Modification which You contribute must be conspicuously included in the Source form. Permission for Use and Modification Without Distribution It is therefore usually in your license (except to note that you delete from the Program, the distribution and/or modification of the printed materials or in combination with its exercise of rights under this License.

+

This License and the following acknowledgment: "This product includes open source and binary forms, with or without modification, is permitted to copy and distribute the Package if it fails to comply with the Work otherwise complies with the information you received it. Distribution of only part of the Original License. Distribution of the circumstances described in Section 3.4 and must make Source Code file due to statute, judicial order, or regulation which provides that the Source Code of the section as a relevant directory) where a Digital Document File with or without modification, are permitted to copy the Work constitutes direct or contributory patent infringement, then any Derivative Works that You delete from the Original Program and assumes all risks associated with the Source Code and the following steps: Make a reasonable fashion, credit the author(s). Where such credit is commonly given through page histories (such as a result, the Commercial Contributor would have been properly granted shall survive any termination of this License in any way to achieve your goal while meeting these conditions, and telling the user when used interactively with that Base Interpreter, the replacement component of the Derived Work.

+

Derived Works distributed in the Covered Code with only those rights set forth in this distribution used to control the distribution and/or modification of the Program; and (b) You must include a text file as part of itself to the personal jurisdiction of, and venue in, the state and federal courts within that District with respect to end users, business partners and the party making the Software is furnished to do so, subject to the wide range of software generally. NO WARRANTY There is no warranty for NetHack. If NetHack is modified by The Perl Foundation in the Licensed Program, or be made available by Apple under this License, provided that you distribute, wherever you describe the origin of the original version of Covered Code.

+ + ) +} + +export default Terms; \ No newline at end of file