Web: Components: created bar-banner component
This commit is contained in:
parent
04e3a77bf3
commit
44925fde24
35
packages/asc-web-components/bar-banner/index.js
Normal file
35
packages/asc-web-components/bar-banner/index.js
Normal file
@ -0,0 +1,35 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { StyledBarBanner, StyledCrossIcon } from "./styled-bar-banner";
|
||||
|
||||
const BarBanner = (props) => {
|
||||
const { html } = props;
|
||||
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
const onClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<StyledBarBanner open={open}>
|
||||
{html ? (
|
||||
<iframe
|
||||
height="60px"
|
||||
width="95%"
|
||||
src={html}
|
||||
frameBorder="0"
|
||||
align="left"
|
||||
scrolling="no"
|
||||
>
|
||||
test
|
||||
</iframe>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div className="action" onClick={onClose}>
|
||||
<StyledCrossIcon size="medium" />
|
||||
</div>
|
||||
</StyledBarBanner>
|
||||
);
|
||||
};
|
||||
|
||||
export default BarBanner;
|
30
packages/asc-web-components/bar-banner/styled-bar-banner.js
Normal file
30
packages/asc-web-components/bar-banner/styled-bar-banner.js
Normal file
@ -0,0 +1,30 @@
|
||||
import styled from "styled-components";
|
||||
import CrossIcon from "../../../public/images/cross.react.svg";
|
||||
import commonIconsStyles from "../utils/common-icons-style";
|
||||
|
||||
const StyledCrossIcon = styled(CrossIcon)`
|
||||
${commonIconsStyles}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: #fff;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledBarBanner = styled.div`
|
||||
background: #e6eb96;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: ${(props) => (props.open ? "flex" : "none")};
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.action {
|
||||
padding: 4px;
|
||||
}
|
||||
`;
|
||||
|
||||
export { StyledBarBanner, StyledCrossIcon };
|
Loading…
Reference in New Issue
Block a user