feat: Add explore page skeleton

canonical · Feb 12, 2025 · f7211cc · f7211cc
1 parent ed75ab7
commit f7211cc
Show file tree

Hide file tree

Showing 31 changed files with 787 additions and 3 deletions.
diff --git a/static/js/store/PromoCategory/PromoCategory.tsx b/static/js/store/PromoCategory/PromoCategory.tsx
@@ -0,0 +1,77 @@
+import { ReactNode } from "react";
+import { Row, Col, Strip } from "@canonical/react-components";
+
+function PromoCategory(): ReactNode {
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "baseline",
+        }}
+      >
+        <h2>Everything for your game night</h2>
+        <p>
+          <a href="/store?categories=games">See all</a>
+        </p>
+      </div>
+      <Strip shallow className="u-no-padding--bottom">
+        <Row>
+          <Col size={4}>
+            <div className="p-card u-no-padding">
+              <img
+                className="p-card__image"
+                src="https://dashboard.snapcraft.io/site_media/appmedia/2018/08/Screenshot_at_2018-08-14_13-05-24.png"
+                alt=""
+              />
+              <div className="p-card__inner">
+                <h3 className="p-heading--5 u-no-margin--bottom">Forestopia</h3>
+                <p className="u-text-muted u-no-padding--top">
+                  <em>Gravity Game Arise</em>
+                </p>
+                <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
+              </div>
+            </div>
+          </Col>
+          <Col size={4}>
+            <div className="p-card u-no-padding">
+              <img
+                className="p-card__image"
+                src="https://dashboard.snapcraft.io/site_media/appmedia/2018/08/Screenshot_at_2018-08-14_13-05-24.png"
+                alt=""
+              />
+              <div className="p-card__inner">
+                <h3 className="p-heading--5 u-no-margin--bottom">
+                  Anima Revolt Battle Simulator
+                </h3>
+                <p className="u-text-muted u-no-padding--top">
+                  <em>Vdimension</em>
+                </p>
+                <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
+              </div>
+            </div>
+          </Col>
+          <Col size={4}>
+            <div className="p-card u-no-padding">
+              <img
+                className="p-card__image"
+                src="https://dashboard.snapcraft.io/site_media/appmedia/2018/08/Screenshot_at_2018-08-14_13-05-24.png"
+                alt=""
+              />
+              <div className="p-card__inner">
+                <h3 className="p-heading--5 u-no-margin--bottom">GRIS</h3>
+                <p className="u-text-muted u-no-padding--top">
+                  <em>DevolverDigital</em>
+                </p>
+                <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
+              </div>
+            </div>
+          </Col>
+        </Row>
+      </Strip>
+    </>
+  );
+}
+
+export default PromoCategory;
diff --git a/static/js/store/PromoCategory/index.ts b/static/js/store/PromoCategory/index.ts
@@ -0,0 +1 @@
+export { default } from "./PromoCategory";
diff --git a/static/js/store/components/Blog/Blog.tsx b/static/js/store/components/Blog/Blog.tsx
@@ -0,0 +1,72 @@
+import { ReactNode } from "react";
+import { Row, Col } from "@canonical/react-components";
+
+function Blog(): ReactNode {
+  return (
+    <Row>
+      <Col size={4}>
+        <div
+          style={{
+            backgroundColor: "#2c2c2c",
+            color: "#fff",
+            padding: "40px",
+            display: "flex",
+            height: "100%",
+            alignItems: "center",
+          }}
+        >
+          <div>
+            <h3>Be part of the community</h3>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut
+              tempus ante, cut porttitor nbh.
+            </p>
+            <p>
+              <a className="is-dark" href="https://forum.snapcraft.io/">
+                Go to community
+              </a>
+            </p>
+          </div>
+        </div>
+      </Col>
+      <Col size={4}>
+        <img
+          src="https://ubuntu.com/wp-content/uploads/bbb2/image.jpeg"
+          alt=""
+        />
+        <h4>
+          <a href="/blog">Creating Snaps on Ubuntu Touch</a>
+        </h4>
+        <p>
+          Tablets, phones and current technology’s capabilities are phenomenal.
+          Who would have thought a thin, light, barely 10 inch device would
+          provide all the power necessary to run Virtual Machines, wherever one
+          desires while powered on battery?
+        </p>
+        <p className="u-text-muted">
+          <em>by Aaron Prisk on 3 April 2024</em>
+        </p>
+      </Col>
+      <Col size={4}>
+        <img
+          src="https://ubuntu.com/wp-content/uploads/bbb2/image.jpeg"
+          alt=""
+        />
+        <h4>
+          <a href="/blog">Creating Snaps on Ubuntu Touch</a>
+        </h4>
+        <p>
+          Tablets, phones and current technology’s capabilities are phenomenal.
+          Who would have thought a thin, light, barely 10 inch device would
+          provide all the power necessary to run Virtual Machines, wherever one
+          desires while powered on battery?
+        </p>
+        <p className="u-text-muted">
+          <em>by Aaron Prisk on 3 April 2024</em>
+        </p>
+      </Col>
+    </Row>
+  );
+}
+
+export default Blog;
diff --git a/static/js/store/components/Blog/index.ts b/static/js/store/components/Blog/index.ts
@@ -0,0 +1 @@
+export { default } from "./Blog";
diff --git a/static/js/store/components/Categories/Categories.tsx b/static/js/store/components/Categories/Categories.tsx
@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { Row, Col, Strip } from "@canonical/react-components";
+
+import { useCategories } from "../../hooks";
+
+import type { Category } from "../../types";
+
+function Categories(): ReactNode {
+  const { data, isLoading } = useCategories();
+
+  return (
+    <>
+      <h2>Categories</h2>
+      {!isLoading && data && (
+        <Strip shallow className="u-no-padding--bottom">
+          <Row>
+            {data.map((category: Category) => (
+              <Col size={3} key={category.name}>
+                <p className="p-heading--4">
+                  <a
+                    className="p-link--soft"
+                    href={`/store?categories=${category.name}&page=1`}
+                  >
+                    {category.display_name}
+                  </a>
+                </p>
+              </Col>
+            ))}
+          </Row>
+        </Strip>
+      )}
+    </>
+  );
+}
+
+export default Categories;
diff --git a/static/js/store/components/Categories/index.ts b/static/js/store/components/Categories/index.ts
@@ -0,0 +1 @@
+export { default } from "./Categories";
diff --git a/static/js/store/components/LearnHowToSnap/LearnHowToSnap.tsx b/static/js/store/components/LearnHowToSnap/LearnHowToSnap.tsx
@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+import { Row, Col } from "@canonical/react-components";
+
+function LearnHowToSnap(): ReactNode {
+  return (
+    <div
+      style={{
+        backgroundImage:
+          "url('https://assets.ubuntu.com/v1/e888a79f-suru.png')",
+        backgroundPosition: "top right",
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+        backgroundColor: "#f3f3f3",
+        padding: "67px",
+      }}
+    >
+      <Row>
+        <Col size={6}>
+          <h2>Learn how to snap in 30 minutes</h2>
+          <p className="p-heading--4">
+            In this section we could introduce any content that we consider
+            relevant
+          </p>
+          <a className="p-button--positive" href="/store">
+            Call to action
+          </a>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default LearnHowToSnap;
diff --git a/static/js/store/components/LearnHowToSnap/index.ts b/static/js/store/components/LearnHowToSnap/index.ts
@@ -0,0 +1 @@
+export { default } from "./LearnHowToSnap";
diff --git a/static/js/store/components/MustHaveSnaps/MustHaveSnaps.tsx b/static/js/store/components/MustHaveSnaps/MustHaveSnaps.tsx
@@ -0,0 +1,74 @@
+import { ReactNode } from "react";
+import { Row, Col } from "@canonical/react-components";
+
+type Snap = {
+  name: string;
+  display_name: string;
+  icon_url: string;
+};
+
+type Props = {
+  snaps: Snap[];
+  category: string;
+  subheading?: string;
+  gradientStart?: string;
+  gradientEnd?: string;
+};
+
+function MustHaveSnaps({
+  snaps,
+  category,
+  subheading,
+  gradientStart,
+  gradientEnd,
+}: Props): ReactNode {
+  const mustHaveIconStyle = {
+    backgroundColor: "#fff",
+    borderRadius: "5px",
+    display: "inline-block",
+    height: "118px",
+    marginLeft: "18px",
+    padding: "24px",
+    width: "118px",
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          background: `linear-gradient(45deg, ${gradientStart || "#251755"} 20%, ${gradientEnd || "#69e07c"})`,
+          color: "#fff",
+        }}
+      >
+        <Row style={{ padding: "74px 78px" }}>
+          <Col size={6} className="u-vertically-center">
+            <div>
+              <h2 className="p-heading--3">Must-have snaps for {category}</h2>
+              {subheading && (
+                <p className="p-heading--4 u-no-margin--bottom">
+                  Lorem ipsum dolor sit amet, consectetur
+                </p>
+              )}
+            </div>
+          </Col>
+          <Col size={6} className="u-align--right">
+            {snaps.map((snap) => (
+              <div style={mustHaveIconStyle} key={snap.name}>
+                <a href={`/${snap.name}`}>
+                  <img
+                    src={snap.icon_url}
+                    width="70"
+                    height="70"
+                    alt={snap.display_name}
+                  />
+                </a>
+              </div>
+            ))}
+          </Col>
+        </Row>
+      </div>
+    </>
+  );
+}
+
+export default MustHaveSnaps;
diff --git a/static/js/store/components/MustHaveSnaps/index.ts b/static/js/store/components/MustHaveSnaps/index.ts
@@ -0,0 +1 @@
+export { default } from "./MustHaveSnaps";
diff --git a/static/js/store/components/NewSnaps/NewSnaps.tsx b/static/js/store/components/NewSnaps/NewSnaps.tsx
@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+import { Row, Col, Strip } from "@canonical/react-components";
+import { DefaultCard } from "@canonical/store-components";
+
+import { useNewSnaps } from "../../hooks";
+
+import type { Package } from "../../types";
+
+function NewSnaps(): ReactNode {
+  const { data, isLoading } = useNewSnaps();
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "baseline",
+        }}
+      >
+        <h2>What's new</h2>
+        <p>
+          <a href="/store">See all</a>
+        </p>
+      </div>
+      {!isLoading && data && (
+        <Strip shallow className="u-no-padding--bottom">
+          <Row>
+            {data
+              .filter((d: Package, i: number) => i < 6)
+              .map((packageData: Package) => (
+                <Col
+                  size={4}
+                  key={packageData.package.name}
+                  style={{ marginBottom: "1.5rem" }}
+                >
+                  <DefaultCard data={packageData} />
+                </Col>
+              ))}
+          </Row>
+        </Strip>
+      )}
+    </>
+  );
+}
+
+export default NewSnaps;
diff --git a/static/js/store/components/NewSnaps/index.ts b/static/js/store/components/NewSnaps/index.ts
@@ -0,0 +1 @@
+export { default } from "./NewSnaps";