Merge pull request #9 from ManukMinasyan/dev

Dev

Author: ManukMinasyan

docs/.vitepress/components/HomePageDemo.vue

@@ -26,28 +26,34 @@ import Skeleton from '../../layout/demo/Skeleton/Basic.vue';
 
 <template>
   <div
-      class="max-w-6xl mx-auto mt-36 flex space-x-10"
+      class=" w-full lg:max-w-6xl mx-auto mt-36 flex flex-col lg:flex-row lg:space-x-10"
       >
-    <div class="w-10/12 flex flex-wrap space-y-10">
+    <div class="px-5 lg:px-0 w-full lg:w-10/12 flex flex-wrap space-y-10">
       <div class="w-full"><BasicRange /></div>
-      <div class="space-x-10 flex justify-between w-full">
+      <div class="space-x-10 flex lg:justify-between w-full">
+        <div class=" flex flex-col lg:flex-row gap-4 lg:gap-10 ">
         <div><Dropdown /></div>
         <div><AvatarGroup /></div>
+        </div>
+        <div class=" flex flex-col lg:flex-row gap-4 lg:gap-10 ">
+
         <div><Button /></div>
-        <Chip />
         <div><Badge /></div>
         <div><Toggle /></div>
-        <div><Pagination /></div>
+        </div>
+        <div class="hidden sm:block"><Pagination /></div>
       </div>
-      <div class="flex space-x-10">
-        <div class="w-1/2 space-y-10">
+      <div class="block sm:hidden"><Pagination /></div>
+
+      <div class="flex w-full flex-col lg:flex-row lg:space-x-10">
+        <div class=" w-full lg:w-1/2 space-y-10">
           <Alert />
           <BasicAccordion />
         </div>
-        <div class="w-1/2 border rounded-lg shadow"><CommandPalette /></div>
+        <div class=" w-full lg:w-1/2 border rounded-lg shadow"><CommandPalette /></div>
       </div>
     </div>
-    <div class="w-2/12 space-y-10">
+    <div class="px-5 mt-4 lg:mt-0 lg:px-0 flex flex-col gap-3 space-x-0 w-full lg:w-2/12 lg:space-y-10">
       <Radio />
       <Checkbox />
       <Input />
@@ -56,14 +62,14 @@ import Skeleton from '../../layout/demo/Skeleton/Basic.vue';
     </div>
   </div>
   <div
-      class="max-w-6xl mx-auto mt-10 flex justify-between space-x-10"
+      class="max-w-6xl px-5 lg:px-0  mx-auto mt-10 flex flex-col gap-3 lg:gap-0 lg:flex-row justify-between lg:space-x-10"
   >
     <div class="space-y-10">
       <Tabs  class="relative space-y-2 w-full" />
       <Skeleton class="border shadow-sm p-5 rounded-lg"  />
     </div>
     <div>
-      <Table class="border shadow-sm p-5 rounded-lg" />
+      <Table class="border overflow-y-scroll  shadow-sm p-5 rounded-lg" />
     </div>
   </div>
 </template>