card component finished

CreamLib · Feb 20, 2024 · 82315ff · 82315ff
1 parent 7f87658
commit 82315ff
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 6 deletions.
diff --git a/projects/ngx-cream-lib/src/lib/card/card.component.css b/projects/ngx-cream-lib/src/lib/card/card.component.css
@@ -1,10 +1,43 @@
 .card {
     box-shadow: 0px 3px 6px #00000029;
     border-radius: 8px;
-    padding: 1rem;
     background-color: white;
+    max-width: 300px;
+}
+
+.card-content {
+    padding: 1rem;
 }
 
 h2 {
-    margin-bottom: 0.5rem;
-}
+    margin-bottom: 1rem;
+}
+
+a.link-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 1em;
+    width: fit-content;
+    text-decoration: none;
+    color: white;
+    background-color: rgb(92, 92, 173);
+    padding: 0.75rem 1.5rem;
+    border-radius: 2em;
+    margin-top: 1rem;
+  }
+
+  a.link-button:hover {
+    background-color: rgb(7, 7, 158);
+  }
+
+  .picture {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .picture img {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
diff --git a/projects/ngx-cream-lib/src/lib/card/card.component.html b/projects/ngx-cream-lib/src/lib/card/card.component.html
@@ -1,4 +1,15 @@
 <div class="card">
-    <h2>{{ title }}</h2>
-    <p><ng-content></ng-content></p>
+    <p class="picture">
+        <img [src]="'../../../../../assets/img/' + imageName" alt="">
+    </p>
+    <div class="card-content">
+    <!-- <c3m-h [titleLevel]="titleLevel">
+        {{ title }}
+      </c3m-h> -->
+      <h2>
+        {{ title }}
+      </h2>
+        <p><ng-content></ng-content></p>
+        <p><a class="link-button" [attr.href]="linkUrl">{{labelButton}}</a></p>
+    </div>
 </div>
diff --git a/projects/ngx-cream-lib/src/lib/card/card.component.ts b/projects/ngx-cream-lib/src/lib/card/card.component.ts
@@ -7,4 +7,8 @@ import { Component, Input } from '@angular/core';
 })
 export class CardComponent {
   @Input() title: string = '';
+  @Input() titleLevel = '3';
+  @Input() imageName = '';
+  @Input() linkUrl = "";
+  @Input() labelButton = "";
 }
diff --git a/src/app/pages/card-page/card-page.component.html b/src/app/pages/card-page/card-page.component.html
@@ -3,7 +3,7 @@ <h3>Card component</h3>
 
     <c3m-tabs class="block-style" label="Demo and Code">
         <c3m-tab-panel class="block-style" tabTitle="Demo" [isActive]="true">
-            <c3m-card title="Card Title">
+            <c3m-card title="Card Title" titleLevel="2" imageName="illu.jpg" linkUrl="portal/card" labelButton="Découvrir">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus quam maxime. 
               Repellat atque animi consequatur fugiat perferendis dicta cumque maiores minus rem facilis, 
               ex unde quo laborum sunt cupiditate.

diff --git a/src/assets/img/illu.jpg b/src/assets/img/illu.jpg