docs(card): Add docs for card component

Author: immohammadjaved

projects/docs/src/app/pages/docs/components/card/card.component.ts

@@ -12,17 +12,20 @@ import { UiButton, UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCar
 })
 export class CardComponent {
 
-  importCode = `import { UiButton, UiTooltip, UiTooltipTrigger } from '@angularui/core';`
-  usageCode = `
-      <button [uiTooltipTrigger]="tooltip" uiButton variant="outline">
-          Tooltip
-      </button>
-  
-      <ng-template #tooltip>
-          <div uiTooltip>
-              <p>Add to library</p>
-          </div>
-      </ng-template>`;
+  importCode = `import { UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardContent, UiCardFooter, UiButton } from '@angularui/core';`
+  usageCode = `<div uiCard>
+    <div uiCardHeader>
+        <h4 uiCardTitle>Create project</h4>
+        <p uiCardDescription>Deploy your new project in one-click.</p>
+    </div>
+    <div uiCardContent>
+        <p>Click the button below to deploy your project.</p>
+    </div>
+    <div uiCardFooter class="flex justify-between">
+        <button uiButton variant="outline">Cancel</button>
+        <button uiButton>Deploy</button>
+    </div>
+</div>`;
 
   cliCode = `ng g @angularui/core:component card`;
 

projects/docs/src/app/pages/docs/components/card/card.constants.ts

@@ -1,21 +1,25 @@
 export class CardCodeConstants {
     static readonly DEFAULT = `
     import { Component } from '@angular/core';
-    import { UiButton, UiTooltip, UiTooltipTrigger } from '@angularui/core';
+    import { UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardContent, UiCardFooter, UiButton } from '@angularui/core';
 
     @Component({
-        selector: 'tooltip-demo',
-        imports: [UiButton, UiTooltip, UiTooltipTrigger],
-        template: \` <button [uiTooltipTrigger]="tooltip" uiButton variant="outline">
-                        Tooltip
-                    </button>
-
-                    <ng-template #tooltip>
-                        <div uiTooltip>
-                            <p>Add to library</p>
+        selector: 'card-demo',
+        imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardContent, UiCardFooter, UiButton],
+        template: \`<div uiCard>
+                        <div uiCardHeader>
+                            <h4 uiCardTitle>Create project</h4>
+                            <p uiCardDescription>Deploy your new project in one-click.</p>
+                        </div>
+                        <div uiCardContent>
+                            <p>Click the button below to deploy your project.</p>
+                        </div>
+                        <div uiCardFooter class="flex justify-between">
+                            <button uiButton variant="outline">Cancel</button>
+                            <button uiButton>Deploy</button>
                         </div>
-                    </ng-template> \`
+                    </div> \`
     })
-    export class TooltipComponent {}
+    export class CardComponent {}
     `;
 }