docs(separator): Add docs for separator

Author: immohammadjaved

projects/docs/src/app/pages/docs/components/separator/separator.component.html

@@ -18,7 +18,6 @@ <h1 class="text-2xl font-semibold">Separator</h1>
                 <p>It supports both horizontal and vertical orientations.</p>
             </div>
         </div>
-
     </docs-example>
 </div>
 
@@ -35,6 +34,13 @@ <h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="exa
 <div class="mt-5">
     <h3 class="text-lg font-semibold mb-3" id="default">Default</h3>
     <docs-example [code]="SEPARATOR_CODES.DEFAULT">
-
+        <div uiCard>
+            <div uiCardContent class="flex flex-col gap-2">
+                <p>The separator primitive can be used to separate content in a
+                    layout.</p>
+                <div uiSeparator class="my-2"></div>
+                <p>It supports both horizontal and vertical orientations.</p>
+            </div>
+        </div>
     </docs-example>
 </div>

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

@@ -12,17 +12,16 @@ import { SeparatorCodeConstants } from './separator.constants';
 })
 export class SeparatorComponent {
 
-  importCode = `import { UiButton, UiTooltip, UiTooltipTrigger } from '@angularui/core';`
+  importCode = `import { UiSeparator, UiCard, UiCardContent } 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>`;
+          <div uiCard>
+            <div uiCardContent class="flex flex-col gap-2">
+                <p>The separator primitive can be used to separate content in a
+                    layout.</p>
+                <div uiSeparator class="my-2"></div>
+                <p>It supports both horizontal and vertical orientations.</p>
+            </div>
+          </div>`;
 
   cliCode = `ng g @angularui/core:component separator`;
 

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

@@ -1,21 +1,20 @@
 export class SeparatorCodeConstants {
     static readonly DEFAULT = `
     import { Component } from '@angular/core';
-    import { UiButton, UiTooltip, UiTooltipTrigger } from '@angularui/core';
+    import { UiSeparator, UiCard, UiCardContent } 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: 'separator-demo',
+        imports: [UiSeparator, UiCard, UiCardContent],
+        template: \` <div uiCard>
+                        <div uiCardContent class="flex flex-col gap-2">
+                            <p>The separator primitive can be used to separate content in a
+                                layout.</p>
+                            <div uiSeparator class="my-2"></div>
+                            <p>It supports both horizontal and vertical orientations.</p>
                         </div>
-                    </ng-template> \`
+                    </div> \`
     })
-    export class TooltipComponent {}
+    export class SeparatorComponent {}
     `;
 }