feat: call to action paragraph-a sortzen du

back/src/api/orri-basikoa/content-types/orri-basikoa/schema.json

@@ -27,8 +27,8 @@
       "type": "dynamiczone",
       "components": [
         "paragraph.testua",
-        "paragraph.youtube",
-        "paragraph.irudia"
+        "paragraph.irudia",
+        "paragraph.call-to-action"
       ]
     }
   }

back/src/components/paragraph/call-to-action.json

@@ -0,0 +1,19 @@
+{
+  "collectionName": "components_paragraph_call_to_actions",
+  "info": {
+    "displayName": "call to action",
+    "icon": "rocket"
+  },
+  "options": {},
+  "attributes": {
+    "url": {
+      "type": "string",
+      "required": true
+    },
+    "label": {
+      "type": "string",
+      "required": true
+    }
+  },
+  "config": {}
+}

back/types/generated/components.d.ts

@@ -89,6 +89,18 @@ export interface HasieraUrl extends Struct.ComponentSchema {
   };
 }
 
+export interface ParagraphCallToAction extends Struct.ComponentSchema {
+  collectionName: 'components_paragraph_call_to_actions';
+  info: {
+    displayName: 'call to action';
+    icon: 'rocket';
+  };
+  attributes: {
+    label: Schema.Attribute.String & Schema.Attribute.Required;
+    url: Schema.Attribute.String & Schema.Attribute.Required;
+  };
+}
+
 export interface ParagraphIrudia extends Struct.ComponentSchema {
   collectionName: 'components_paragraph_irudias';
   info: {
@@ -135,6 +147,7 @@ declare module '@strapi/strapi' {
       'hasiera.parte-hartu': HasieraParteHartu;
       'hasiera.parte-hartzea': HasieraParteHartzea;
       'hasiera.url': HasieraUrl;
+      'paragraph.call-to-action': ParagraphCallToAction;
       'paragraph.irudia': ParagraphIrudia;
       'paragraph.testua': ParagraphTestua;
       'paragraph.youtube': ParagraphYoutube;

back/types/generated/contentTypes.d.ts

@@ -495,7 +495,7 @@ export interface ApiOrriBasikoaOrriBasikoa extends Struct.CollectionTypeSchema {
       Schema.Attribute.Private;
     deskribapena: Schema.Attribute.Text;
     edukiLibrea: Schema.Attribute.DynamicZone<
-      ['paragraph.testua', 'paragraph.youtube', 'paragraph.irudia']
+      ['paragraph.testua', 'paragraph.irudia', 'paragraph.call-to-action']
     >;
     izenburua: Schema.Attribute.String & Schema.Attribute.Required;
     locale: Schema.Attribute.String & Schema.Attribute.Private;

front/src/content.config.ts

@@ -118,6 +118,12 @@ const orriBasikoak = defineCollection({
                     formats
                   }
                 }
+                ... on ComponentParagraphCallToAction {
+                  type: __typename
+                  id
+                  url
+                  label
+                }
               }
             }
           }

front/src/models/OrriBasikoa.ts

@@ -13,7 +13,17 @@ interface ParagraphTestua {
   testua: Markdown;
 }
 
-export type Paragraph = ParagraphTestua | ParagraphIrudia;
+interface ParagraphCallToAction {
+  type: "ComponentParagraphCallToAction";
+  id: string;
+  url: string;
+  label: string;
+}
+
+export type Paragraph =
+  | ParagraphTestua
+  | ParagraphIrudia
+  | ParagraphCallToAction;
 
 export interface OrriBasikoa {
   id: string;

front/src/views/orriBasikoa/_components/EdukiLibrea.astro

@@ -2,6 +2,7 @@
 import type { Paragraph } from "models/OrriBasikoa";
 import ParagraphIrudia from "./ParagraphIrudia.astro";
 import ParagraphTestua from "./ParagraphTestua.astro";
+import ParagraphCallToAction from "./ParagraphCallToAction.astro";
 
 interface Props {
   paragraph: Paragraph;
@@ -17,6 +18,12 @@ const { paragraph } = Astro.props;
     )
   }
 
+  {
+    paragraph.type === "ComponentParagraphCallToAction" && (
+      <ParagraphCallToAction url={paragraph.url} label={paragraph.label} />
+    )
+  }
+
   {
     paragraph.type === "ComponentParagraphTestua" && (
       <ParagraphTestua testua={paragraph.testua} />

front/src/views/orriBasikoa/_components/ParagraphCallToAction.astro

@@ -0,0 +1,47 @@
+---
+interface Props {
+  url: string;
+  label: string;
+}
+
+const { url, label } = Astro.props;
+---
+
+<div>
+  <a href={url}>{label}</a>
+</div>
+
+<style lang="scss">
+  @use "../../../style/tools/mediaQueries.scss";
+  @use "../../../style/tools/toDVW.scss";
+  @use "../../../style/mixins/displayFonts.scss";
+
+  div {
+    text-align: center;
+  }
+
+  a {
+    display: inline-block;
+    padding: var(--space-04-mobile) var(--space-06-mobile);
+
+    border-radius: var(--space-06-mobile);
+    background-color: var(--gorria);
+    text-decoration: none;
+    color: var(--zuria);
+
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+
+    &:hover {
+      color: var(--gorria);
+      background-color: var(--zuria);
+    }
+
+    @include displayFonts.display6;
+    @include mediaQueries.aboveTablet {
+      border-radius: var(--space-06-desktop);
+      padding: var(--space-04-desktop) var(--space-06-desktop);
+    }
+  }
+</style>