docs.waku.org/src/components/PoweredByCard.js

54 lines
1.1 KiB
JavaScript
Raw Normal View History

2023-05-20 23:09:10 +01:00
import React from "react";
2023-05-25 17:48:57 +01:00
const PoweredByCard = ({ appLink, logoSrc, appName, children }) => (
2023-05-20 23:09:10 +01:00
<div
style={{
width: "100%",
2023-05-21 01:32:38 +01:00
border: "1px solid #666",
2023-05-20 23:09:10 +01:00
borderRadius: "8px",
2023-05-22 11:53:23 +01:00
padding: "1.5rem"
2023-05-20 23:09:10 +01:00
}}
>
<div style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
2023-05-21 01:32:38 +01:00
backgroundColor: "#fff",
2023-05-22 11:53:23 +01:00
marginBottom: "1rem"
2023-05-20 23:09:10 +01:00
}}>
<img
src={logoSrc}
2023-05-25 17:48:57 +01:00
alt={appName + " logo"}
2023-05-20 23:09:10 +01:00
style={{
2023-05-21 01:32:38 +01:00
height: "55px",
padding: "5px"
2023-05-20 23:09:10 +01:00
}}
/>
</div>
<p>{children}</p>
<a href={appLink} target="_blank" rel="noopener noreferrer">
<button
style={{
width: "100%",
2023-05-22 11:53:23 +01:00
padding: "1rem",
2023-05-20 23:09:10 +01:00
borderRadius: "8px",
backgroundColor: "#e6f6ff",
2023-05-21 01:32:38 +01:00
border: "1px solid #666",
2023-05-20 23:09:10 +01:00
fontSize: "16px",
fontWeight: 700,
cursor: "pointer",
color: "#3578e5"
}}
>
2023-05-25 17:48:57 +01:00
Visit { appName }&nbsp;
2023-05-21 01:32:38 +01:00
<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>
2023-05-20 23:09:10 +01:00
</button>
</a>
</div>
);
export default PoweredByCard;