turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add icons

This commit is contained in:
Daniel Schädler 2025-03-14 19:35:10 +01:00
parent 9306dfea6c
commit b44d7cb673
3 changed files with 69 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
js/components/FavoriteBar.js
View File

@ -1,9 +1,14 @@
import React, {useState, useEffect} from 'react';
import {Button} from 'reactstrap';
import React, { useState, useEffect } from 'react';
import { Button } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar as filledStar } from '@fortawesome/free-solid-svg-icons';
import { faStar as emptyStar } from '@fortawesome/free-regular-svg-icons';
import { faHeartCirclePlus } from '@fortawesome/free-solid-svg-icons';
export function FavoriteBar({teams}) {
export function FavoriteBar({ teams }) {
const [favorite, setFavorite] = useState(null);
const [isVisible, setIsVisible] = useState(false);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const savedFavorite = localStorage.getItem('favoriteTeam');
@ -13,6 +18,7 @@ export function FavoriteBar({teams}) {
setFavorite(team);
}
}
setIsLoading(false);
}, [teams]);
const toggleFavorite = team => {
@ -25,28 +31,38 @@ export function FavoriteBar({teams}) {
}
};
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
<Button onClick={() => setIsVisible(!isVisible)}>
{isVisible ? 'Hide Favorite Bar' : 'Show Favorite Bar'}
</Button>
<div style={{ display: 'flex', alignItems: 'center' }}>
<h2 style={{ marginRight: '10px' }}>Favorit:</h2>
<p style={{ marginRight: '10px' }}>{favorite ? favorite.name : ''}</p>
<Button onClick={() => setIsVisible(!isVisible)}>
<FontAwesomeIcon icon={faHeartCirclePlus} />
</Button>
</div>
{isVisible && (
<div className="favorite-bar">
<h2>Favorite Team</h2>
{favorite ? <p>{favorite.name}</p> : <p>No favorite team selected</p>}
<h3>All Teams</h3>
<ul>
<div>
{teams.map(team => (
<li key={team.id}>
{team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
<Button onClick={() => toggleFavorite(team)}>
{favorite && favorite.id === team.id ? 'Remove from Favorites' : 'Add to Favorites'}
<div key={team.id} style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={() => toggleFavorite(team)} style={{ marginRight: '10px' }}>
<FontAwesomeIcon
icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
/>
</Button>
</li>
<span>
{team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
</span>
</div>
))}
</ul>
</div>
</div>
)}
</div>
);
}
}

4
package.json
View File

@ -13,6 +13,10 @@
"author": "",
"license": "ISC",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.7.2",
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@zeit/next-css": "^1.0.1",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",

33
yarn.lock
View File

@ -43,6 +43,39 @@
minimatch "^3.1.2"
strip-json-comments "^3.1.1"
"@fortawesome/fontawesome-common-types@6.7.2":
version "6.7.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz#7123d74b0c1e726794aed1184795dbce12186470"
integrity sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==
"@fortawesome/fontawesome-svg-core@^6.7.2":
version "6.7.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz#0ac6013724d5cc327c1eb81335b91300a4fce2f2"
integrity sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==
dependencies:
"@fortawesome/fontawesome-common-types" "6.7.2"
"@fortawesome/free-regular-svg-icons@^6.7.2":
version "6.7.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz#f1651e55e6651a15589b0569516208f9c65f96db"
integrity sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==
dependencies:
"@fortawesome/fontawesome-common-types" "6.7.2"
"@fortawesome/free-solid-svg-icons@^6.7.2":
version "6.7.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz#fe25883b5eb8464a82918599950d283c465b57f6"
integrity sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==
dependencies:
"@fortawesome/fontawesome-common-types" "6.7.2"
"@fortawesome/react-fontawesome@^0.2.2":
version "0.2.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4"
integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==
dependencies:
prop-types "^15.8.1"
"@humanwhocodes/config-array@^0.9.2":
version "0.9.5"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"