Skip to content

Commit

Permalink
finally goodnight
Browse files Browse the repository at this point in the history
  • Loading branch information
@bentsen
bentsen committed Nov 25, 2022
1 parent 1458742 commit 678858e
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 29 deletions.
6 changes: 6 additions & 0 deletions src/app/about/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ const About = () => {
<span className={"p-2"}>Machine learning is weinell/gallar skriv et eller andet fedt her tabere</span>
</div>
</div>
<div className={"mt-10"}>
<h3 className={"font-bold"}>How does PokéBattle work?</h3>
<div>
<span className={"p-2"}>The way PokéBattle works weinell/gallar skriv et eller andet fedt her tabere</span>
</div>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const Footer = () => {

return (
<>
<div className={"w-full bg-navbar h-auto pt-5 pb-5"}>
<div className={"w-full bg-betterBlack h-auto pt-5 pb-5"}>
<div className={"pl-[10%] h-full flex items-center text-white"}>
Created by
<Link className={"text-blue-400 pl-2 hover:underline"} href={"https://github.com/Freddiiy"}>Frederik Gallar,</Link>
Expand Down
10 changes: 5 additions & 5 deletions src/app/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Link from "next/link";
const Navbar = () => {
return(
<>
<nav className={"w-full h-16 bg-navbar"}>
<nav className={"w-full h-16 bg-betterBlack"}>
<div className={"flex items-center justify-between h-full px-5 md:px-32"}>
<div className={"text-white md:hidden"}>
<svg
Expand All @@ -30,13 +30,13 @@ const Navbar = () => {
<div className={"h-full"}>
<ul className={"hidden md:flex flex-row items-center text-lg font-medium text-betterWhite h-full"}>
<Link href={"/"}>
<li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>Home</li>
<li className={"cursor-pointer hover:underline hover:bg-hoverColor p-4"}>Home</li>
</Link>
<Link href={"/about"}>
<li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>About</li>
<li className={"cursor-pointer hover:underline hover:bg-hoverColor p-4"}>About</li>
</Link>
<li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>something</li>
<li className={"cursor-pointer hover:underline hover:bg-red-700 p-4"}>something</li>
<li className={"cursor-pointer hover:underline hover:bg-hoverColor p-4"}>something</li>
<li className={"cursor-pointer hover:underline hover:bg-hoverColor p-4"}>something</li>
</ul>
</div>
</div>
Expand Down
40 changes: 22 additions & 18 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,15 @@ const ImageCarousel = ({pokemons}: {pokemons: IPokemon[]}) => {
{pokemons.map((pokemon) =>
<div key={pokemon.id} className={"inline-block p-2 pointer-events-none border-b border-black"}>
<div className={"text-center"}>
<Image
className={"h-16 w-auto"}
priority
src={pokemon.image}
alt={pokemon.name}
width={100}
height={120}/>
<div className={"bg-darkerWhite rounded-2xl"}>
<Image
className={"h-16 w-auto"}
priority
src={pokemon.image}
alt={pokemon.name}
width={100}
height={120}/>
</div>
<span>{pokemon.name}</span>
</div>
</div>
Expand All @@ -88,21 +90,23 @@ const ImageCarousel = ({pokemons}: {pokemons: IPokemon[]}) => {
const PokemonSelector = ({pokemons} : {pokemons: IPokemon[]}) => {
return(
<>
<div className={"w-96 h-96 bg-darkerWhite rounded"}>
<div className={"p-10 flex flex-col"}>
<div className={"w-96 h-96 bg-darkerWhite border border-hoverColor rounded"}>
<div className={"flex flex-col"}>
<div>
1. Choose first Pokemon
<Searchbar pokemons={pokemons}/>
</div>
<div className={"h-40 relative"}>
<Image
className={"pixel"}
src={"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"}
alt={"pokemon2"}
fill
/>
<div className={"border-b border-hoverColor h-52 text-center font-bold text-xl"}>
<div className={"h-40 relative"}>
<Image
className={"pixel"}
src={"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"}
alt={"pokemon2"}
fill
/>
</div>
<span>Pikachu</span>
</div>
<div>
<div className={"p-5"}>
<div>
Stats:
</div>
Expand Down
13 changes: 8 additions & 5 deletions src/app/searchbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,14 @@ const Searchbar = ({pokemons} : {pokemons: IPokemon[]}) => {
<div>
<Combobox value={selected} onChange={handlePokemon} nullable>
<Combobox.Input as={Fragment} onChange={(e) => setSearch(e.target.value)} displayValue={(selected: SearchOptions) => selected?.name}>
<input className={"bg-betterWhite text-black w-full h-9 rounded outline-0 indent-4"} type="text"/>
<input
className={"bg-betterBlack text-betterWhite w-full h-12 rounded-t outline-0 indent-4"}
placeholder={"Type Pokémon name"}
type="text"/>
</Combobox.Input>
{search && (
<div className={"relative"}>
<Combobox.Options className={"bg-betterWhite text-black absolute w-full z-50 max-h-56 rounded overflow-y-scroll"}>
<Combobox.Options className={"bg-betterWhite text-black absolute w-full z-50 max-h-56 rounded-b overflow-y-scroll"}>
<p className={"ml-3 text-summoner-gray"}>Pokémons</p>
{filteredPokemons != null && (
filteredPokemons.length === 0 ? (
Expand Down Expand Up @@ -63,8 +66,8 @@ const SearchOptions = (props: SearchOptions) => {
<Combobox.Option value={props}>
{({active, selected}) => (
<>
<ul className={"text-betterWhite"}>
<li className={`hover:bg-red-400 ${active ? "bg-red-400" : ""} p-3 cursor-pointer`}>
<ul className={""}>
<li className={`hover:bg-hoverColor hover:text-betterWhite ${active ? "bg-hoverColor text-betterWhite" : ""} p-3 cursor-pointer`}>
<div className={"flex items-center"}>
<Image
priority
Expand All @@ -74,7 +77,7 @@ const SearchOptions = (props: SearchOptions) => {
height={30}/>
<div className={"flex justify-between items-center w-full"}>
<div>
<span className={"ml-1 text-black"}>{name}</span>
<span className={"ml-1"}>{name}</span>
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ module.exports = {
betterWhite: 'rgb(246,246,246)',
betterBlue: '#4169a7',
darkerWhite: '#eaeaea',
betterBlack: '#202020',
hoverColor: '#292929',
},
fontFamily: {
sans: ['Lato', 'sans-serif']
Expand Down

0 comments on commit 678858e

Please sign in to comment.