diff --git a/src/assets/card-shape.svg b/src/assets/card-shape.svg new file mode 100644 index 0000000..f31c980 --- /dev/null +++ b/src/assets/card-shape.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/search.svg b/src/assets/search.svg new file mode 100644 index 0000000..4e85ae4 --- /dev/null +++ b/src/assets/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/star.svg b/src/assets/star.svg new file mode 100644 index 0000000..44e0f1b --- /dev/null +++ b/src/assets/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/vite.svg b/src/assets/vite.svg deleted file mode 100644 index 5101b67..0000000 --- a/src/assets/vite.svg +++ /dev/null @@ -1 +0,0 @@ -Vite diff --git a/src/components/CharacterCardSmall.css b/src/components/CharacterCardSmall.css new file mode 100644 index 0000000..b5c2fbf --- /dev/null +++ b/src/components/CharacterCardSmall.css @@ -0,0 +1,125 @@ +.card-content{ + container-type: inline-size; + position: relative; + display: flex; + align-items: center; + justify-content: center; + + width: 19rem; + height: 25.5rem; + border-radius: 1.5rem; + background-color: #5A7D0D; + +} + +@media (min-width: 600px){ + .card-content{ + container-type: inline-size; + position: relative; + display: flex; + align-items: center; + justify-content: center; + + width: 12rem; + height: 16.5rem; + border-radius: 1.5rem; + background-color: #5A7D0D; + } +} + +.card-shape{ + position: absolute; + width: 18rem; + height: 23rem +} + +@media (min-width:600px){ + .card-shape{ + position: absolute; + width: 11rem; + height: 16rem + } +} + +.character-info{ + display: flex; + text-align: center; + flex-direction: column; + align-items: center; + position: absolute; + color:white; + z-index: 1; +} + +.character-image{ + width: 15rem; + height: 15rem; + border-radius: 1.5rem; +} + +@media (min-width:600px){ + .character-image{ + width: 10rem; + height: 10rem; + border-radius: 1.5rem; + } +} + +.card-buttons{ + display: flex; + align-items: center; + justify-content: center; + max-width: inherit; + padding-top: 0.5rem; +} + +.star{ + width: 1.5rem; + height: 1.5rem; + + filter: brightness(0) invert(1); +} + +.favorite-button { + background: transparent; + border: 0; + transform: translateX(0.7rem) translateY(0.8rem); + cursor: pointer; +} + +.details-button{ + background-color: white; + color: black; + border-radius: 1rem; + border:none; + width: 12rem; + height: 2rem; +} + +@media (min-width:600px){ + .details-button{ + background-color: white; + color: black; + border-radius: 1rem; + border:none; + width: 8rem; + height: 2rem; + } +} + + +p{ + padding-top: 1rem; + padding-bottom: 1rem; + font-weight: 800; + font-size:2rem; + +} + +@media (min-width:600px){ + p{ + padding: 0; + font-weight: 800; + font-size:1.5rem; + } +} \ No newline at end of file diff --git a/src/components/CharacterCardSmall.tsx b/src/components/CharacterCardSmall.tsx new file mode 100644 index 0000000..756030a --- /dev/null +++ b/src/components/CharacterCardSmall.tsx @@ -0,0 +1,26 @@ +import './CharacterCardSmall.css' +import CardShape from '../assets/card-shape.svg' +import StarShape from '../assets/star.svg' + +type CharacterCardSmallProps = { + name: string; + image: string; +}; + +export default function CharacterCardSmall({name, image}: CharacterCardSmallProps){ + return( +
+ +
+ character image +

{name}

+
+ + +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/placeHolderComp.tsx b/src/components/placeHolderComp.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/index.css b/src/index.css index 5fb3313..f6e6759 100644 --- a/src/index.css +++ b/src/index.css @@ -51,10 +51,9 @@ } #root { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; + margin-top: 2rem; + margin-left: 2rem; + margin-right: 2rem; border-inline: 1px solid var(--border); min-height: 100svh; display: flex; diff --git a/src/main.tsx b/src/main.tsx index bef5202..5b4f9dc 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,9 +2,11 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.tsx' +import CharactersPage from './pages/CharactersPage.tsx' createRoot(document.getElementById('root')!).render( + , ) diff --git a/src/pages/CharactersPage.css b/src/pages/CharactersPage.css new file mode 100644 index 0000000..04c9b51 --- /dev/null +++ b/src/pages/CharactersPage.css @@ -0,0 +1,94 @@ +.content{ + display: flex; +} + +.search-area{ + max-width: 56rem; +} + +.filter-area{ + display: none; +} + +@media (min-width: 600px) { + .filter-area { + display: block; + width: 13rem; + height: fit-content; + margin-right: 1rem; + border: 2px solid #3F3F3F; + + border-radius: 1rem; + padding: 2rem; + } +} + +.character-cards{ + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 2rem; +} + +.searchbar { + display: flex; + width: min(95%, 80rem); + margin-bottom: 2rem; + + overflow: hidden; + border: 2px solid #3f3f3f; + border-radius: 0.5rem; +} + +.searchfield { + flex: 1; + min-width: 0; + height: 2.5rem; + padding: 0 1rem; + + border: 0; + outline: 0; + font: inherit; +} + +.search-button { + min-height: 2.5rem; + padding: 0 1.25rem; + display: flex; + align-items: center; + justify-content: center; + + background-color: #42b4ca; + border: 0; + border-left: 2px solid #3f3f3f; + + font: inherit; + font-weight: 700; + cursor: pointer; +} + +.search-icon{ + filter: brightness(0) invert(1); +} + +.searchbar:focus-within { + border-color: #42b4ca; + box-shadow: 0 0 0 3px rgb(66 180 202 / 25%); +} + +.search-button:hover { + background-color: #369bad; +} + +.filter-group { + border:none; + margin-bottom: 1rem; +} +.checkbox-option { + display: flex; + align-items: center; + gap: 0.5rem; + + width: fit-content; + cursor: pointer; +} \ No newline at end of file diff --git a/src/pages/CharactersPage.tsx b/src/pages/CharactersPage.tsx new file mode 100644 index 0000000..b654f7d --- /dev/null +++ b/src/pages/CharactersPage.tsx @@ -0,0 +1,81 @@ +import './CharactersPage.css' + +import { useEffect, useState } from "react"; +import CharacterCardSmall from "../components/CharacterCardSmall"; +import SearchIcon from "../assets/search.svg" + +type Character = { + id: number; + name: string; + species: string; + status: string; + gender: string; + origin: string; + image: string; +}; + +const filters = [ + {title: 'Gender', options: ['Female', 'Male', 'Unknown'] }, + {title: 'Species', options: ['Human', 'Aileen', 'Unknown']}, + {title: 'Status', options: ['Alive', 'Dead', 'Unknown']} +]; + +export default function CharactersPage(){ + + const [characters, setCharacters] = useState([]); + + useEffect(() => { + async function fetchCharacters(){ + try{ + const response = await fetch("https://rickandmortyapi.com/api/character"); + + if (!response.ok) { + throw new Error(`Could not fetch characters: ${response.status}`) + } + + const data = await response.json(); + setCharacters(data.results); + } + catch(error) { + console.error(error); + } + } + fetchCharacters() + }, []) + + return( +
+
+
+ + +
+
+ {characters.map((character) => ( + + ))} +
+
+
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/pages/placeholderPage.tsx b/src/pages/placeholderPage.tsx deleted file mode 100644 index e69de29..0000000