From 345c1931e158822e84911848c84aba72edf9a015 Mon Sep 17 00:00:00 2001 From: Haris Shah Date: Sat, 23 Mar 2024 21:25:43 +0500 Subject: [PATCH] feat: pills and cards --- .../frontend/public/assets/images/account.svg | 1 + .../public/assets/images/eyecam-co.svg | 1 + apps/frontend/public/assets/images/faceit.svg | 1 + apps/frontend/public/assets/images/insure.svg | 1 + .../public/assets/images/loop-studios.svg | 1 + apps/frontend/public/assets/images/manage.svg | 1 + apps/frontend/public/assets/images/myhome.svg | 1 + .../public/assets/images/photosnap.svg | 1 + .../frontend/public/assets/images/shortly.svg | 1 + .../assets/images/the-air-filter-company.svg | 1 + apps/frontend/src/app/page.tsx | 8 +-- apps/frontend/src/components/Card.tsx | 56 +++++++++++-------- apps/frontend/src/components/Pill.tsx | 7 +++ apps/frontend/src/components/index.ts | 2 + apps/frontend/src/containers/CardList.tsx | 14 +++++ apps/frontend/src/containers/index.ts | 1 + apps/frontend/src/types.ts | 16 ++++++ apps/frontend/tailwind.config.js | 1 + 18 files changed, 88 insertions(+), 27 deletions(-) create mode 100644 apps/frontend/public/assets/images/account.svg create mode 100644 apps/frontend/public/assets/images/eyecam-co.svg create mode 100644 apps/frontend/public/assets/images/faceit.svg create mode 100644 apps/frontend/public/assets/images/insure.svg create mode 100644 apps/frontend/public/assets/images/loop-studios.svg create mode 100644 apps/frontend/public/assets/images/manage.svg create mode 100644 apps/frontend/public/assets/images/myhome.svg create mode 100644 apps/frontend/public/assets/images/photosnap.svg create mode 100644 apps/frontend/public/assets/images/shortly.svg create mode 100644 apps/frontend/public/assets/images/the-air-filter-company.svg create mode 100644 apps/frontend/src/components/Pill.tsx create mode 100644 apps/frontend/src/components/index.ts create mode 100644 apps/frontend/src/containers/CardList.tsx create mode 100644 apps/frontend/src/containers/index.ts create mode 100644 apps/frontend/src/types.ts diff --git a/apps/frontend/public/assets/images/account.svg b/apps/frontend/public/assets/images/account.svg new file mode 100644 index 0000000..caa550d --- /dev/null +++ b/apps/frontend/public/assets/images/account.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/eyecam-co.svg b/apps/frontend/public/assets/images/eyecam-co.svg new file mode 100644 index 0000000..a339e7f --- /dev/null +++ b/apps/frontend/public/assets/images/eyecam-co.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/faceit.svg b/apps/frontend/public/assets/images/faceit.svg new file mode 100644 index 0000000..9a3737b --- /dev/null +++ b/apps/frontend/public/assets/images/faceit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/insure.svg b/apps/frontend/public/assets/images/insure.svg new file mode 100644 index 0000000..c2aa416 --- /dev/null +++ b/apps/frontend/public/assets/images/insure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/loop-studios.svg b/apps/frontend/public/assets/images/loop-studios.svg new file mode 100644 index 0000000..ba80a42 --- /dev/null +++ b/apps/frontend/public/assets/images/loop-studios.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/manage.svg b/apps/frontend/public/assets/images/manage.svg new file mode 100644 index 0000000..e921315 --- /dev/null +++ b/apps/frontend/public/assets/images/manage.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/myhome.svg b/apps/frontend/public/assets/images/myhome.svg new file mode 100644 index 0000000..2c830bc --- /dev/null +++ b/apps/frontend/public/assets/images/myhome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/photosnap.svg b/apps/frontend/public/assets/images/photosnap.svg new file mode 100644 index 0000000..3e60d28 --- /dev/null +++ b/apps/frontend/public/assets/images/photosnap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/shortly.svg b/apps/frontend/public/assets/images/shortly.svg new file mode 100644 index 0000000..2622da4 --- /dev/null +++ b/apps/frontend/public/assets/images/shortly.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/the-air-filter-company.svg b/apps/frontend/public/assets/images/the-air-filter-company.svg new file mode 100644 index 0000000..52cda18 --- /dev/null +++ b/apps/frontend/public/assets/images/the-air-filter-company.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx index c37035c..c7d0253 100644 --- a/apps/frontend/src/app/page.tsx +++ b/apps/frontend/src/app/page.tsx @@ -1,11 +1,11 @@ -import { Card } from '@/components/Card' +import { CardList } from '@/containers' -export default function Store(): JSX.Element { +export default function Index() { return ( <> -
+
- +
) diff --git a/apps/frontend/src/components/Card.tsx b/apps/frontend/src/components/Card.tsx index 26670e9..3c949ec 100644 --- a/apps/frontend/src/components/Card.tsx +++ b/apps/frontend/src/components/Card.tsx @@ -1,48 +1,58 @@ +import { Job } from '@/Types' import Image from 'next/image' import React from 'react' +import { Pill } from './Pill' -export function Card() { +export function Card({ job }: { job: Job }) { + console.log(job) return ( -
+
logo
- Photosnap + {job.company}
- - new! - - - featured - + {job.new ? ( + + new! + + ) : null} + {job.featured ? ( + + featured + + ) : null}
-

- senior frontend developer -

+

{job.position}

- 1d ago + {job.postedAt} • - full time + {job.contract} • - USA only + {job.location}
-
- frontend - senior - HTML - senior - HTML +
+ {job.role} + {job.level} + {job.languages.map((language) => ( + {language} + ))} + {job.tools.map((tool) => ( + {tool} + ))}
) diff --git a/apps/frontend/src/components/Pill.tsx b/apps/frontend/src/components/Pill.tsx new file mode 100644 index 0000000..74e5f07 --- /dev/null +++ b/apps/frontend/src/components/Pill.tsx @@ -0,0 +1,7 @@ +export function Pill({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ) +} diff --git a/apps/frontend/src/components/index.ts b/apps/frontend/src/components/index.ts new file mode 100644 index 0000000..d79ee08 --- /dev/null +++ b/apps/frontend/src/components/index.ts @@ -0,0 +1,2 @@ +export { Card } from './Card' +export { Pill } from './Pill' diff --git a/apps/frontend/src/containers/CardList.tsx b/apps/frontend/src/containers/CardList.tsx new file mode 100644 index 0000000..205c836 --- /dev/null +++ b/apps/frontend/src/containers/CardList.tsx @@ -0,0 +1,14 @@ +import { Card } from '@/components' +import type { Job } from '@/Types' + +export async function CardList() { + let data = await fetch('http://localhost:5000/api/v1/jobs') + let { jobs }: { jobs: Job[] } = await data.json() + return ( +
+ {jobs.map((job) => ( + + ))} +
+ ) +} diff --git a/apps/frontend/src/containers/index.ts b/apps/frontend/src/containers/index.ts new file mode 100644 index 0000000..ca4b14d --- /dev/null +++ b/apps/frontend/src/containers/index.ts @@ -0,0 +1 @@ +export { CardList } from './CardList' diff --git a/apps/frontend/src/types.ts b/apps/frontend/src/types.ts new file mode 100644 index 0000000..6e1e6f0 --- /dev/null +++ b/apps/frontend/src/types.ts @@ -0,0 +1,16 @@ +export type Job = { + _id: string + id: number + company: string + logo: string + new: boolean + featured: boolean + position: string + role: string + level: string + postedAt: string + contract: string + location: string + languages: string[] + tools: string[] +} diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js index 5481bb0..d47abf4 100644 --- a/apps/frontend/tailwind.config.js +++ b/apps/frontend/tailwind.config.js @@ -4,6 +4,7 @@ module.exports = { './app/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', + './containers/**/*.{js,ts,jsx,tsx,mdx}', // Or if using `src` directory: './src/**/*.{js,ts,jsx,tsx,mdx}',