mirror of
https://github.com/meshtastic/meshtastic.git
synced 2024-12-26 14:09:50 -08:00
added cards
This commit is contained in:
Foster Irwin
parent
d0358b6645
commit
ba3bf2bb36
145
src/pages/downloads/_components/DownloadCard.tsx
Normal file
145
src/pages/downloads/_components/DownloadCard.tsx
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
import React from 'react';
|
||||
|
||||
export interface releaseCardProps {
|
||||
client: string;
|
||||
imgUrl: string;
|
||||
url: string;
|
||||
notes: string;
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
export const DownloadCard = ({
|
||||
client,
|
||||
imgUrl,
|
||||
url,
|
||||
notes,
|
||||
buttonText,
|
||||
}: releaseCardProps): JSX.Element => {
|
||||
|
||||
const button = React.createElement(
|
||||
'a',
|
||||
{href: url, className: "button button--secondary button--block"},
|
||||
buttonText
|
||||
)
|
||||
const img = React.createElement(
|
||||
'img',
|
||||
{style: {height: '4rem'}, src: imgUrl, href: url},
|
||||
null
|
||||
)
|
||||
|
||||
const anchorImg = <a href={url}>{buttonText ? null : img}</a>
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div
|
||||
className="card__header"
|
||||
style={{ display: "flex", justifyContent: "space-between" }}
|
||||
>
|
||||
<h3>{client}</h3>
|
||||
</div>
|
||||
<div
|
||||
className="card__body"
|
||||
style={{ display: "flex", justifyContent: "center"}}
|
||||
>
|
||||
{buttonText ? button : anchorImg}
|
||||
</div>
|
||||
<div className="card__footer">
|
||||
{notes ? notes : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PlaceholderFirmwareCard = (): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
className="card"
|
||||
style={{
|
||||
width: "100%",
|
||||
animation: "pulse 2s infinite",
|
||||
transform: "scale(1)",
|
||||
display: "flex",
|
||||
gap: "1rem",
|
||||
padding: "1rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: "0.4rem",
|
||||
backgroundColor: "gray",
|
||||
height: "2rem",
|
||||
width: "8rem",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: "0.4rem",
|
||||
backgroundColor: "gray",
|
||||
marginTop: "1rem",
|
||||
height: "1rem",
|
||||
width: "8rem",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="card__body"
|
||||
style={{
|
||||
borderRadius: "0.4rem",
|
||||
backgroundColor: "gray",
|
||||
height: "3rem",
|
||||
display: "flex",
|
||||
jusifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
/>
|
||||
<a className="button disabled button--primary button--block"> </a>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: "0.4rem",
|
||||
backgroundColor: "gray",
|
||||
width: "8rem",
|
||||
height: "2rem",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: "0.4rem",
|
||||
backgroundColor: "gray",
|
||||
width: "11rem",
|
||||
height: "1rem",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: "0.4rem",
|
||||
backgroundColor: "gray",
|
||||
width: "9rem",
|
||||
height: "1rem",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: "0.4rem",
|
||||
backgroundColor: "gray",
|
||||
width: "13rem",
|
||||
height: "1rem",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: "0.4rem",
|
||||
backgroundColor: "gray",
|
||||
width: "11rem",
|
||||
height: "1rem",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -4,6 +4,7 @@ import useSWR from 'swr';
|
|||
|
||||
// import { Endpoints } from '@octokit/types';
|
||||
import Layout from '@theme/Layout';
|
||||
import CodeBlock from '@theme/CodeBlock';
|
||||
|
||||
import { Release } from '../../utils/github';
|
||||
import { fetcher } from '../../utils/swr';
|
||||
|
|
@ -12,6 +13,7 @@ import {
|
|||
PlaceholderFirmwareCard,
|
||||
} from './_components/FirmwareCard';
|
||||
import { HeaderText } from './_components/HeaderText'
|
||||
import { DownloadCard } from './_components/DownloadCard'
|
||||
|
||||
const Firmware = (): JSX.Element => {
|
||||
const { data, error } = useSWR<Release[]>(
|
||||
|
|
@ -38,7 +40,21 @@ const Firmware = (): JSX.Element => {
|
|||
<HeaderText
|
||||
type="h2"
|
||||
text="Install Meshtastic"
|
||||
link=""
|
||||
link="install-meshtastic"
|
||||
/>
|
||||
<DownloadCard
|
||||
client="Meshtastic Flasher"
|
||||
buttonText="Download Meshtastic Flasher"
|
||||
url="https://github.com/meshtastic/Meshtastic-gui-installer/releases/latest"
|
||||
notes={[
|
||||
"To download using ", <code>pip</code>, " use the following:",
|
||||
<CodeBlock className="language-bash" title="Install meshtastic-flasher">
|
||||
{"pip install meshtastic-flasher"}
|
||||
</CodeBlock>,
|
||||
<CodeBlock className="language-bash" title="Running meshtastic-flasher">
|
||||
{"meshtastic-flasher"}
|
||||
</CodeBlock>,
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="container">
|
||||
|
|
@ -47,6 +63,28 @@ const Firmware = (): JSX.Element => {
|
|||
text="Mobile Downloads"
|
||||
link="mobile-downloads"
|
||||
/>
|
||||
<ul
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "grid",
|
||||
gap: "1.5rem",
|
||||
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
|
||||
paddingLeft: "0",
|
||||
}}
|
||||
>
|
||||
<DownloadCard
|
||||
client="Android"
|
||||
imgUrl="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
|
||||
url="https://play.google.com/store/apps/details?id=com.geeksville.mesh&referrer=utm_source=downloads-page"
|
||||
notes={["To sideload, ",<a href="https://github.com/meshtastic/Meshtastic-Android/releases/latest" rel="noreferrer" target="_blank">download the latest .apk</a>," from Github", ]}
|
||||
/>
|
||||
<DownloadCard
|
||||
client="iOS"
|
||||
url="https://testflight.apple.com/join/c8nNl8q1"
|
||||
buttonText="Download on TestFlight"
|
||||
notes="Currently only available in TestFlight"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="container">
|
||||
<HeaderText
|
||||
|
|
|
|||
Loading…
Reference in a new issue