I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can view my sandbox here: https://codesandbox.io/s/wonderful-bohr-by01z?file=/src/App.js
App.js:
import { Card, Footer, Header } from "./styles";
import { useState } from "react";
export default function App() {
const [expanded, setExpanded] = useState(false);
return (
<>
<Card>
<Header>last viewed: {null}</Header>
<Footer>
<span onClick={() => setExpanded(!expanded)}>View Details</span>
{expanded && (
<div className="accodion">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos,
facilis. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Eos, facilis. Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Eos, facilis. Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Eos, facilis.
</div>
)}
</Footer>
</Card>
</>
);
}
styles.js:
import styled from "styled-components";
const Card = styled.div`
background-color: ${({ isEmpty }) => (isEmpty ? "#FAFAFA" : "white")};
height: 100%;
border-radius: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
overflow: hidden;
margin: 8px;
`;
const DropDown = styled.div`
background-color: lightblue;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
`;
const Header = styled.div`
display: flex;
justify-content: space-between;
margin-top: -40;
font-size: 10px;
color: #7894b0;
margin: 16px;
`;
const Footer = styled.div`
background-color: rgb(242, 247, 251);
width: 100%;
height: 50px;
font-size: 12px;
line-height: 12px;
color: #4f4f4f;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
cursor: pointer;
.accodion {
padding: 30px;
}
`;
export { Card, Header, Footer, DropDown };