docs.waku.org/src/components/PoweredByCard.js
2023-05-25 17:48:57 +01:00

54 lines
1.1 KiB
JavaScript

import React from "react";
const PoweredByCard = ({ appLink, logoSrc, appName, children }) => (
<div
style={{
width: "100%",
border: "1px solid #666",
borderRadius: "8px",
padding: "1.5rem"
}}
>
<div style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
backgroundColor: "#fff",
marginBottom: "1rem"
}}>
<img
src={logoSrc}
alt={appName + " logo"}
style={{
height: "55px",
padding: "5px"
}}
/>
</div>
<p>{children}</p>
<a href={appLink} target="_blank" rel="noopener noreferrer">
<button
style={{
width: "100%",
padding: "1rem",
borderRadius: "8px",
backgroundColor: "#e6f6ff",
border: "1px solid #666",
fontSize: "16px",
fontWeight: 700,
cursor: "pointer",
color: "#3578e5"
}}
>
Visit { appName }&nbsp;
<svg width="16" height="16" aria-hidden="true" viewBox="0 0 24 24">
<path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
</path>
</svg>
</button>
</a>
</div>
);
export default PoweredByCard;