Skip to content

Instantly share code, notes, and snippets.

@Kizmelvin
Created Jul 25, 2022
Embed
What would you like to do?
Brand-visualizer
//app/pages/index.js
import { useState } from "react";
import axios from "axios";
import { Col, Row, Container } from "react-bootstrap";
const Home = () => {
const [coffeBrand, setCoffeeBrand] = useState("");
const [notepadBrand, setNotepadBrand] = useState("");
const [hoodieBrand, setHoodieBrand] = useState("");
const [cardBrand, setCardBrand] = useState("");
const handleClick = (e) => {
let logoId = e.target.id;
let img = axios.post(`/api/cloudinary?id=${logoId}`);
img.then((res) => {
const { mug, notepad, hoodie, card } = res.data;
setCoffeeBrand(mug);
setNotepadBrand(notepad);
setHoodieBrand(hoodie);
setCardBrand(card);
});
};
return (
<Container md={8} className="p-3">
<h1 className="text-center mb-5">
{" "}
<strong>Brand Visualizer</strong>{" "}
</h1>
<div>
<div className="container">
{" "}
<h5 className="mt-2 fs-5">Select a logo to preview on the items</h5>
<Row className="logo">
<Col xs={4}>
<img
id="birdwings"
src="/birdwings.svg"
width={50}
height={50}
alt="birdwings brand"
onClick={handleClick}
/>
</Col>
<Col xs={4}>
<img
id="phoenix"
src="/phoenix.svg"
width={50}
height={50}
alt="phoenix brand"
onClick={handleClick}
/>
</Col>
<Col x={4}>
<img
id="butterfly"
src="/butterfly.svg"
width={50}
height={50}
alt="butterfly brand"
onClick={handleClick}
/>
</Col>
</Row>
</div>
<Row className="mt-5 branded">
<Col className="p-4">
<img
src={`${!coffeBrand ? "/mug.png" : coffeBrand}`}
alt="branded coffee mug"
width={320}
height={300}
style={{
filter: `${!coffeBrand ? "grayscale(100%)" : "none"}`
}}
/>
</Col>
<Col className="p-4">
<img
src={`${!notepadBrand ? "/notepad.jpg" : notepadBrand}`}
alt="branded notepad"
width={320}
height={300}
style={{
filter: `${!notepadBrand ? "grayscale(100%)" : "none"}`
}}
/>
</Col>
</Row>
<Row>
<Col className="p-4">
<img
src={`${!hoodieBrand ? "/hoodie.jpg" : hoodieBrand}`}
alt="branded hoodie"
width={320}
height={300}
style={{
filter: `${!hoodieBrand ? "grayscale(100%)" : "none"}`
}}
/>
</Col>
<Col className="p-4">
<img
src={`${!cardBrand ? "/card.png" : cardBrand}`}
alt="branded hoodie"
width={320}
height={380}
style={{ filter: `${!cardBrand ? "grayscale(100%)" : "none"}` }}
/>
</Col>
</Row>
</div>
</Container>
);
};
Home.suppressFirstRenderFlicker = true;
export default Home;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment