Shinnex
/
shx-product-pipeline-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better title

main
alex 2024-05-30 14:03:19 +02:00
parent 209711cc9f
commit 04f7fdc236
2 changed files with 114 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.css
View File

@ -9,6 +9,7 @@
.container { .container {
width: 100%; width: 100%;
max-width: 1100px; max-width: 1100px;
padding: 12px;
} }
.subtitle { .subtitle {
@ -33,7 +34,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
padding: 20px; padding-top: 20px;
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
} }
@ -42,6 +43,7 @@
background-color: #fff; background-color: #fff;
padding: 16px 20px; padding: 16px 20px;
border-radius: 40px; border-radius: 40px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
} }
.card span { .card span {

224
src/App.js
View File

@ -181,7 +181,7 @@ function App() {
setInterval(() => fetchProducts(), 5000); setInterval(() => fetchProducts(), 5000);
}, []); }, []);
// function to send the height to the iframe // send the height to the iframe
function sendPageHeightToIframe() { function sendPageHeightToIframe() {
const height = document.body.scrollHeight; const height = document.body.scrollHeight;
@ -193,11 +193,11 @@ function App() {
return ( return (
<div className="app"> <div className="app">
<div className="container" style={{ paddingTop: 20 }}> <div className="container">
<span className="subtitle">Immer auf dem aktuellen Stand sein</span> <span className="subtitle">Auf dem Laufenden bleiben</span>
<h1 className="header">Neue Produkte</h1> <h1 className="header">Unsere neuesten Produkte</h1>
<div className="cards-container" style={{ paddingBottom: 20 }}> <div className="cards-container" style={{ paddingBottom: 40 }}>
<div className="cards"> <div className="cards">
{products.NewProducts.length > 0 ? ( {products.NewProducts.length > 0 ? (
<> <>
@ -235,10 +235,10 @@ function App() {
</div> </div>
</div> </div>
<span className="subtitle">Was als nächstes kommt</span> <span className="subtitle">Bald bei uns erhältlich</span>
<h1 className="header">Aktuell in Arbeit</h1> <h1 className="header">Aktuell in Arbeit</h1>
<div className="cards-container" style={{ paddingBottom: 20 }}> <div className="cards-container" style={{ paddingBottom: 40 }}>
<div className="cards"> <div className="cards">
{products.InWorkProducts.length > 0 ? ( {products.InWorkProducts.length > 0 ? (
<> <>
@ -272,121 +272,119 @@ function App() {
</div> </div>
</div> </div>
<span className="subtitle">Jede Stimme zählt</span> <span className="subtitle">Jetzt abstimmen</span>
<h1 className="header">Zukünftige Produkte</h1> <h1 className="header">Zukünftige Produkte</h1>
<Flex justify="center" style={{ marginTop: 4 }}>
<span style={{ color: "#474747", maxWidth: 800 }}>
Gestalte unser Sortiment mit! Hier hast du die Möglichkeit, für das
nächste Produkt abzustimmen und die Reihenfolge zukünftiger Produkte
mit deiner Stimme zu beeinflussen. Deine Meinung zählt!
</span>
</Flex>
<div className="cards-container"> <div className="cards-container">
<div className="cards"> <div className="cards" style={{ paddingBottom: 20 }}>
{products.FutureProducts.length > 0 ? ( {products.FutureProducts.length > 0 ? (
<> <>
{products.FutureProducts {products.FutureProducts.sort((a, b) => b.Votes - a.Votes).map(
/*.sort((a, b) => (product, index) =>
a.Name.localeCompare(b.Name) (showMore.futureProducts || index < 5) && (
)*/ <motion.div
.sort((a, b) => b.Votes - a.Votes) key={product.Name}
.map( layout
(product, index) => initial={{ opacity: 0 }}
(showMore.futureProducts || index < 5) && ( animate={{ opacity: 1 }}
<motion.div exit={{ opacity: 0 }}
key={product.Name} transition={{ duration: 0.5 }}
layout >
initial={{ opacity: 0 }} <Card
animate={{ opacity: 1 }} name={product.Name}
exit={{ opacity: 0 }} rankingPosition={index + 1}
transition={{ duration: 0.5 }} productVariant={product.Variant}
> productCharacteristics={product.Characteristics}
<Card rightComponent={
name={product.Name} <div style={{ display: "flex", gap: 12 }}>
rankingPosition={index + 1} <DislikeOutlined
productVariant={product.Variant} style={{
productCharacteristics={product.Characteristics} color:
rightComponent={ votes.findIndex(
<div style={{ display: "flex", gap: 12 }}> (vote) =>
<DislikeOutlined vote.n === product.Name && vote.t === 0
style={{ ) > -1
color: ? "red"
votes.findIndex( : "#000",
(vote) => }}
vote.n === product.Name && onClick={() => {
vote.t === 0 if (
) > -1 votes.findIndex(
? "red" (vote) =>
: "#000", vote.n === product.Name && vote.t === 0
}} ) === -1
onClick={() => { ) {
if ( VoteRequest(product.Name, false);
votes.findIndex( vote(product.Name, false);
(vote) =>
vote.n === product.Name &&
vote.t === 0
) === -1
) {
VoteRequest(product.Name, false);
vote(product.Name, false);
// simulate vote before request is made // simulate vote before request is made
setProducts((products) => { setProducts((products) => {
const newArr = const newArr =
products.FutureProducts.map((p) => products.FutureProducts.map((p) =>
p.Name === product.Name p.Name === product.Name
? { ...p, Votes: p.Votes - 1 } ? { ...p, Votes: p.Votes - 1 }
: p : p
); );
return { return {
...products, ...products,
FutureProducts: newArr, FutureProducts: newArr,
}; };
}); });
} }
}} }}
/> />
<span>{product.Votes}</span> <span>{product.Votes}</span>
<LikeOutlined <LikeOutlined
style={{ style={{
color: color:
votes.findIndex( votes.findIndex(
(vote) => (vote) =>
vote.n === product.Name && vote.n === product.Name && vote.t === 1
vote.t === 1 ) > -1
) > -1 ? "green"
? "green" : "#000",
: "#000", }}
}} onClick={() => {
onClick={() => { if (
if ( votes.findIndex(
votes.findIndex( (vote) =>
(vote) => vote.n === product.Name && vote.t === 1
vote.n === product.Name && ) === -1
vote.t === 1 ) {
) === -1 VoteRequest(product.Name, true);
) { vote(product.Name, true);
VoteRequest(product.Name, true);
vote(product.Name, true);
// simulate vote before request is made // simulate vote before request is made
setProducts((products) => { setProducts((products) => {
const newArr = const newArr =
products.FutureProducts.map((p) => products.FutureProducts.map((p) =>
p.Name === product.Name p.Name === product.Name
? { ...p, Votes: p.Votes + 1 } ? { ...p, Votes: p.Votes + 1 }
: p : p
); );
return { return {
...products, ...products,
FutureProducts: newArr, FutureProducts: newArr,
}; };
}); });
} }
}} }}
/> />
</div> </div>
} }
/> />
</motion.div> </motion.div>
) )
)} )}
{products.FutureProducts.length > 5 && {products.FutureProducts.length > 5 &&
!showMore.futureProducts && ( !showMore.futureProducts && (