├── .babelrc
├── .eslintrc.json
├── .gitignore
├── README.md
├── __tests__
    ├── __snapshots__
    │   └── snapshot.js.snap
    ├── snapshot.js
    └── testing-library.js
├── components
    ├── filter.tsx
    ├── header.tsx
    └── jobItem.tsx
├── config
    └── jest
    │   └── cssTransform.js
├── declaration.d.ts
├── jest.config.js
├── mock
    └── jobs.json
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    └── index.tsx
├── public
    ├── favicon-32x32.png
    ├── favicon.ico
    ├── icon-remove.svg
    ├── images
    │   ├── bg-header-desktop.svg
    │   └── bg-header-mobile.svg
    ├── logos
    │   ├── account.svg
    │   ├── eyecam-co.svg
    │   ├── faceit.svg
    │   ├── insure.svg
    │   ├── loop-studios.svg
    │   ├── manage.svg
    │   ├── myhome.svg
    │   ├── photosnap.svg
    │   ├── shortly.svg
    │   └── the-air-filter-company.svg
    └── zeit.svg
├── setupTests.js
├── styles
    ├── _mixin.scss
    ├── _variables.scss
    ├── global.scss
    ├── index.scss
    └── shared.scss
├── tsconfig.json
└── types
    └── types.ts


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["next/babel"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |       "jest": true
4 |   }
5 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Next.js + Jest
 2 | 
 3 | This example shows how to configure Jest to work with Next.js.
 4 | 
 5 | This includes Next.js' built-in support for Global CSS, CSS Modules, and TypeScript!
 6 | 
 7 | ## How to Use
 8 | 
 9 | Quickly get started using [Create Next App](https://github.com/vercel/next.js/tree/canary/packages/create-next-app#readme)!
10 | 
11 | In your terminal, run the following command:
12 | 
13 | ```bash
14 | npx create-next-app --example with-jest
15 | ```
16 | 
17 | ## Run Jest Tests
18 | 
19 | ```bash
20 | npm test
21 | ```
22 | 


--------------------------------------------------------------------------------
/__tests__/__snapshots__/snapshot.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`renders homepage unchanged 1`] = `
 4 | <div
 5 |   className="container"
 6 | >
 7 |   <main>
 8 |     <h1
 9 |       className="title"
10 |     >
11 |       Welcome to
12 |       <a
13 |         href="https://nextjs.org"
14 |       >
15 |         Next.js!
16 |       </a>
17 |     </h1>
18 |     <p
19 |       className="description"
20 |     >
21 |       Get started by editing
22 |       <code>
23 |         pages/index.js
24 |       </code>
25 |     </p>
26 |     <div
27 |       className="grid"
28 |     >
29 |       <a
30 |         className="card"
31 |         href="https://nextjs.org/docs"
32 |       >
33 |         <h3>
34 |           Documentation →
35 |         </h3>
36 |         <p>
37 |           Find in-depth information about Next.js features and API.
38 |         </p>
39 |       </a>
40 |       <a
41 |         className="card"
42 |         href="https://nextjs.org/learn"
43 |       >
44 |         <h3>
45 |           Learn →
46 |         </h3>
47 |         <p>
48 |           Learn about Next.js in an interactive course with quizzes!
49 |         </p>
50 |       </a>
51 |       <a
52 |         className="card"
53 |         href="https://github.com/vercel/next.js/tree/master/examples"
54 |       >
55 |         <h3>
56 |           Examples →
57 |         </h3>
58 |         <p>
59 |           Discover and deploy boilerplate example Next.js projects.
60 |         </p>
61 |       </a>
62 |       <a
63 |         className="card"
64 |         href="https://vercel.com/import/nextjs"
65 |       >
66 |         <h3>
67 |           Deploy →
68 |         </h3>
69 |         <p>
70 |           Instantly deploy your Next.js site to a public URL with Vercel.
71 |         </p>
72 |       </a>
73 |     </div>
74 |   </main>
75 | </div>
76 | `;
77 | 


--------------------------------------------------------------------------------
/__tests__/snapshot.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import renderer from 'react-test-renderer'
3 | import Index from '../pages/index'
4 | 
5 | it('renders homepage unchanged', () => {
6 |   const tree = renderer.create(<Index />).toJSON()
7 |   expect(tree).toMatchSnapshot()
8 | })
9 | 


--------------------------------------------------------------------------------
/__tests__/testing-library.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { render } from '@testing-library/react'
 3 | import Index from '../pages/index'
 4 | 
 5 | test('renders deploy link', () => {
 6 |   const { getByText } = render(<Index />)
 7 |   const linkElement = getByText(
 8 |     /Instantly deploy your Next\.js site to a public URL with Vercel\./
 9 |   )
10 |   expect(linkElement).toBeInTheDocument()
11 | })
12 | 


--------------------------------------------------------------------------------
/components/filter.tsx:
--------------------------------------------------------------------------------
 1 | import { 
 2 |   FC,
 3 | } from 'react';
 4 | import 
 5 |   Select,
 6 |   { components }
 7 | from 'react-select';
 8 | import variants from '../styles/_variables.scss';
 9 | 
10 | interface FilterProps {
11 |   className?: string;
12 |   options?: object;
13 |   value?: any;
14 |   onChange?: any;
15 | }
16 | 
17 | const filterStyle = {
18 |   control: styles => ({ 
19 |     ...styles,
20 |     backgroundColor: 'white',
21 |     minHeight: 65,
22 |     marginBottom: 45,
23 |     borderRadius: 5,
24 |     border: 'none',
25 |     boxShadow: '0px 20px 21px #d4e9ec'
26 |   }),
27 |   valueContainer: (styles) => ({
28 |     ...styles,
29 |     padding: '10px 30px'
30 |   }),
31 |   multiValue: (styles) => ({
32 |     ...styles,
33 |     color: variants.green,
34 |     backgroundColor: variants.backgroundColor,
35 |     margin: '0 7px'
36 |   }),
37 |   multiValueLabel: (styles, { data }) => ({
38 |     ...styles,
39 |     color: variants.green,
40 |     fontSize: 14,
41 |     fontWeight: 'bold',
42 |     padding: '10px 10px',
43 |   }),
44 |   multiValueRemove: (styles, { data }) => ({
45 |     ...styles,
46 |     color: '#fff',
47 |     backgroundColor: variants.green,
48 |     padding: '5px 10px',
49 |     
50 |     ':hover': {
51 |       backgroundColor: '#000000',
52 |       color: 'white',
53 |       cursor: 'pointer'
54 |     },
55 |     
56 |   }),
57 | };
58 | 
59 | const ClearIndicator = props => {
60 |   const {
61 |     getStyles,
62 |     innerProps: { ref, ...restInnerProps },
63 |   } = props;
64 |   return (
65 |     <div
66 |       {...restInnerProps}
67 |       ref={ref}
68 |       style={getStyles('clearIndicator', props)}
69 |     >
70 |       <a className="btn-clear">Clear</a>
71 |     </div>
72 |   );
73 | };
74 | 
75 | 
76 | const Filter: FC<FilterProps> = ({ 
77 |   options, 
78 |   className, 
79 |   ...rest 
80 | }) => {
81 |   return (
82 |     <Select
83 |       isMulti
84 |       components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null, ClearIndicator }}
85 |       isSearchable={false}
86 |       styles={{ ...filterStyle }}
87 |       options={options}
88 |       className={className}
89 |       {...rest}
90 |     />
91 |   );
92 | }
93 | 
94 | export default Filter;
95 | 


--------------------------------------------------------------------------------
/components/header.tsx:
--------------------------------------------------------------------------------
 1 | const Header = ({...rest}) => {
 2 |   return (
 3 |     <div
 4 |       className="header"
 5 |       {...rest}
 6 |     />
 7 |   );
 8 | }
 9 | 
10 | export default Header;
11 | 


--------------------------------------------------------------------------------
/components/jobItem.tsx:
--------------------------------------------------------------------------------
  1 | import PropTypes from 'prop-types';
  2 | import { 
  3 |   useEffect, 
  4 |   useState,
  5 |   FC
  6 | } from 'react';
  7 | import type { JobType } from '../types/types';
  8 | 
  9 | const featureLabel= (feature) => {
 10 |   const map = {
 11 |     new: {
 12 |       label: 'New!',
 13 |       className: 'new'
 14 |     },
 15 |     featured: {
 16 |       label: 'Featured',
 17 |       className: 'featured'
 18 |     }
 19 |   };
 20 | 
 21 |   const { label, className } = map[feature];
 22 | 
 23 |   return (
 24 |     <li className={className}>
 25 |       {label}
 26 |     </li>
 27 |   )
 28 | };
 29 | 
 30 | const JobItem = ({
 31 |   job,
 32 |   handleChange
 33 | }) => {
 34 |   useEffect(() => {
 35 |   });
 36 | 
 37 |   return (
 38 |     <div className={`job-item ${job.featured ? 'featured' : ''}`}>
 39 |       <div className="job-role">
 40 |         <img
 41 |           alt="company-logo"
 42 |           src={job.logo}
 43 |           className="company-logo"
 44 |         />
 45 |         <div 
 46 |           className="detail fontsize-normal"
 47 |         >
 48 |           <div 
 49 |             className="company-features"
 50 |           >
 51 |             <p 
 52 |               className="company-name fontsize-normal font-semi-bold"
 53 |             >
 54 |               {job.company}
 55 |             </p>
 56 |             <ul className="features">
 57 |               {
 58 |                 job.new && (
 59 |                   featureLabel("new")
 60 |                 )
 61 |               }
 62 |               {
 63 |                 job.featured && (
 64 |                   featureLabel("featured")
 65 |                 )
 66 |               }
 67 |             </ul>
 68 |           </div>
 69 |           <p className="position fontsize-big font-semi-bold">
 70 |             {job.position}
 71 |           </p>
 72 |           <div className="others">
 73 |             <p>{job.postedAt}</p>
 74 |             <p>{job.contract}</p>
 75 |             <p>{job.location}</p>
 76 |           </div>
 77 |         </div>
 78 |       </div>
 79 |       <hr />
 80 |       <ul className="job-stack">
 81 |         {
 82 |           job.role && (
 83 |             <li 
 84 |               className="fontsize-normal font-semi-bold"
 85 |               onClick={handleChange(job.role)}
 86 |             >
 87 |               {job.role}
 88 |             </li>
 89 |           )
 90 |         }
 91 |         {
 92 |           job.level && (
 93 |             <li className="fontsize-normal font-semi-bold"
 94 |               onClick={handleChange(job.level)}
 95 |             >
 96 |               {job.level}
 97 |             </li>
 98 |           )
 99 |         }
100 |         {
101 |           job.tools && job.tools.map((tool, index) => (
102 |             <li 
103 |               key={index} 
104 |               onClick={handleChange(tool)}
105 |               className="fontsize-normal font-semi-bold"
106 |             >
107 |               {tool}
108 |             </li>
109 |           ))
110 |         }
111 |         {
112 |           job.languages && job.languages.map((language, index) => (
113 |             <li 
114 |               key={index}
115 |               onClick={handleChange(language)}
116 |               className="fontsize-normal font-semi-bold"
117 |             >
118 |               {language}
119 |             </li>
120 |           ))
121 |         }
122 |       </ul>
123 |     </div>
124 |   )
125 | }
126 | 
127 | export default JobItem;


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   process() {
3 |     return 'module.exports = {};'
4 |   },
5 |   getCacheKey() {
6 |     return 'cssTransform'
7 |   },
8 | }
9 | 


--------------------------------------------------------------------------------
/declaration.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.scss' {
2 |   const content: {[className: string]: string};
3 |   export default content;
4 | }


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   collectCoverageFrom: [
 3 |     '**/*.{js,jsx,ts,tsx}',
 4 |     '!**/*.d.ts',
 5 |     '!**/node_modules/**',
 6 |   ],
 7 |   setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
 8 |   testPathIgnorePatterns: ['/node_modules/', '/.next/'],
 9 |   transform: {
10 |     '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
11 |     '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
12 |   },
13 |   transformIgnorePatterns: [
14 |     '/node_modules/',
15 |     '^.+\\.module\\.(css|sass|scss)$',
16 |   ],
17 |   moduleNameMapper: {
18 |     '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
19 |   },
20 | }
21 | 


--------------------------------------------------------------------------------
/mock/jobs.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "id": 1,
  4 |     "company": "Photosnap",
  5 |     "logo": "/logos/photosnap.svg",
  6 |     "new": true,
  7 |     "featured": true,
  8 |     "position": "Senior Frontend Developer",
  9 |     "role": "Frontend",
 10 |     "level": "Senior",
 11 |     "postedAt": "1d ago",
 12 |     "contract": "Full Time",
 13 |     "location": "USA Only",
 14 |     "languages": ["HTML", "CSS", "JavaScript"],
 15 |     "tools": []
 16 |   },
 17 |   {
 18 |     "id": 2,
 19 |     "company": "Manage",
 20 |     "logo": "/logos/manage.svg",
 21 |     "new": true,
 22 |     "featured": true,
 23 |     "position": "Fullstack Developer",
 24 |     "role": "Fullstack",
 25 |     "level": "Midweight",
 26 |     "postedAt": "1d ago",
 27 |     "contract": "Part Time",
 28 |     "location": "Remote",
 29 |     "languages": ["Python"],
 30 |     "tools": ["React"]
 31 |   },
 32 |   {
 33 |     "id": 3,
 34 |     "company": "Account",
 35 |     "logo": "/logos/account.svg",
 36 |     "new": true,
 37 |     "featured": false,
 38 |     "position": "Junior Frontend Developer",
 39 |     "role": "Frontend",
 40 |     "level": "Junior",
 41 |     "postedAt": "2d ago",
 42 |     "contract": "Part Time",
 43 |     "location": "USA Only",
 44 |     "languages": ["JavaScript"],
 45 |     "tools": ["React", "Sass"]
 46 |   },
 47 |   {
 48 |     "id": 4,
 49 |     "company": "MyHome",
 50 |     "logo": "/logos/myhome.svg",
 51 |     "new": false,
 52 |     "featured": false,
 53 |     "position": "Junior Frontend Developer",
 54 |     "role": "Frontend",
 55 |     "level": "Junior",
 56 |     "postedAt": "5d ago",
 57 |     "contract": "Contract",
 58 |     "location": "USA Only",
 59 |     "languages": ["CSS", "JavaScript"],
 60 |     "tools": []
 61 |   },
 62 |   {
 63 |     "id": 5,
 64 |     "company": "Loop Studios",
 65 |     "logo": "/logos/loop-studios.svg",
 66 |     "new": false,
 67 |     "featured": false,
 68 |     "position": "Software Engineer",
 69 |     "role": "FullStack",
 70 |     "level": "Midweight",
 71 |     "postedAt": "1w ago",
 72 |     "contract": "Full Time",
 73 |     "location": "Worldwide",
 74 |     "languages": ["JavaScript"],
 75 |     "tools": ["Ruby", "Sass"]
 76 |   },
 77 |   {
 78 |     "id": 6,
 79 |     "company": "FaceIt",
 80 |     "logo": "/logos/faceit.svg",
 81 |     "new": false,
 82 |     "featured": false,
 83 |     "position": "Junior Backend Developer",
 84 |     "role": "Backend",
 85 |     "level": "Junior",
 86 |     "postedAt": "2w ago",
 87 |     "contract": "Full Time",
 88 |     "location": "UK Only",
 89 |     "languages": ["Ruby"],
 90 |     "tools": ["RoR"]
 91 |   },
 92 |   {
 93 |     "id": 7,
 94 |     "company": "Shortly",
 95 |     "logo": "/logos/shortly.svg",
 96 |     "new": false,
 97 |     "featured": false,
 98 |     "position": "Junior Developer",
 99 |     "role": "Frontend",
100 |     "level": "Junior",
101 |     "postedAt": "2w ago",
102 |     "contract": "Full Time",
103 |     "location": "Worldwide",
104 |     "languages": ["HTML", "JavaScript"],
105 |     "tools": ["Sass"]
106 |   },
107 |   {
108 |     "id": 8,
109 |     "company": "Insure",
110 |     "logo": "/logos/insure.svg",
111 |     "new": false,
112 |     "featured": false,
113 |     "position": "Junior Frontend Developer",
114 |     "role": "Frontend",
115 |     "level": "Junior",
116 |     "postedAt": "2w ago",
117 |     "contract": "Full Time",
118 |     "location": "USA Only",
119 |     "languages": ["JavaScript"],
120 |     "tools": ["Vue", "Sass"]
121 |   },
122 |   {
123 |     "id": 9,
124 |     "company": "Eyecam Co.",
125 |     "logo": "/logos/eyecam-co.svg",
126 |     "new": false,
127 |     "featured": false,
128 |     "position": "Full Stack Engineer",
129 |     "role": "Fullstack",
130 |     "level": "Midweight",
131 |     "postedAt": "3w ago",
132 |     "contract": "Full Time",
133 |     "location": "Worldwide",
134 |     "languages": ["JavaScript", "Python"],
135 |     "tools": ["Django"]
136 |   },
137 |   {
138 |     "id": 10,
139 |     "company": "The Air Filter Company",
140 |     "logo": "/logos/the-air-filter-company.svg",
141 |     "new": false,
142 |     "featured": false,
143 |     "position": "Front-end Dev",
144 |     "role": "Frontend",
145 |     "level": "Junior",
146 |     "postedAt": "1mo ago",
147 |     "contract": "Part Time",
148 |     "location": "Worldwide",
149 |     "languages": ["JavaScript"],
150 |     "tools": ["React", "Sass"]
151 |   }
152 | ]


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const withSass = require('@zeit/next-sass');
 2 | const withCSS = require("@zeit/next-css");
 3 | 
 4 | module.exports = withCSS(withSass({
 5 |    webpack (config, options) {
 6 |        config.module.rules.push({
 7 |            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
 8 |            use: {
 9 |                loader: 'url-loader',
10 |                options: {
11 |                    limit: 100000
12 |                }
13 |            }
14 |        });
15 | 
16 |        return config;
17 |    }
18 | }));


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "with-jest",
 3 |   "version": "0.1.0",
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "export": "npm run build && next export",
 9 |     "test": "jest --watch",
10 |     "test:ci": "jest --ci"
11 |   },
12 |   "dependencies": {
13 |     "@zeit/next-sass": "^1.0.1",
14 |     "next": "latest",
15 |     "node-sass": "^4.14.1",
16 |     "react": "16.12.0",
17 |     "react-dom": "16.12.0",
18 |     "react-select": "^3.1.0"
19 |   },
20 |   "devDependencies": {
21 |     "@testing-library/jest-dom": "^5.1.0",
22 |     "@testing-library/react": "^9.4.0",
23 |     "@types/node": "^14.6.3",
24 |     "@types/react": "^16.9.49",
25 |     "babel-jest": "^25.5.1",
26 |     "identity-obj-proxy": "^3.0.0",
27 |     "jest": "^25.5.4",
28 |     "react-test-renderer": "^16.12.0",
29 |     "typescript": "^4.0.2",
30 |     "url-loader": "^4.1.0"
31 |   },
32 |   "license": "MIT"
33 | }
34 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/index.scss'
2 | 
3 | // This default export is required in a new `pages/_app.js` file.
4 | export default function MyApp({ Component, pageProps }) {
5 |   return <Component {...pageProps} />
6 | }
7 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import Head from 'next/head';
  2 | import { 
  3 |   useEffect, 
  4 |   useState,
  5 |   FC,
  6 |   ChangeEvent,
  7 |   KeyboardEvent,
  8 |   useCallback
  9 | } from 'react';
 10 | import data from '../mock/jobs.json';
 11 | import Header from '../components/header';
 12 | import JobItem from '../components/jobItem';
 13 | import Filter from '../components/filter';
 14 | 
 15 | const stackData = [
 16 |   // role
 17 |   'Frontend',
 18 |   'Backend',
 19 |   'Fullstack',
 20 |   // level
 21 |   'Midweight',
 22 |   'Junior',
 23 |   // languages
 24 |   'Ruby',
 25 |   'HTML',
 26 |   'CSS',
 27 |   'Python',
 28 |   'JavaScript',
 29 |   // tools
 30 |   'Vue',
 31 |   'React',
 32 |   'Django',
 33 |   'Sass',
 34 |   'RoR'
 35 | ];
 36 | 
 37 | const options = stackData.map(item => ({
 38 |   label : item,
 39 |   value : item
 40 | }))
 41 | 
 42 | 
 43 | const Home = () => {
 44 |   const [jobs, setJobs] = useState([]);
 45 |   const [filteredJobs, setFilteredJobs] = useState([]);
 46 |   const [selectedStacks, setSelectedStacks] = useState([]);
 47 | 
 48 |   const handleSelectItem = (stackLabel: string): void => {
 49 |     if (!selectedStacks.find(x=>x.label === stackLabel)) {
 50 |       setSelectedStacks((prevSelects) => [...prevSelects, {label:stackLabel, value: stackLabel}]);
 51 |     } else {
 52 |       setSelectedStacks((prevSelects) => prevSelects.filter((x) => x.label !== stackLabel));
 53 |     }
 54 |   };
 55 | 
 56 |   const isMatched = useCallback((a, b)=>{
 57 |     let flag = true;
 58 |     a.forEach(itemA=>{
 59 |       if (b.indexOf(itemA) < 0){
 60 |         flag = false;
 61 |         return;
 62 |       }
 63 |     });
 64 |     return flag;
 65 |   }, []);
 66 | 
 67 |   useEffect(() => {
 68 |     setJobs(data);
 69 |   }, []);
 70 | 
 71 |   useEffect(()=>{
 72 |     if (selectedStacks.length > 0 && selectedStacks !== null) {
 73 |       const labels = selectedStacks.map(x => x.label);
 74 |       setFilteredJobs(
 75 |         jobs.filter(
 76 |           x => labels.indexOf(x.role) >= 0 
 77 |           || labels.indexOf(x.level) >=0 
 78 |           || isMatched(labels, x.languages) 
 79 |           || isMatched(labels, x.tools)
 80 |         )
 81 |       );
 82 |     } else{
 83 |       setFilteredJobs(jobs);
 84 |     }
 85 |   }, [selectedStacks, jobs]);
 86 | 
 87 |   return (
 88 |     <>
 89 |       <Head>
 90 |         <title>Job List | Copilot</title>
 91 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 92 |         <link rel="icon" href="/favicon.ico" />
 93 |         <link href="https://fonts.googleapis.com/css2?family=Spartan:wght@500;700&display=swap" rel="stylesheet" />
 94 |       </Head>
 95 |       <Header />
 96 |       
 97 |       <main>
 98 |         <div className="container">
 99 |           <Filter 
100 |             options={options}
101 |             value={selectedStacks}
102 |             onChange={action => {
103 |               setSelectedStacks(action || []);
104 |             }}
105 |             className="select-filter"
106 |           />
107 |           {
108 |             filteredJobs && filteredJobs.map(item => (
109 |               <JobItem
110 |                 key={item.id}
111 |                 job={item}
112 |                 handleChange={handleSelectItem}
113 |               />
114 |             ))
115 |           }
116 |         </div>
117 |       </main>
118 |     </>
119 |   )
120 | }
121 | 
122 | export default Home
123 | 


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/potentialdev-web/next-typescript-sass/467fe0bd2c54db304fc9db7920dc1e4e0689061e/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/potentialdev-web/next-typescript-sass/467fe0bd2c54db304fc9db7920dc1e4e0689061e/public/favicon.ico


--------------------------------------------------------------------------------
/public/icon-remove.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="#FFF" fill-rule="evenodd" d="M11.314 0l2.121 2.121-4.596 4.596 4.596 4.597-2.121 2.121-4.597-4.596-4.596 4.596L0 11.314l4.596-4.597L0 2.121 2.121 0l4.596 4.596L11.314 0z"/></svg>


--------------------------------------------------------------------------------
/public/images/bg-header-desktop.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1366" height="156"><g fill="#63BABA" fill-rule="evenodd"><path d="M470.577 563.429c-51.432-51.425-51.438-134.806-.013-186.237l.013-.013L867.235-19.424c51.441-51.434 134.836-51.434 186.276 0 48.811 48.804 51.304 126.392 7.473 178.135l178.158-178.135c51.441-51.434 134.836-51.434 186.277 0 51.431 51.424 51.437 134.805.013 186.237-.005.004-.01.008-.013.013l-396.66 396.603c-51.44 51.433-134.834 51.433-186.275 0-48.812-48.805-51.304-126.394-7.471-178.138L656.853 563.43c-51.441 51.433-134.836 51.433-186.276 0zM342.268 45.605c-51.432-51.425-51.438-134.806-.013-186.237l.013-.013 396.658-396.603c51.441-51.434 134.836-51.434 186.277 0 51.431 51.424 51.437 134.805.013 186.237-.005.004-.01.008-.013.013L528.543 45.605c-51.44 51.433-134.834 51.433-186.275 0zm-444.692 71.824c-51.432-51.424-51.438-134.806-.013-186.237l.013-.013 396.658-396.603c51.441-51.434 134.836-51.434 186.277 0 51.431 51.424 51.437 134.805.013 186.237a80.86 80.86 0 01-.013.013L83.85 117.429c-51.44 51.433-134.834 51.433-186.275 0z"/></g></svg>


--------------------------------------------------------------------------------
/public/images/bg-header-mobile.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="375" height="156"><path fill="#63BABA" fill-rule="evenodd" d="M-86.732 487.429c-51.432-51.425-51.438-134.806-.013-186.237l.013-.013L309.926-95.424c51.441-51.434 134.836-51.434 186.277 0C547.634-44 547.64 39.38 496.216 90.813c-.005.004-.01.008-.013.013L99.543 487.429c-51.44 51.433-134.834 51.433-186.275 0zm-444.692 71.824c-51.432-51.424-51.438-134.806-.013-186.237l.013-.013L-134.766-23.6C-83.325-75.034.07-75.034 51.511-23.6c51.431 51.424 51.437 134.805.013 186.237l-.013.013-396.66 396.603c-51.44 51.433-134.834 51.433-186.275 0z"/></svg>


--------------------------------------------------------------------------------
/public/logos/account.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><linearGradient id="c" x1="6.472%" x2="93.528%" y1="0%" y2="100%"><stop offset="0%" stop-color="#5141E2"/><stop offset="100%" stop-color="#DE39FF"/></linearGradient><linearGradient id="d" x1="6.472%" x2="93.528%" y1="0%" y2="100%"><stop offset="0%" stop-color="#5141E2"/><stop offset="100%" stop-color="#DE39FF" stop-opacity="0"/></linearGradient><filter id="b" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="a" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="#4F1181" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path fill="#FFF" fill-rule="nonzero" d="M25.204 47.807l.413-1.236h2.646l.412 1.236h2.264l-2.996-7.615h-2.01L23 47.807h2.204zm2.558-2.878h-1.644l.818-2.36.826 2.36zM34.818 48c1.989 0 3.513-1.36 3.797-3.362H36.51c-.209.847-.86 1.397-1.688 1.397-1.057 0-1.833-.854-1.833-2.029 0-1.179.776-2.046 1.833-2.046.785 0 1.43.507 1.687 1.288h2.083C38.29 41.318 36.775 40 34.818 40c-2.272 0-3.969 1.716-3.969 4.006 0 2.278 1.697 3.994 3.97 3.994zm8.293 0c1.988 0 3.512-1.36 3.796-3.362h-2.103c-.21.847-.86 1.397-1.689 1.397-1.057 0-1.832-.854-1.832-2.029 0-1.179.775-2.046 1.832-2.046.786 0 1.43.507 1.687 1.288h2.084C46.582 41.318 45.067 40 43.11 40c-2.272 0-3.97 1.716-3.97 4.006 0 2.278 1.698 3.994 3.97 3.994zm8.434 0c2.393 0 4.1-1.666 4.1-4s-1.707-4-4.1-4c-2.4 0-4.112 1.673-4.112 4s1.712 4 4.112 4zm0-1.952c-1.136 0-1.971-.862-1.971-2.048 0-1.185.835-2.048 1.97-2.048 1.137 0 1.96.856 1.96 2.048 0 1.192-.823 2.048-1.96 2.048zM59.807 48c1.903 0 3.259-1.265 3.259-3.138v-4.67h-2.102v4.63c0 .745-.47 1.226-1.157 1.226s-1.157-.481-1.157-1.226v-4.63h-2.102v4.67c0 1.873 1.356 3.138 3.259 3.138zm6.551-.193v-4.132l2.966 4.132h1.7v-7.615h-1.992v3.996l-2.867-3.996h-1.8v7.615h1.993zm9.614 0v-5.726H78v-1.889h-6.121v1.89h2.028v5.725h2.065z"/><path fill="url(#c)" d="M7.421 7.953L3.71 0 0 7.953z" transform="translate(10 40)"/><path fill="url(#d)" d="M10.913 7.953L7.202 0l-3.71 7.953z" transform="translate(10 40)"/></g></svg>


--------------------------------------------------------------------------------
/public/logos/eyecam-co.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="98.044%"><stop offset="0%" stop-color="#43E2DF"/><stop offset="100%" stop-color="#156A8D"/></linearGradient><filter id="c" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="b" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="url(#a)" xlink:href="#b"/><use fill="#000" filter="url(#c)" xlink:href="#b"/><path fill="#FFF" fill-rule="nonzero" d="M14 48.628V39.39h5.093v1.275h-3.61v2.315h3.61V44.3h-3.61v2.984h3.61v1.344H14zm11.038 0V44.4l-3.074-5.01h1.559l1.914 3.136a10.556 10.556 0 01.38.738c.058-.147.12-.286.184-.416s.132-.25.202-.36l1.964-3.098h1.483l-3.141 5.01v4.227h-1.471zm7.883 0V39.39h5.093v1.275h-3.61v2.315h3.61V44.3h-3.61v2.984h3.61v1.344H32.92zm16.398-6.99a4.557 4.557 0 00-1.33-.815 4.05 4.05 0 00-1.475-.27c-.997 0-1.808.323-2.434.97-.625.648-.938 1.488-.938 2.518 0 .997.304 1.82.913 2.467.609.648 1.377.971 2.303.971a4.15 4.15 0 001.543-.29 4.881 4.881 0 001.406-.877v1.697c-.4.29-.833.507-1.303.65a5.22 5.22 0 01-1.527.215 5.274 5.274 0 01-1.936-.347 4.488 4.488 0 01-1.561-1.022 4.548 4.548 0 01-1.025-1.562 5.123 5.123 0 01-.359-1.915c0-.677.12-1.313.359-1.908a4.606 4.606 0 011.037-1.568 4.569 4.569 0 011.559-1.031 5.09 5.09 0 011.901-.35c.536 0 1.047.078 1.533.236.487.158.958.396 1.415.716l-.08 1.514zM55.364 45h2.543l-.935-2.107a8.313 8.313 0 01-.168-.464 10.78 10.78 0 01-.175-.584 8.549 8.549 0 01-.33 1.048L55.364 45zm4.102 3.628l-1.035-2.379h-3.616l-1.06 2.379h-1.558l4.42-9.603 4.413 9.603h-1.564zm12.147-4.562a7.916 7.916 0 01-.081-.593c-.034-.269-.063-.492-.088-.669-.037.21-.09.421-.159.631-.068.21-.154.425-.258.644L68.639 49l-2.387-5.022a7.173 7.173 0 01-.449-1.174c-.004.194-.02.397-.047.61a6.586 6.586 0 01-.121.665l-.979 4.549h-1.365L65.448 39l2.693 5.83c.041.092.105.246.19.46.085.215.188.48.308.795.088-.265.225-.601.412-1.01.05-.109.087-.193.112-.252L71.793 39 74 48.628h-1.378l-1.01-4.562z"/></g></svg>


--------------------------------------------------------------------------------
/public/logos/faceit.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><linearGradient id="a" x1="50%" x2="50%" y1="3.455%" y2="100%"><stop offset="0%" stop-color="#D961C3"/><stop offset="100%" stop-color="#6858FF"/></linearGradient><filter id="c" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="b" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="url(#a)" xlink:href="#b"/><use fill="#000" filter="url(#c)" xlink:href="#b"/><path fill="#FFF" d="M41.5 30C50.613 30 58 37.387 58 46.5S50.613 63 41.5 63 25 55.613 25 46.5 32.387 30 41.5 30zm0 7.333a9.167 9.167 0 100 18.334 9.167 9.167 0 000-18.334zM59.5 25a3.5 3.5 0 110 7 3.5 3.5 0 010-7z"/></g></svg>


--------------------------------------------------------------------------------
/public/logos/insure.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><filter id="b" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="a" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="#403646" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path fill="#F3D3CA" fill-rule="nonzero" d="M16 40.112h1.801v8.765H16v-8.765zm4.071 0h1.79l5.5 2.86v-2.86h1.79v8.765h-1.79v-4.02l-5.5-2.844v6.864h-1.79v-8.765zM32.06 46.27c.32.18.644.341.974.485a7.825 7.825 0 002.14.592c.39.052.805.078 1.245.078.53 0 .983-.034 1.355-.103.373-.07.677-.165.912-.286.236-.122.407-.267.514-.435.107-.168.161-.351.161-.55a.871.871 0 00-.4-.754c-.268-.185-.68-.277-1.237-.277-.245 0-.503.016-.774.047l-.409.05-.413.054c-.276.037-.55.072-.819.104-.269.032-.522.047-.759.047-.395 0-.775-.05-1.138-.15a3.02 3.02 0 01-.965-.455 2.254 2.254 0 01-.67-.757 2.174 2.174 0 01-.248-1.06c0-.24.033-.477.099-.712.066-.236.171-.46.316-.676a2.75 2.75 0 01.562-.6 3.37 3.37 0 01.833-.48 5.51 5.51 0 011.13-.316A8.327 8.327 0 0135.927 40c.395 0 .792.021 1.191.064.4.043.788.104 1.166.183.379.078.743.173 1.093.283.35.11.676.233.977.367l-.785 1.436a8.44 8.44 0 00-.802-.3 9.513 9.513 0 00-.898-.239c-.312-.067-.635-.12-.968-.16a8.705 8.705 0 00-1.02-.058c-.493 0-.898.035-1.216.106a2.675 2.675 0 00-.76.272c-.188.11-.319.234-.392.37a.852.852 0 00-.11.407c0 .262.118.476.355.642.238.166.599.25 1.085.25.195 0 .42-.015.674-.043l.391-.044.411-.048c.28-.034.567-.065.859-.093.291-.028.575-.042.85-.042.519 0 .98.058 1.38.174.401.116.737.281 1.008.496.271.215.476.475.616.78.139.304.209.646.209 1.023 0 .505-.118.954-.353 1.349-.236.394-.57.727-1.006.998-.434.27-.959.477-1.572.617a9.22 9.22 0 01-2.05.21 11.288 11.288 0 01-2.82-.356c-.435-.114-.85-.25-1.243-.41a9.09 9.09 0 01-1.093-.524l.955-1.44zm10.82-6.157h1.79v4.828c0 .396.054.749.163 1.057.11.309.272.57.488.782.217.214.485.375.805.485.32.11.693.166 1.118.166.422 0 .794-.055 1.115-.166.322-.11.591-.271.808-.485a2.03 2.03 0 00.488-.782c.11-.308.164-.66.164-1.057v-4.828h1.79v5.041c0 .576-.098 1.1-.293 1.57-.196.471-.48.875-.853 1.212-.373.336-.83.596-1.37.779-.54.183-1.156.275-1.849.275-.693 0-1.309-.092-1.85-.275a3.866 3.866 0 01-1.369-.78 3.334 3.334 0 01-.852-1.21 4.054 4.054 0 01-.294-1.57v-5.042zm10.909 0h4.49c.677 0 1.264.07 1.76.21.498.14.91.343 1.238.609.327.265.57.589.73.97.16.381.24.813.24 1.295 0 .325-.039.635-.118.928-.079.294-.2.564-.364.81a2.77 2.77 0 01-.618.66 3.37 3.37 0 01-.876.479l1.92 2.804h-2.19l-1.66-2.49-2.762-.006v2.496h-1.79v-8.765zm4.534 4.733c.34 0 .636-.04.89-.118.254-.078.466-.189.638-.33.171-.143.299-.316.384-.52.084-.203.127-.43.127-.68 0-.49-.17-.869-.508-1.136-.34-.268-.85-.401-1.53-.401h-2.745v3.185h2.744zm6.042-4.733h7.516v1.559h-5.726v1.75h5.071v1.463h-5.07v2.44H72v1.553h-7.635v-8.765z"/></g></svg>


--------------------------------------------------------------------------------
/public/logos/loop-studios.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><filter id="b" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="a" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="#8D1558" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path fill="#FFF" fill-rule="nonzero" d="M14.411 43.854c.78 0 1.411-.635 1.411-1.42V31.42c0-.784-.631-1.419-1.41-1.419-.78 0-1.412.635-1.412 1.419v11.016c0 .784.631 1.419 1.411 1.419zm8.12.112c3.102 0 5.404-2.334 5.404-5.21v-.037c0-2.875-2.284-5.172-5.366-5.172-3.1 0-5.403 2.334-5.403 5.21v.037c0 2.875 2.284 5.172 5.366 5.172zm.038-2.446c-1.56 0-2.618-1.288-2.618-2.763v-.038c0-1.475.965-2.726 2.58-2.726 1.56 0 2.619 1.289 2.619 2.764v.037c0 1.475-.966 2.726-2.581 2.726zm11.463 2.446c3.1 0 5.403-2.334 5.403-5.21v-.037c0-2.875-2.284-5.172-5.366-5.172-3.1 0-5.403 2.334-5.403 5.21v.037c0 2.875 2.284 5.172 5.366 5.172zm.037-2.446c-1.56 0-2.618-1.288-2.618-2.763v-.038c0-1.475.965-2.726 2.58-2.726 1.56 0 2.619 1.289 2.619 2.764v.037c0 1.475-.966 2.726-2.581 2.726zm7.99 5.321c.78 0 1.412-.635 1.412-1.419v-2.987c.668.803 1.597 1.493 3.1 1.493 2.359 0 4.531-1.83 4.531-5.171v-.038c0-3.342-2.21-5.172-4.53-5.172-1.467 0-2.414.691-3.101 1.625v-.13c0-.785-.631-1.42-1.411-1.42s-1.411.635-1.411 1.42v10.38c0 .784.63 1.42 1.41 1.42zm3.788-5.321c-1.318 0-2.413-1.102-2.413-2.763v-.038c0-1.661 1.095-2.763 2.413-2.763 1.319 0 2.433 1.102 2.433 2.763v.038c0 1.68-1.114 2.763-2.433 2.763zM17.29 57.963c2.154 0 3.806-1.009 3.806-3.23v-.038c0-1.83-1.615-2.502-3.007-2.968-1.077-.374-2.024-.635-2.024-1.195v-.038c0-.392.352-.69 1.04-.69.594 0 1.355.242 2.153.634.186.094.316.131.52.131.631 0 1.133-.485 1.133-1.12 0-.486-.26-.86-.669-1.064-.965-.486-2.042-.766-3.082-.766-2.005 0-3.64 1.139-3.64 3.174v.037c0 1.942 1.58 2.596 2.972 3.006 1.095.336 2.06.542 2.06 1.158v.037c0 .448-.37.747-1.188.747-.798 0-1.745-.299-2.692-.896a1.078 1.078 0 00-.557-.15c-.631 0-1.114.486-1.114 1.12 0 .449.241.785.538.972a6.908 6.908 0 003.751 1.139zm8.177-.019c.612 0 1.095-.075 1.615-.28.39-.15.724-.56.724-1.064a1.18 1.18 0 00-1.17-1.177c-.055 0-.241.02-.334.02-.631 0-.91-.318-.91-.972v-4.275h1.244c.669 0 1.207-.542 1.207-1.214 0-.672-.538-1.214-1.207-1.214h-1.244v-1.25c0-.785-.631-1.42-1.41-1.42-.78 0-1.412.635-1.412 1.42v1.25h-.093c-.668 0-1.207.542-1.207 1.214 0 .672.539 1.214 1.207 1.214h.093v4.742c0 2.315 1.17 3.006 2.897 3.006zm6.82.019c1.43 0 2.266-.766 2.916-1.606v.112c0 .784.63 1.419 1.41 1.419.78 0 1.412-.635 1.412-1.419v-7.394c0-.784-.631-1.419-1.411-1.419s-1.411.635-1.411 1.42v4.275c0 1.344-.687 2.035-1.764 2.035s-1.709-.69-1.709-2.035v-4.276c0-.784-.63-1.419-1.41-1.419-.78 0-1.412.635-1.412 1.42v5.171c0 2.297 1.244 3.716 3.38 3.716zm11.519 0c1.467 0 2.414-.691 3.1-1.625v.131c0 .784.632 1.419 1.412 1.419.78 0 1.411-.635 1.411-1.419V45.453c0-.784-.631-1.419-1.411-1.419s-1.411.635-1.411 1.42v3.621c-.669-.802-1.597-1.493-3.101-1.493-2.358 0-4.53 1.83-4.53 5.172v.037c0 3.342 2.21 5.172 4.53 5.172zm.724-2.409c-1.318 0-2.432-1.101-2.432-2.763v-.037c0-1.68 1.114-2.764 2.432-2.764 1.318 0 2.414 1.102 2.414 2.764v.037c0 1.662-1.096 2.763-2.414 2.763zm8.437-8.794c.89 0 1.578-.523 1.578-1.344v-.037c0-.822-.687-1.326-1.578-1.326-.892 0-1.579.504-1.579 1.326v.037c0 .821.687 1.344 1.579 1.344zm0 11.128c.78 0 1.41-.635 1.41-1.419v-7.394c0-.784-.63-1.419-1.41-1.419-.78 0-1.412.635-1.412 1.42v7.393c0 .784.632 1.419 1.412 1.419zm8.12.112c3.101 0 5.403-2.334 5.403-5.21v-.036c0-2.876-2.283-5.172-5.366-5.172-3.1 0-5.403 2.334-5.403 5.209v.037c0 2.875 2.284 5.172 5.366 5.172zm.037-2.446c-1.56 0-2.618-1.288-2.618-2.763v-.037c0-1.475.966-2.726 2.581-2.726 1.56 0 2.618 1.288 2.618 2.763v.037c0 1.475-.965 2.726-2.58 2.726zm10.07 2.409c2.154 0 3.807-1.009 3.807-3.23v-.038c0-1.83-1.615-2.502-3.008-2.968-1.077-.374-2.024-.635-2.024-1.195v-.038c0-.392.353-.69 1.04-.69.594 0 1.355.242 2.154.634.185.094.315.131.52.131.631 0 1.132-.485 1.132-1.12 0-.486-.26-.86-.668-1.064-.966-.486-2.043-.766-3.082-.766-2.006 0-3.64 1.139-3.64 3.174v.037c0 1.942 1.579 2.596 2.971 3.006 1.096.336 2.061.542 2.061 1.158v.037c0 .448-.371.747-1.188.747-.799 0-1.745-.299-2.692-.896a1.078 1.078 0 00-.557-.15c-.632 0-1.114.486-1.114 1.12 0 .449.24.785.538.972a6.908 6.908 0 003.75 1.139z"/></g></svg>


--------------------------------------------------------------------------------
/public/logos/manage.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><filter id="b" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="a" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="#F3603C" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><g fill="#FFF" transform="translate(13 39)"><path fill-rule="nonzero" d="M16.806 7.004v-3.44c0-.657.154-1.175.461-1.555.308-.379.693-.568 1.155-.568.907 0 1.36.657 1.36 1.971v3.592h1.588V3.012c0-1.006-.21-1.759-.631-2.257-.42-.499-1.022-.748-1.804-.748-.513 0-.982.098-1.408.293-.425.195-.783.479-1.075.851h-.028c-.411-.763-1.1-1.144-2.067-1.144-.407 0-.798.09-1.175.272a2.926 2.926 0 00-.989.783h-.02V.11h-1.589v6.887h1.588V3.564c0-.657.157-1.175.469-1.555.312-.379.71-.568 1.196-.568.92 0 1.38.657 1.38 1.971v3.592h1.589zm8.862.103c.944 0 1.679-.345 2.206-1.034h.021v.924h1.519V.11h-1.588v.828h-.028c-.527-.62-1.242-.931-2.143-.931a3.282 3.282 0 00-2.387 1.006c-.296.313-.53.692-.7 1.138a3.967 3.967 0 00-.257 1.434c0 .523.086 1.006.257 1.447.17.441.404.814.7 1.117.296.303.651.539 1.065.706a3.52 3.52 0 001.335.252zm.25-1.434c-.587 0-1.066-.194-1.436-.582-.37-.389-.555-.888-.555-1.5 0-.648.191-1.168.573-1.56.381-.394.856-.59 1.425-.59.564 0 1.032.205 1.405.617.372.411.558.922.558 1.533 0 .612-.19 1.111-.572 1.5a1.885 1.885 0 01-1.398.582zm11.387 1.33v-4.06c0-.997-.225-1.736-.676-2.216-.45-.48-1.074-.72-1.87-.72-.452 0-.88.09-1.283.269a2.92 2.92 0 00-1.04.779h-.02V.11h-1.59v6.887h1.59v-3.46c0-.662.162-1.177.488-1.545.326-.367.762-.551 1.308-.551.25 0 .463.032.641.096.178.065.334.17.469.314.134.145.233.341.298.59.065.247.097.55.097.91v3.653h1.588zm4.292.104c.943 0 1.678-.345 2.205-1.034h.021v.924h1.52V.11h-1.59v.828h-.027C43.2.318 42.485.006 41.583.006a3.282 3.282 0 00-2.386 1.006c-.296.313-.53.692-.7 1.138a3.967 3.967 0 00-.258 1.434c0 .523.086 1.006.257 1.447.171.441.405.814.7 1.117.297.303.652.539 1.065.706a3.52 3.52 0 001.336.252zm.25-1.434c-.588 0-1.066-.194-1.436-.582-.37-.389-.555-.888-.555-1.5 0-.648.19-1.168.572-1.56.381-.394.857-.59 1.425-.59.564 0 1.033.205 1.405.617.372.411.558.922.558 1.533 0 .612-.19 1.111-.572 1.5a1.885 1.885 0 01-1.398.582zm8.009 4.219c.504 0 .955-.059 1.352-.176.398-.117.732-.28 1.003-.49.27-.208.494-.465.672-.768.178-.303.307-.634.385-.992.079-.359.118-.752.118-1.18V.11h-1.588v.724h-.028a2.968 2.968 0 00-.988-.62A3.223 3.223 0 0049.62 0c-.634 0-1.203.15-1.707.448a3.09 3.09 0 00-1.175 1.244c-.28.531-.42 1.127-.42 1.79 0 .67.147 1.265.44 1.785.294.519.698.918 1.21 1.196a3.582 3.582 0 001.735.417c.86 0 1.56-.28 2.102-.841h.028v.73c0 .487-.18.892-.542 1.214-.36.321-.869.482-1.526.482-.448 0-.842-.055-1.182-.165a7.627 7.627 0 01-1.176-.517l-.374 1.392c.388.23.825.407 1.31.53.486.125.99.187 1.513.187zm.055-4.467c-.573 0-1.046-.18-1.418-.541-.373-.36-.559-.844-.559-1.451 0-.584.183-1.06.548-1.427.366-.368.842-.551 1.43-.551.559 0 1.025.181 1.397.544.372.363.558.834.558 1.413 0 .584-.181 1.065-.544 1.444-.363.38-.834.57-1.412.57zm8.016 1.682c.648 0 1.218-.117 1.71-.351a3.334 3.334 0 001.21-.952l-1.11-.944c-.434.542-1.01.813-1.726.813-.51 0-.94-.14-1.294-.42-.354-.28-.582-.664-.683-1.151h5.05c.027-.166.041-.375.041-.628 0-.666-.136-1.261-.41-1.785A3.01 3.01 0 0059.538.455C59.023.156 58.43.007 57.76.007c-.476 0-.923.086-1.339.258a3.187 3.187 0 00-1.075.72c-.3.309-.536.683-.708 1.124a3.951 3.951 0 00-.256 1.441c0 .703.155 1.327.465 1.872.31.544.732.961 1.269 1.25.536.29 1.14.435 1.81.435zm1.603-4.28H56.06c.111-.442.326-.783.646-1.024.319-.242.698-.362 1.137-.362.444 0 .81.124 1.1.372.289.248.484.586.586 1.013z"/><path d="M1.17 4.286c.646 0 1.17.533 1.17 1.19a1.18 1.18 0 01-1.17 1.19A1.18 1.18 0 010 5.477c0-.657.524-1.19 1.17-1.19zM1.17 0c.646 0 1.17.533 1.17 1.19a1.18 1.18 0 01-1.17 1.191A1.18 1.18 0 010 1.191C0 .532.524 0 1.17 0zm4.212 0c.646 0 1.17.533 1.17 1.19a1.18 1.18 0 01-1.17 1.191 1.18 1.18 0 01-1.17-1.19C4.212.532 4.736 0 5.382 0z"/><ellipse cx="5.382" cy="5.524" opacity=".5" rx="1.17" ry="1.19"/></g></g></svg>


--------------------------------------------------------------------------------
/public/logos/myhome.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><linearGradient id="c" x1="100%" x2="0%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><filter id="b" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="a" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="#68A4A4" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><circle cx="45" cy="44" r="24" fill="url(#c)" opacity=".25" transform="matrix(-1 0 0 1 90 0)"/><path fill="#FFF" fill-rule="nonzero" d="M9.383 46.89v-3.35l1.682 2.62h.206l1.682-2.62v3.35h1.382V41.1h-1.382l-1.785 2.72-1.785-2.72H8v5.79h1.383zm15.683 0v-1.95l2.147-3.84h-1.476l-1.362 2.51-1.352-2.51h-1.475l2.146 3.84v1.95h1.372zm10.742 0v-2.01h2.198v2.01h1.382V41.1h-1.382v2.56h-2.198V41.1h-1.383v5.79h1.383zm14.311.11c1.775 0 3.189-1.35 3.189-3 0-1.66-1.414-3-3.189-3-1.775 0-3.188 1.34-3.188 3 0 1.65 1.413 3 3.188 3zm0-1.23c-.98 0-1.754-.81-1.754-1.77a1.753 1.753 0 113.508 0c0 .96-.774 1.77-1.754 1.77zm12.114 1.12v-3.35l1.682 2.62h.206l1.682-2.62v3.35h1.383V41.1h-1.383l-1.785 2.72-1.785-2.72H60.85v5.79h1.383zm16.767 0v-1.23h-2.786v-1h2.57v-1.23h-2.57v-1.1H79V41.1h-4.169v5.79H79z"/></g></svg>


--------------------------------------------------------------------------------
/public/logos/photosnap.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><linearGradient id="c" x1="0%" x2="50%" y1="78.125%" y2="21.875%"><stop offset="0%" stop-color="#FFC593"/><stop offset="51.945%" stop-color="#BC7198"/><stop offset="100%" stop-color="#5A77FF"/></linearGradient><filter id="b" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="a" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path fill="#FFF" fill-rule="nonzero" d="M24.533 46.838v-1.703h1.008c.312 0 .597-.05.855-.15.258-.1.479-.24.662-.417.183-.179.325-.388.427-.629.102-.24.154-.504.154-.79a2.01 2.01 0 00-.154-.787 1.902 1.902 0 00-.427-.632 1.935 1.935 0 00-.662-.418c-.258-.1-.543-.15-.855-.15H23v5.676h1.533zm.927-3.081h-.927V42.54h.927a.63.63 0 01.46.182.579.579 0 010 .851.63.63 0 01-.46.183zm4.68 3.08V44.65h2.056v2.189h1.533v-5.676h-1.533v2.108H30.14v-2.108h-1.532v5.676h1.532zm7.703.163a3.2 3.2 0 002.239-.892c.282-.276.504-.594.665-.957.162-.362.242-.746.242-1.151s-.08-.79-.242-1.151a3.072 3.072 0 00-1.665-1.61A3.2 3.2 0 0037.843 41c-.446 0-.86.08-1.242.24-.382.159-.714.376-.996.652a3.072 3.072 0 00-.666.957A2.798 2.798 0 0034.697 44c0 .405.08.79.242 1.151.161.363.383.681.666.957.282.276.614.493.996.653.382.16.796.239 1.242.239zm0-1.378c-.22 0-.427-.04-.62-.122a1.47 1.47 0 01-.501-.34 1.624 1.624 0 01-.33-.515A1.687 1.687 0 0136.27 44c0-.232.04-.447.121-.645.08-.197.191-.369.33-.514.14-.146.307-.26.501-.341.194-.081.4-.122.621-.122.22 0 .426.04.617.122.191.081.358.195.5.34.143.146.255.318.335.515.081.198.121.413.121.645 0 .232-.04.447-.12.645a1.59 1.59 0 01-.335.514c-.143.146-.31.26-.5.341-.192.081-.397.122-.618.122zm6.736 1.216V42.54h1.573v-1.379h-4.679v1.379h1.573v4.297h1.533zm5.203.162a3.2 3.2 0 002.239-.892c.282-.276.504-.594.665-.957.162-.362.242-.746.242-1.151s-.08-.79-.242-1.151a3.072 3.072 0 00-1.665-1.61A3.2 3.2 0 0049.782 41c-.446 0-.86.08-1.242.24-.382.159-.714.376-.996.652a3.072 3.072 0 00-.666.957A2.798 2.798 0 0046.636 44c0 .405.08.79.242 1.151.162.363.383.681.666.957.282.276.614.493.996.653.382.16.796.239 1.242.239zm0-1.378c-.22 0-.427-.04-.62-.122a1.47 1.47 0 01-.501-.34 1.624 1.624 0 01-.33-.515 1.687 1.687 0 01-.122-.645c0-.232.04-.447.121-.645.081-.197.191-.369.331-.514.14-.146.307-.26.5-.341.194-.081.4-.122.621-.122.22 0 .427.04.617.122.191.081.358.195.5.34.143.146.255.318.335.515.081.198.121.413.121.645 0 .232-.04.447-.12.645a1.59 1.59 0 01-.335.514c-.143.146-.31.26-.5.341-.191.081-.397.122-.618.122zM55.672 47c.354 0 .671-.05.951-.15.28-.1.516-.235.71-.405a1.71 1.71 0 00.597-1.31c0-.33-.065-.6-.194-.81-.129-.211-.29-.382-.484-.511a2.599 2.599 0 00-.633-.309l-.633-.21a2.803 2.803 0 01-.484-.207c-.13-.073-.194-.174-.194-.304 0-.125.055-.237.166-.337a.63.63 0 01.44-.15c.14 0 .265.023.378.07.113.045.21.098.29.157.098.065.184.138.259.22l.887-.933a2.077 2.077 0 00-.476-.406 2.852 2.852 0 00-.613-.28 2.778 2.778 0 00-.887-.125c-.323 0-.616.049-.88.146a2.135 2.135 0 00-.673.39c-.186.161-.33.348-.432.559-.102.21-.153.427-.153.648 0 .33.065.6.194.811.129.21.29.381.484.51.193.13.404.233.633.309l.633.21c.194.066.355.135.484.208.13.073.194.174.194.304a.568.568 0 01-.194.425c-.129.122-.306.183-.532.183-.183 0-.348-.031-.496-.094a2.036 2.036 0 01-.383-.206 2 2 0 01-.331-.308l-.888.932c.162.184.353.346.573.487.188.124.422.236.702.336.28.1.608.15.984.15zm4.678-.162v-3.162l2.428 3.162h1.323v-5.676h-1.533v3.162l-2.42-3.162h-1.33v5.676h1.532zm6.05 0l.404-1.216h1.855l.403 1.216h1.654l-2.138-5.676h-1.694l-2.137 5.676H66.4zm1.856-2.433h-1.049l.524-1.662.525 1.662zm4.638 2.433v-1.703h1.009c.312 0 .597-.05.855-.15.258-.1.478-.24.661-.417.183-.179.326-.388.428-.629.102-.24.153-.504.153-.79a2.01 2.01 0 00-.153-.787 1.902 1.902 0 00-.428-.632 1.935 1.935 0 00-.661-.418c-.258-.1-.543-.15-.855-.15H71.36v5.676h1.533zm.928-3.081h-.928V42.54h.928a.63.63 0 01.46.182.579.579 0 010 .851.63.63 0 01-.46.183z"/><path fill="url(#c)" d="M0 6l4-6 4 6z" transform="translate(12 41)"/></g></svg>


--------------------------------------------------------------------------------
/public/logos/shortly.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><filter id="b" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="a" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="#19ACDE" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path fill="#FFF" fill-rule="nonzero" d="M22.395 47.919c0-2.74-4.532-2.424-4.532-3.39 0-.27.29-.412.643-.412.578 0 .884.285.884.76h3.166c.064-1.758-1.366-3.2-4.034-3.2-2.395 0-3.938 1.252-3.938 2.852 0 2.946 4.468 2.44 4.468 3.453 0 .238-.305.428-.675.428-.546 0-.932-.238-.916-.776h-3.423c-.322 1.9 1.446 3.2 4.05 3.2 2.475 0 4.307-1.03 4.307-2.915zm.651 2.804h3.568l.852-4.753v.016c.16-.855.723-1.378 1.51-1.378.772 0 1.19.523 1.03 1.378l-.852 4.737h3.552l.932-5.18c.418-2.313-.547-3.818-2.636-3.818-1.35 0-2.379.65-3.022 1.41L28.72 39h-3.568l-2.106 11.723zm20.999-5.291c0-2.282-1.656-3.755-4.067-3.755-3.262 0-5.705 2.281-5.705 5.418 0 2.281 1.655 3.739 4.066 3.739 3.263 0 5.706-2.234 5.706-5.402zm-6.108 1.283c0-.903.515-1.996 1.495-1.996.53 0 .948.332.948 1.077 0 .903-.514 1.996-1.495 1.996-.546 0-.948-.333-.948-1.077zm10.359.348c.225-1.22.964-1.584 2.25-1.584h1.013l.658-3.754c-1.173 0-2.378.713-3.262 1.71l.29-1.647h-3.569l-1.607 8.935h3.568l.659-3.66zm4.3 0c-.5 2.773.947 3.66 3.069 3.66h1.35l.547-2.994h-.852c-.466 0-.627-.19-.563-.602l.434-2.408h1.479l.53-2.93h-1.478l.385-2.155H53.93l-.386 2.154h-1.125l-.53 2.93h1.125l-.418 2.345zm5.584 3.66h3.568L63.854 39h-3.568L58.18 50.723zm7.868-.444l-2.25-8.49h3.97l.883 4.53 2.411-4.53H75L66.835 55H62.93l3.118-4.72z"/></g></svg>


--------------------------------------------------------------------------------
/public/logos/the-air-filter-company.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="88"><defs><filter id="b" width="139.8%" height="139.8%" x="-19.9%" y="-19.9%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0452633304 0"/></filter><circle id="a" cx="44" cy="44" r="44"/></defs><g fill="none" fill-rule="evenodd"><use fill="#1A7373" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path fill="#FFF" d="M37 29l-.001 2.727H37c1.79 0 3.49.383 5.024 1.072A14.96 14.96 0 0037 44c0 4.454 1.94 8.454 5.023 11.201A12.228 12.228 0 0137 56.273c-6.778 0-12.272-5.494-12.273-12.272L22 44c0 8.284 6.716 15 15 15 2.732 0 5.293-.73 7.5-2.006A14.939 14.939 0 0052 59c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-2.732 0-5.294.73-7.5 2.007A14.928 14.928 0 0037 29zm15 2.727c6.778 0 12.273 5.495 12.273 12.273S58.778 56.273 52 56.273c-1.79 0-3.49-.383-5.024-1.072A14.96 14.96 0 0052 44c0-4.454-1.94-8.454-5.023-11.201A12.228 12.228 0 0152 31.727zm-7.5 2.558l.018.014A12.252 12.252 0 0149.273 44c0 3.954-1.87 7.471-4.774 9.716A12.256 12.256 0 0139.727 44c0-3.954 1.87-7.47 4.773-9.715z"/></g></svg>


--------------------------------------------------------------------------------
/public/zeit.svg:
--------------------------------------------------------------------------------
 1 | <svg width="82" height="16" fill="none"
 2 |   xmlns="http://www.w3.org/2000/svg">
 3 |   <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
 4 |   <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
 5 |   <defs>
 6 |     <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
 7 |       <stop stop-color="#fff"/>
 8 |       <stop offset="1"/>
 9 |     </linearGradient>
10 |   </defs>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/setupTests.js:
--------------------------------------------------------------------------------
1 | // optional: configure or set up a testing framework before each test
2 | // if you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
3 | 
4 | // used for __tests__/testing-library.js
5 | // learn more: https://github.com/testing-library/jest-dom
6 | import '@testing-library/jest-dom/extend-expect'
7 | 


--------------------------------------------------------------------------------
/styles/_mixin.scss:
--------------------------------------------------------------------------------
1 | @mixin display-flex($direction, $justify, $align) {
2 | 	display: flex;
3 | 	flex-direction: $direction;
4 | 	justify-content: $justify;
5 | 	align-items: $align;
6 | }


--------------------------------------------------------------------------------
/styles/_variables.scss:
--------------------------------------------------------------------------------
 1 | // dimension
 2 | $xl: 1200px;
 3 | $xd: 992px;
 4 | $md: 768px;
 5 | $sm: 576px;
 6 | $xs: 375px;
 7 | 
 8 | // font
 9 | $font: 'Spartan', sans-serif;
10 | 
11 | $weights: (
12 | 	'medium': 500,
13 | 	'semi-bold': 700,
14 | );
15 | 
16 | @each $name, $weight in $weights {
17 | 	.font-#{$name} {
18 | 		font-weight: $weight;
19 | 	}
20 | }
21 | 
22 | $sizes: (
23 | 	'normal': 14,
24 | 	'big': 18,
25 | );
26 | 
27 | @each $name, $size in $sizes {
28 | 	.fontsize-#{$name} {
29 | 		font-size: $size + px;
30 | 	}
31 | }
32 | 
33 | // colors
34 | $white: #fff;
35 | $black: #2f3837;
36 | $green: #5da4a8;
37 | $bg-light-grayish-cyan: hsl(180, 52%, 96%); //background
38 | $light-grayish-cyan: hsl(180, 31%, 95%); // (Filter Tablets)
39 | $dark-grayish-cyan: hsl(180, 8%, 52%);
40 | $very-dark-grayish-cyan: hsl(180, 14%, 20%);
41 | 
42 | :export {
43 |   green: $green;
44 | 	backgroundColor: $bg-light-grayish-cyan;
45 | }


--------------------------------------------------------------------------------
/styles/global.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   background: $bg-light-grayish-cyan;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: $font;
 7 |   margin: 0;
 8 |   width: 100%;
 9 |   overflow-x: hidden;
10 | }
11 | 
12 | p, ul {
13 |   display: inline;
14 |   margin-block-start: 0;
15 |   margin-block-end: 0;
16 |   margin-inline-start: 0;
17 |   margin-inline-end: 0;
18 |   padding-inline-start: 0;
19 | }
20 | 
21 | ul {
22 |   li {
23 |     list-style-type: none;
24 |   }
25 | }
26 | 
27 | main {
28 |   display: flex;
29 |   justify-content: center;
30 | }
31 | 
32 | .header {
33 |   width: 100%;
34 |   height: 140px;
35 |   background: url('~/images/bg-header-desktop.svg') no-repeat;
36 |   background-size: cover;
37 | 
38 |   @media (max-width: $sm) {
39 |     background: url('~/images/bg-header-mobile.svg') no-repeat;
40 |     background-size: cover;
41 |   }
42 | }
43 | 
44 | .container {
45 |   margin-top: -32px;
46 | 
47 |   @media (min-width: $xl) {
48 |     padding: 0 30px;
49 |     width: $xl;
50 |   }
51 | 
52 |   @media screen and (max-width: $xl - 1) and (min-width: $xs - 1) {
53 |     width: 90%;
54 |   }
55 |   
56 |   @media (max-width: $xs) {
57 |     padding: 0 20px;
58 |     max-width: $xs;
59 |   }
60 | }


--------------------------------------------------------------------------------
/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import "./variables";
2 | @import "./mixin";
3 | @import "./global";
4 | @import "./shared";


--------------------------------------------------------------------------------
/styles/shared.scss:
--------------------------------------------------------------------------------
  1 | .job-item {
  2 |   @include display-flex(row, space-between, center);
  3 |   border-radius: 5px;
  4 |   box-shadow: 0px 20px 21px #d4e9ec;
  5 |   background: $white;
  6 |   margin-top: 25px;
  7 |   margin-bottom: 25px;
  8 |   padding: 30px;
  9 | 
 10 |   @media (max-width: $md) {
 11 |     // flex-direction: column;
 12 |     @include display-flex(column, start, flex-start);
 13 |     position: relative;
 14 |     margin-top: 35px;
 15 |     padding: 40px 20px 20px 20px;
 16 |     flex-wrap: wrap;
 17 |   }
 18 | 
 19 |   &.featured {
 20 |     border-left: 6px solid $green;
 21 |   }
 22 | 
 23 |   .company-logo {
 24 |     width: 88px;
 25 |     height: 88px;
 26 | 
 27 |     @media (max-width: $sm) {
 28 |       position: absolute;
 29 |       margin-top: -60px;
 30 |       width: 50px;
 31 |       height: 50px;
 32 |     }
 33 |   }
 34 | 
 35 |   .job-role {
 36 |     display: flex;
 37 |     flex-direction: row;
 38 |     justify-content: space-between;
 39 |     color: $black;
 40 | 
 41 |     @media (max-width: $xs) {
 42 |       // flex-direction: column;
 43 |       flex-wrap: wrap;
 44 |     }
 45 | 
 46 |     .detail {
 47 |       @include display-flex(column, center, start);
 48 |       margin-left: 15px;
 49 | 
 50 |       @media (max-width: $sm) {
 51 |         margin-left: 0;
 52 |       }
 53 | 
 54 |       p {
 55 |         line-height: 30px;
 56 | 
 57 |         &.company-name {
 58 |           color: $green;
 59 |         }
 60 | 
 61 |         &.position {
 62 |           &:hover {
 63 |             color: $green;
 64 |             cursor: pointer;
 65 |           }
 66 |         }
 67 |       }
 68 | 
 69 |       .company-features {
 70 |         @include display-flex(row, start, center);
 71 | 
 72 |         .features {
 73 |           @include display-flex(row, start, center);
 74 |           margin-left: 15px;
 75 | 
 76 |           li {
 77 |             margin-left: 9px;
 78 |             padding: 5px 10px;
 79 |             color: $white;
 80 |             border-radius: 12px;
 81 |             text-transform: uppercase;
 82 |             font-size: 11px;
 83 |             
 84 |             &.new {
 85 |               background: $green;
 86 |             }
 87 | 
 88 |             &.featured {
 89 |               background: $black;
 90 |             }
 91 |           }
 92 |         }
 93 |       }
 94 | 
 95 |       .others {
 96 |         @include display-flex(row, start, start);
 97 |         flex-wrap: wrap;
 98 |         color: $dark-grayish-cyan;
 99 |         
100 |         p:not(:first-child) {
101 |           &:before {
102 |             content: '·';
103 |             padding: 0 14px;
104 |           }
105 |         }
106 |       }
107 |     }
108 |   }
109 | 
110 |   .job-stack {
111 |     @include display-flex(row, flex-end, center);
112 |     flex-wrap: wrap;
113 |     line-height: 20px;
114 |     color: $green;
115 | 
116 |     @media (max-width: $md) {
117 |       @include display-flex(row, flex-start, center);
118 |     }
119 | 
120 |     li {
121 |       background: $bg-light-grayish-cyan;
122 |       padding: 5px 9px;
123 |       border-radius: 5px;
124 |       margin: 5px 0;
125 |       font-size: 12px;
126 | 
127 |       &:hover {
128 |         color: $white;
129 |         background: $green;
130 |         cursor: pointer;
131 |       }
132 | 
133 |       // &:not(:last-child) {
134 |         // margin-left: 15px;
135 |         @media (min-width: $md - 1) {
136 |           margin-left: 15px;
137 |         }
138 | 
139 |         @media (max-width: $md) {
140 |           margin-right: 15px;
141 |         }
142 |       // }
143 |     }
144 |   }
145 | }
146 | 
147 | hr { 
148 |   display: none;
149 |   margin-top: 1em;
150 |   margin-bottom: 1em;
151 |   border-style: inset;
152 |   border-width: 1px;
153 |   width: 100%;
154 | 
155 |   @media (max-width: $md) {
156 |     display: block;
157 |   }
158 | } 
159 | 
160 | .select-filter {
161 |   .btn-clear {
162 |     color: $green;
163 |     font-size: 14px;
164 |     font-weight: bold;
165 |     padding: 0 30px;
166 |   
167 |     &:hover {
168 |       text-decoration: underline;
169 |       text-decoration-color: $green;
170 |       cursor: pointer;
171 |     }
172 |   }
173 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve"
20 |   },
21 |   "include": [
22 |     "next-env.d.ts",
23 |     "**/*.ts",
24 |     "**/*.tsx"
25 |   ],
26 |   "exclude": [
27 |     "node_modules"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/types/types.ts:
--------------------------------------------------------------------------------
 1 | export interface JobType {
 2 |   featured: boolean,
 3 |   logo?: string,
 4 |   company?: string,
 5 |   new?: boolean,
 6 |   position?: string,
 7 |   postedAt?: string,
 8 |   contract?: string,
 9 |   location?: string,
10 |   role?: string,
11 |   level?: string,
12 |   tools?: string[],
13 |   languages?: string[],
14 | }
15 | 


--------------------------------------------------------------------------------