From 470a53484b9be91d7c688b6c9e803c08973f44d5 Mon Sep 17 00:00:00 2001 From: Oier Bravo Urtasun Date: Sun, 22 Jun 2025 00:44:18 +0200 Subject: [PATCH] big card, elements list & page, navigation --- client/src/components/BigCard.astro | 46 ++++++++++++++ client/src/components/ElementsCard.astro | 46 ++++++++++++++ client/src/components/Navigation.astro | 77 ++++++++++++++++++++++++ client/src/content.config.mjs | 3 + client/src/layouts/Head.astro | 12 ++++ client/src/layouts/Layout.astro | 12 ++-- client/src/pages/elements.astro | 28 +++++++++ client/src/pages/index.astro | 25 ++------ 8 files changed, 222 insertions(+), 27 deletions(-) create mode 100644 client/src/components/BigCard.astro create mode 100644 client/src/components/ElementsCard.astro create mode 100644 client/src/components/Navigation.astro create mode 100644 client/src/layouts/Head.astro create mode 100644 client/src/pages/elements.astro diff --git a/client/src/components/BigCard.astro b/client/src/components/BigCard.astro new file mode 100644 index 00000000..730d974f --- /dev/null +++ b/client/src/components/BigCard.astro @@ -0,0 +1,46 @@ +--- +// BigCard component - configurable card with link +interface Props { + url: string; +} + +const { url } = Astro.props; +--- + +
+ +
+
+ +
+ + + +
+ + +

+ Pole Elements +

+ + +

+ Explore a comprehensive collection of pole dance elements, techniques, and combinations. + From basic spins to advanced tricks, discover everything you need to master pole sport. +

+ + +
+ Explore Elements + + + +
+
+ + +
+
+
+ +
\ No newline at end of file diff --git a/client/src/components/ElementsCard.astro b/client/src/components/ElementsCard.astro new file mode 100644 index 00000000..730d974f --- /dev/null +++ b/client/src/components/ElementsCard.astro @@ -0,0 +1,46 @@ +--- +// BigCard component - configurable card with link +interface Props { + url: string; +} + +const { url } = Astro.props; +--- + +
+ +
+
+ +
+ + + +
+ + +

+ Pole Elements +

+ + +

+ Explore a comprehensive collection of pole dance elements, techniques, and combinations. + From basic spins to advanced tricks, discover everything you need to master pole sport. +

+ + +
+ Explore Elements + + + +
+
+ + +
+
+
+ +
\ No newline at end of file diff --git a/client/src/components/Navigation.astro b/client/src/components/Navigation.astro new file mode 100644 index 00000000..675e5690 --- /dev/null +++ b/client/src/components/Navigation.astro @@ -0,0 +1,77 @@ +--- +// Navigation component for Pole Sport website +--- + + + + \ No newline at end of file diff --git a/client/src/content.config.mjs b/client/src/content.config.mjs index 3c2cfc26..4a79c911 100644 --- a/client/src/content.config.mjs +++ b/client/src/content.config.mjs @@ -22,10 +22,12 @@ const strapiPoleElementsLoader = defineCollection({ // Fetch articles from Strapi const poleElementsData = await fetch(url.href); const { data }= await poleElementsData.json(); + // Transform the API response into the desired data structure return data.map((item) => ({ id: item.id.toString(), name: item.name, + title: item.name, description: item.description, createdAt: item.createdAt, updatedAt: item.updatedAt, @@ -42,6 +44,7 @@ const strapiPoleElementsLoader = defineCollection({ schema: z.object({ id: z.string(), name: z.string(), + title: z.string(), description: z.string(), createdAt: z.string(), updatedAt: z.string(), diff --git a/client/src/layouts/Head.astro b/client/src/layouts/Head.astro new file mode 100644 index 00000000..91f4736b --- /dev/null +++ b/client/src/layouts/Head.astro @@ -0,0 +1,12 @@ +--- +const { title, description } = Astro.props; +--- + + + + + + + + {title} + \ No newline at end of file diff --git a/client/src/layouts/Layout.astro b/client/src/layouts/Layout.astro index 21a6ade2..4f8f5276 100644 --- a/client/src/layouts/Layout.astro +++ b/client/src/layouts/Layout.astro @@ -1,16 +1,14 @@ --- import "../styles/global.css"; +import Head from "./Head.astro"; +import Navigation from "../components/Navigation.astro"; +const { title = "Just a title", description = "Adescription" } = Astro.props; --- - - - - - - Astro Basics - + + diff --git a/client/src/pages/elements.astro b/client/src/pages/elements.astro new file mode 100644 index 00000000..5b86c230 --- /dev/null +++ b/client/src/pages/elements.astro @@ -0,0 +1,28 @@ +--- +// Import necessary components and utilities +import Layout from "../layouts/Layout.astro"; +import { getCollection } from "astro:content"; +import PoleElementsList from "../components/PoleElementsList.astro"; +import { getStrapiBaseUrl } from "../config/strapi"; + +// Fetch all posts from Strapi using Astro's content collection +const strapiPoleElements = await getCollection("strapiPoleElementsLoader"); +// Get Strapi URL from global config +const BASE_URL = getStrapiBaseUrl(); +--- + + +
+ +

+ Pole Elements +

+ + +
+ diff --git a/client/src/pages/index.astro b/client/src/pages/index.astro index 55d40d73..28dfdfed 100644 --- a/client/src/pages/index.astro +++ b/client/src/pages/index.astro @@ -1,28 +1,13 @@ --- // Import necessary components and utilities import Layout from "../layouts/Layout.astro"; -import { getCollection } from "astro:content"; -import PoleElementsList from "../components/PoleElementsList.astro"; -import { getStrapiBaseUrl } from "../config/strapi"; - -// Fetch all posts from Strapi using Astro's content collection -const strapiPoleElements = await getCollection("strapiPoleElementsLoader"); -// Get Strapi URL from global config -const BASE_URL = getStrapiBaseUrl(); +import ElementsCard from "../components/ElementsCard.astro"; --- - +
- -

- Hello Strapi 5 and Astro 5 World -

- - +
+ +