feat: add model info to device page

hello-nrfcloud · May 30, 2024 · 9f4b7d3 · 9f4b7d3
1 parent 721d694
commit 9f4b7d3
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 35 deletions.
diff --git a/src/components/DeviceHeader.tsx b/src/components/DeviceHeader.tsx
@@ -39,6 +39,7 @@ import { useState } from 'preact/hooks'
 import './DeviceHeader.css'
 import { CountryFlag } from './CountryFlag.js'
 import { formatFloat } from '#utils/format.js'
+import { ModelCard } from '#model/ModelCard.js'
 
 export const DeviceHeader = ({ device }: { device: Device }) => {
 	const type = device.model
@@ -64,7 +65,7 @@ export const DeviceHeader = ({ device }: { device: Device }) => {
 					</div>
 					{!showModeConfiguration && (
 						<div class="row my-4">
-							<div class="col-12 d-flex flex-wrap">
+							<div class="col-8 d-flex flex-wrap">
 								<div class="me-4 mb-2 mb-lg-4">
 									<NetworkModeInfo />
 								</div>
@@ -92,6 +93,9 @@ export const DeviceHeader = ({ device }: { device: Device }) => {
 									<Interact />
 								</div>
 							</div>
+							<div class="col-4">
+								<ModelCard model={device.model} />
+							</div>
 						</div>
 					)}
 				</header>

diff --git a/src/model/ModelCard.tsx b/src/model/ModelCard.tsx
@@ -0,0 +1,36 @@
+import type { Model } from '#context/Models.js'
+
+export const ModelCard = ({ model }: { model: Model }) => (
+	<div class="card">
+		<div class="card-header">
+			<h2>{model.title}</h2>
+			<p class="mb-1">{model.tagline}</p>
+			<p class="mb-0">
+				<code class="text-muted">{model.name}</code>
+			</p>
+		</div>
+		<img
+			alt={`${model.title} (${model.name})`}
+			src={`/static/images/${encodeURIComponent(model.name)}.webp?v=${VERSION}`}
+			class="img-fluid p-4"
+		/>
+		<div class="card-body">
+			<p>{model.abstract}</p>
+		</div>
+		<div class="card-footer">
+			<h2 class="mt-2">Links</h2>
+			<ul>
+				<li>
+					<a href={model.links.learnMore} target={'_blank'}>
+						Learn more
+					</a>
+				</li>
+				<li>
+					<a href={model.links.documentation} target={'_blank'}>
+						Documentation
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+)
diff --git a/src/model/PCA20065/Page.css b/src/model/PCA20065/Page.css
@@ -0,0 +1,7 @@
+@media (min-width: 992px) {
+  .grid {
+    display: grid;
+    grid-template: auto auto / 1fr 1fr;
+    grid-auto-flow: column;
+  }
+}
diff --git a/src/page/Model.tsx b/src/page/Model.tsx
@@ -1,6 +1,7 @@
 import { ScanQR } from '#components/ScanQR.js'
 import { YouTubeVideo } from '#components/YouTubeVideo.js'
 import { type Model as TModel } from '#context/Models.js'
+import { ModelCard } from '#model/ModelCard.js'
 
 export const Model = ({ model }: { model: TModel }) => (
 	<main>
@@ -26,40 +27,7 @@ export const Model = ({ model }: { model: TModel }) => (
 					)}
 				</section>
 				<aside class="col-12 col-md-6 col-lg-4 offset-lg-2">
-					<div class="card">
-						<div class="card-header">
-							<h2>{model.title}</h2>
-							<p class="mb-1">{model.tagline}</p>
-							<p class="mb-0">
-								<code class="text-muted">{model.name}</code>
-							</p>
-						</div>
-						<img
-							alt={`${model.title} (${model.name})`}
-							src={`/static/images/${encodeURIComponent(
-								model.name,
-							)}.webp?v=${VERSION}`}
-							class="img-fluid p-4"
-						/>
-						<div class="card-body">
-							<p>{model.abstract}</p>
-						</div>
-						<div class="card-footer">
-							<h2 class="mt-2">Links</h2>
-							<ul>
-								<li>
-									<a href={model.links.learnMore} target={'_blank'}>
-										Learn more
-									</a>
-								</li>
-								<li>
-									<a href={model.links.documentation} target={'_blank'}>
-										Documentation
-									</a>
-								</li>
-							</ul>
-						</div>
-					</div>
+					<ModelCard model={model} />
 				</aside>
 			</div>
 		</div>