dsg

MaxwellBo · May 20, 2024 · 5e85f40 · 5e85f40
1 parent 3e022bc
commit 5e85f40
Show file tree

Hide file tree

Showing 2 changed files with 179 additions and 21 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,7 +8,6 @@ import {
 export function App() {
   return (
     <main>
-      <h1>App</h1>
       <Outlet />
     </main>
   )
@@ -20,6 +19,8 @@ interface Doll {
   name: string;
   model: string;
   poster: string;
+  dateOfManufacture?: string;
+  dateOfAcquisition?: string;
 }
 
 export async function loadDolls(): Promise<Doll[]> {
@@ -30,6 +31,35 @@ export async function loadDolls(): Promise<Doll[]> {
       name: "Neil Armstrong", 
       model: "/models/NeilArmstrong.glb",
       poster: "/models/NeilArmstrong.webp",
+      dateOfManufacture: "1969",
+      dateOfAcquisition: "2021",
+    },
+    { 
+      id: "neil-armstrong", 
+      alt: "Alt text for Barbie doll",
+      name: "Neil Armstrong", 
+      model: "/models/NeilArmstrong.glb",
+      poster: "/models/NeilArmstrong.webp",
+      dateOfManufacture: "1969",
+      dateOfAcquisition: "2021",
+    },
+    { 
+      id: "neil-armstrong", 
+      alt: "Alt text for Barbie doll",
+      name: "Neil Armstrong", 
+      model: "/models/NeilArmstrong.glb",
+      poster: "/models/NeilArmstrong.webp",
+      dateOfManufacture: "1969",
+      dateOfAcquisition: "2021",
+    },
+    { 
+      id: "neil-armstrong", 
+      alt: "Alt text for Barbie doll",
+      name: "Neil Armstrong", 
+      model: "/models/NeilArmstrong.glb",
+      poster: "/models/NeilArmstrong.webp",
+      dateOfManufacture: "1969",
+      dateOfAcquisition: "2021",
     },
   ]
 }
@@ -45,17 +75,8 @@ export function Doll() {
 
   return (
     <article>
-      <h2>Doll</h2>
-      {JSON.stringify(doll)}
-      {/* @ts-ignore */}
-      <model-viewer 
-        alt={doll.alt}
-        src={doll.model} 
-        ar 
-        environment-image="/environments/moon_1k.hdr" 
-        poster={doll.poster}
-        shadow-intensity="1" 
-        camera-controls touch-action="pan-y" />
+      <h2>{doll.name}</h2>
+      <Model doll={doll} big />
     </article>
   );
 }
@@ -65,20 +86,57 @@ export function DollsListing() {
 
   return (
     <section>
-      <h2>Dolls</h2>
-      <ul>
-        {dolls.map((doll) => (
-          <li key={doll.id}>
-            <a href={`/dolls/${doll.id}`}>
-              {doll.name}
-            </a>
-          </li>
-        ))}
+      <ul className="card-grid">
+        {dolls.map((doll) => <DollListing key={doll.id} doll={doll} />)}
       </ul>
     </section>
   );
 }
 
+function Model(props: { doll: Doll, big: boolean }) {
+  return (
+    // @ts-ignore
+    <model-viewer 
+      style={ props.big ? { height: '10rem' } : {} }
+      alt={props.doll.alt}
+      src={props.doll.model} 
+      environment-image="/environments/moon_1k.hdr" 
+      poster={props.doll.poster}
+      shadow-intensity="1" 
+      camera-controls 
+      auto-rotate
+      touch-action="pan-y" 
+    />
+  );
+}
+
+
+function DollListing(props: { doll: Doll }) {
+  return (
+    <li className="card">
+      <div className='center thumbnail'>
+        {/* <img src={props.doll.poster} alt={props.doll.alt} /> */}
+        <Model doll={props.doll}  />
+      </div>
+      <a href={`/dolls/${props.doll.id}`}>
+        {props.doll.name}
+      </a>
+      <DollDescriptionList doll={props.doll} />
+    </li>
+  );
+}
+
+function DollDescriptionList(props: { doll: Doll }) {
+  return (
+    <dl>
+      <dt>Date of Manufacture</dt>
+      <dd>{props.doll.dateOfManufacture}</dd>
+      <dt>Date of Acquisition</dt>
+      <dd>{props.doll.dateOfAcquisition}</dd>
+    </dl>
+  );
+}
+
 export function ErrorPage() {
   const error: any = useRouteError();
 

diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,100 @@
+/** Import a nice serif font from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');
+/** Import a more elegant monospace font from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
+
+body {
+  /** set a nicer serif font */
+  font-family: 'Lora', serif;
+  /** set a reasonable max-width */
+  max-width: min(80vw, 72ch);
+  margin: 5vw auto;
+  /** set a nice light tan background color */
+  background-color: #fffff8;
+}
+
+dl {
+  /** Description lists should be displayed as a grid */
+  display: grid;
+  grid-template-columns: auto auto;
+  /** the columns should autosize */
+  gap: 1em;
+
+  /** The font size should be a bit smaller */
+  font-size: 0.5em;
+}
+
+dl > dt {
+  /** Description terms should be bold */
+  font-weight: bold;
+
+}
+
+dl > dd {
+  /** Description details should be monospace */
+  font-family: 'Inconsolata', monospace;
+}
+
+.card-grid {
+  /** Display the cards as a grid */
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  gap: 1em;
+  list-style-type: none;
+}
+
+.card {
+  padding: 1rem;
+  margin: 1px;
+}
+
+.card img {
+  /* aspect-ratio: 4/3;
+  object-fit: cover; */
+  /* set a max width for the image */
+  max-width: 5rem;
+}
+
+.thumbnail {
+  margin: 1px;
+}
+
+.thumbnail:hover {
+  margin: 0px;
+  border: 1px solid #333;
+}
+
+/*
+  Josh's Custom CSS Reset
+  https://www.joshwcomeau.com/css/custom-css-reset/
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+html, body {
+  height: 100%;
+}
+body {
+  -webkit-font-smoothing: antialiased;
+}
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+input, button, textarea, select {
+  font: inherit;
+}
+#root, #__next {
+  isolation: isolate;
+}
+
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+}