tabs.b9e51974.js 183 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726
  1. import{_ as C,o as u,c as T,a as e,d as L,u as U,f as t,j as i,g as n,w as a,W as b,l as p,L as l,U as w,V as _}from"./index.c685e846.js";import{c as D,_ as h,I as f}from"./icon-code.6d7a3662.js";import{I as G}from"./icon-bell.2e21c889.js";import{I as k}from"./icon-phone.fddd7b2c.js";import{o as v,s as x,d as o,f as g,c as r}from"./tabs.55ddd10d.js";import"./micro-task.27a59902.js";const M={},N={width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},W=e("path",{opacity:"0.5",d:"M2 12.2039C2 9.91549 2 8.77128 2.5192 7.82274C3.0384 6.87421 3.98695 6.28551 5.88403 5.10813L7.88403 3.86687C9.88939 2.62229 10.8921 2 12 2C13.1079 2 14.1106 2.62229 16.116 3.86687L18.116 5.10812C20.0131 6.28551 20.9616 6.87421 21.4808 7.82274C22 8.77128 22 9.91549 22 12.2039V13.725C22 17.6258 22 19.5763 20.8284 20.7881C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.7881C2 19.5763 2 17.6258 2 13.725V12.2039Z",stroke:"currentColor","stroke-width":"1.5"},null,-1),$=e("path",{d:"M12 15L12 18",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),E=[W,$];function F(y,c){return u(),T("svg",N,E)}const q=C(M,[["render",F]]),H={key:0,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},V=e("circle",{opacity:"0.5",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"1.5"},null,-1),S=e("path",{d:"M12 7V13",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),I=e("circle",{cx:"12",cy:"16",r:"1",fill:"currentColor"},null,-1),B=[V,S,I],J={key:1,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},R=e("path",{opacity:"0.5",d:"M20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10Z",fill:"currentColor"},null,-1),Z=e("path",{d:"M10 4.25C10.4142 4.25 10.75 4.58579 10.75 5V11C10.75 11.4142 10.4142 11.75 10 11.75C9.58579 11.75 9.25 11.4142 9.25 11V5C9.25 4.58579 9.58579 4.25 10 4.25Z",fill:"currentColor"},null,-1),A=e("path",{d:"M10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44772 13 9 13.4477 9 14C9 14.5523 9.44772 15 10 15Z",fill:"currentColor"},null,-1),z=[R,Z,A],P=L({__name:"icon-info-circle",props:{fill:{type:Boolean,default:!1}},setup(y){return(c,m)=>y.fill?(u(),T("svg",J,z)):(u(),T("svg",H,B))}}),K={},O={width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Q=e("circle",{cx:"12",cy:"12",r:"3",stroke:"currentColor","stroke-width":"1.5"},null,-1),X=e("path",{opacity:"0.5",d:"M13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74457 2.35523 9.35522 2.74458 9.15223 3.23463C9.05957 3.45834 9.0233 3.7185 9.00911 4.09799C8.98826 4.65568 8.70226 5.17189 8.21894 5.45093C7.73564 5.72996 7.14559 5.71954 6.65219 5.45876C6.31645 5.2813 6.07301 5.18262 5.83294 5.15102C5.30704 5.08178 4.77518 5.22429 4.35436 5.5472C4.03874 5.78938 3.80577 6.1929 3.33983 6.99993C2.87389 7.80697 2.64092 8.21048 2.58899 8.60491C2.51976 9.1308 2.66227 9.66266 2.98518 10.0835C3.13256 10.2756 3.3397 10.437 3.66119 10.639C4.1338 10.936 4.43789 11.4419 4.43786 12C4.43783 12.5581 4.13375 13.0639 3.66118 13.3608C3.33965 13.5629 3.13248 13.7244 2.98508 13.9165C2.66217 14.3373 2.51966 14.8691 2.5889 15.395C2.64082 15.7894 2.87379 16.193 3.33973 17C3.80568 17.807 4.03865 18.2106 4.35426 18.4527C4.77508 18.7756 5.30694 18.9181 5.83284 18.8489C6.07289 18.8173 6.31632 18.7186 6.65204 18.5412C7.14547 18.2804 7.73556 18.27 8.2189 18.549C8.70224 18.8281 8.98826 19.3443 9.00911 19.9021C9.02331 20.2815 9.05957 20.5417 9.15223 20.7654C9.35522 21.2554 9.74457 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8477 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.902C15.0117 19.3443 15.2977 18.8281 15.781 18.549C16.2643 18.2699 16.8544 18.2804 17.3479 18.5412C17.6836 18.7186 17.927 18.8172 18.167 18.8488C18.6929 18.9181 19.2248 18.7756 19.6456 18.4527C19.9612 18.2105 20.1942 17.807 20.6601 16.9999C21.1261 16.1929 21.3591 15.7894 21.411 15.395C21.4802 14.8691 21.3377 14.3372 21.0148 13.9164C20.8674 13.7243 20.6602 13.5628 20.3387 13.3608C19.8662 13.0639 19.5621 12.558 19.5621 11.9999C19.5621 11.4418 19.8662 10.9361 20.3387 10.6392C20.6603 10.4371 20.8675 10.2757 21.0149 10.0835C21.3378 9.66273 21.4803 9.13087 21.4111 8.60497C21.3592 8.21055 21.1262 7.80703 20.6602 7C20.1943 6.19297 19.9613 5.78945 19.6457 5.54727C19.2249 5.22436 18.693 5.08185 18.1671 5.15109C17.9271 5.18269 17.6837 5.28136 17.3479 5.4588C16.8545 5.71959 16.2644 5.73002 15.7811 5.45096C15.2977 5.17191 15.0117 4.65566 14.9909 4.09794C14.9767 3.71848 14.9404 3.45833 14.8477 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224Z",stroke:"currentColor","stroke-width":"1.5"},null,-1),Y=[Q,X];function ee(y,c){return u(),T("svg",O,Y)}const j=C(K,[["render",ee]]),te=e("ul",{class:"flex space-x-2 rtl:space-x-reverse"},[e("li",null,[e("a",{href:"javascript:;",class:"text-primary hover:underline"},"Components")]),e("li",{class:"before:content-['/'] ltr:before:mr-2 rtl:before:ml-2"},[e("span",null,"Tabs")])],-1),ie={class:"pt-5 space-y-8"},ae={class:"panel p-3 flex items-center text-primary overflow-x-auto whitespace-nowrap"},se={class:"ring-2 ring-primary/30 rounded-full bg-primary text-white p-1.5 ltr:mr-3 rtl:ml-3"},oe=e("span",{class:"ltr:mr-3 rtl:ml-3"},"Documentation: ",-1),re=e("a",{href:"https://headlessui.com/vue/tabs",target:"_blank",class:"block hover:underline"},"https://headlessui.com/vue/tabs",-1),le={class:"grid grid-cols-1 lg:grid-cols-2 gap-6"},ne={class:"panel"},de={class:"flex items-center justify-between mb-5"},ue=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Simple Tabs",-1),ce={class:"flex items-center"},me=e("a",{href:"javascript:;",class:"p-3.5 py-2 -mb-[1px] block pointer-events-none text-white-light dark:text-dark"},"Disabled",-1),be=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),pe=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),he=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),fe=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),ve=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),xe=e("pre",null,`<!-- simple tabs -->
  2. <TabGroup as="div" class="mb-5">
  3. <TabList class="flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]">
  4. <Tab as="template" v-slot="{ selected }">
  5. <a
  6. href="javascript:;"
  7. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none transition duration-300"
  8. :class="{ '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black': selected }"
  9. >Home</a
  10. >
  11. </Tab>
  12. <Tab as="template" v-slot="{ selected }">
  13. <a
  14. href="javascript:;"
  15. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none transition duration-300"
  16. :class="{ '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black': selected }"
  17. >Profile</a
  18. >
  19. </Tab>
  20. <Tab as="template" v-slot="{ selected }">
  21. <a
  22. href="javascript:;"
  23. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none transition duration-300"
  24. :class="{ '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black': selected }"
  25. >Contact</a
  26. >
  27. </Tab>
  28. <Tab as="template" disabled>
  29. <a href="javascript:;" class="p-3.5 py-2 -mb-[1px] block pointer-events-none text-white-light dark:text-dark">Disabled</a>
  30. </Tab>
  31. </TabList>
  32. <TabPanels class="pt-5 flex-1 text-sm">
  33. <TabPanel>
  34. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  35. <p class="mb-4">
  36. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  37. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  38. </p>
  39. <p>
  40. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  41. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  42. </p>
  43. </TabPanel>
  44. <TabPanel>
  45. <div class="flex items-start">
  46. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  47. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  48. </div>
  49. <div class="flex-auto">
  50. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  51. <p class="text-white-dark">
  52. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
  53. nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  54. </p>
  55. </div>
  56. </div>
  57. </TabPanel>
  58. <TabPanel>
  59. <p>
  60. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  61. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
  62. occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  63. </p>
  64. </TabPanel>
  65. <TabPanel>Disabled</TabPanel>
  66. </TabPanels>
  67. </TabGroup>
  68. <!-- script -->
  69. <script lang="ts" setup>
  70. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  71. <\/script>
  72. `,-1),ge={class:"panel"},_e={class:"flex items-center justify-between mb-5"},we=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Simple Pills",-1),ke={class:"flex items-center"},qe=e("a",{href:"javascript:;",class:"p-3.5 py-2 -mb-[1px] block rounded pointer-events-none text-white-light dark:text-dark"},"Disabled",-1),Te=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),ye=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),je=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Pe=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Ce=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Le=e("pre",null,`<!-- simple pills -->
  73. <TabGroup as="div" class="mb-5">
  74. <TabList class="flex flex-wrap mt-3">
  75. <Tab as="template" v-slot="{ selected }">
  76. <a
  77. href="javascript:;"
  78. class="p-3.5 py-2 -mb-[1px] ltr:mr-2 rtl:ml-2 block rounded hover:bg-primary hover:text-white !outline-none transition duration-300"
  79. :class="{ 'bg-primary text-white': selected === 'home' }"
  80. >Home</a
  81. >
  82. </Tab>
  83. <Tab as="template" v-slot="{ selected }">
  84. <a
  85. href="javascript:;"
  86. class="p-3.5 py-2 -mb-[1px] ltr:mr-2 rtl:ml-2 block rounded hover:bg-primary hover:text-white !outline-none transition duration-300"
  87. :class="{ 'bg-primary text-white': selected === 'profile' }"
  88. >Profile</a
  89. >
  90. </Tab>
  91. <Tab as="template" v-slot="{ selected }">
  92. <a
  93. href="javascript:;"
  94. class="p-3.5 py-2 -mb-[1px] ltr:mr-2 rtl:ml-2 block rounded hover:bg-primary hover:text-white !outline-none transition duration-300"
  95. :class="{ 'bg-primary text-white': selected === 'contact' }"
  96. >Contact</a
  97. >
  98. </Tab>
  99. <Tab as="template" disabled>
  100. <a href="javascript:;" class="p-3.5 py-2 -mb-[1px] block rounded pointer-events-none text-white-light dark:text-dark">Disabled</a>
  101. </Tab>
  102. </TabList>
  103. <TabPanels class="pt-5 flex-1 text-sm">
  104. <TabPanel>
  105. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  106. <p class="mb-4">
  107. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  108. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  109. </p>
  110. <p>
  111. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  112. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  113. </p>
  114. </TabPanel>
  115. <TabPanel>
  116. <div class="flex items-start">
  117. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  118. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  119. </div>
  120. <div class="flex-auto">
  121. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  122. <p class="text-white-dark">
  123. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
  124. nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  125. </p>
  126. </div>
  127. </div>
  128. </TabPanel>
  129. <TabPanel>
  130. <p>
  131. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  132. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
  133. occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  134. </p>
  135. </TabPanel>
  136. <TabPanel>Disabled</TabPanel>
  137. </TabPanels>
  138. </TabGroup>
  139. <!-- script -->
  140. <script lang="ts" setup>
  141. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  142. <\/script>
  143. `,-1),Ue={class:"panel"},De={class:"flex items-center justify-between mb-5"},Ge=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Icon Tabs",-1),Me={class:"flex items-center"},Ne={href:"javascript:;",class:"p-3.5 py-2 -mb-[1px] flex items-center pointer-events-none text-white-light dark:text-dark"},We=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),$e=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Ee=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Fe=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),He=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Ve=e("pre",null,`<!-- icon tabs -->
  144. <TabGroup as="div" class="mb-5">
  145. <TabList class="flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]">
  146. <Tab as="template" v-slot="{ selected }">
  147. <a
  148. href="javascript:;"
  149. class="p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300"
  150. :class="{ '!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black': selected }"
  151. >
  152. <svg> ... </svg>
  153. Home
  154. </a>
  155. </Tab>
  156. <Tab as="template" v-slot="{ selected }">
  157. <a
  158. href="javascript:;"
  159. class="p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300"
  160. :class="{ '!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black': selected }"
  161. >
  162. <svg> ... </svg>
  163. Profile
  164. </a>
  165. </Tab>
  166. <Tab as="template" v-slot="{ selected }">
  167. <a
  168. href="javascript:;"
  169. class="p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300"
  170. :class="{ '!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black': selected }"
  171. >
  172. <svg> ... </svg>
  173. Contact
  174. </a>
  175. </Tab>
  176. <Tab as="template" disabled>
  177. <a href="javascript:;" class="p-3.5 py-2 -mb-[1px] flex items-center pointer-events-none text-white-light dark:text-dark">
  178. <svg> ... </svg>
  179. Disabled
  180. </a>
  181. </Tab>
  182. </TabList>
  183. <TabPanels class="pt-5 flex-1 text-sm">
  184. <TabPanel>
  185. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  186. <p class="mb-4">
  187. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  188. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  189. </p>
  190. <p>
  191. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  192. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  193. </p>
  194. </TabPanel>
  195. <TabPanel>
  196. <div class="flex items-start">
  197. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  198. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  199. </div>
  200. <div class="flex-auto">
  201. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  202. <p class="text-white-dark">
  203. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  204. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  205. </p>
  206. </div>
  207. </div>
  208. </TabPanel>
  209. <TabPanel>
  210. <p>
  211. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  212. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  213. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  214. </p>
  215. </TabPanel>
  216. <TabPanel>Disabled</TabPanel>
  217. </TabPanels>
  218. </TabGroup>
  219. <!-- script -->
  220. <script lang="ts" setup>
  221. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  222. <\/script>
  223. `,-1),Se={class:"panel"},Ie={class:"flex items-center justify-between mb-5"},Be=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Icon Pills",-1),Je={class:"flex items-center"},Re={href:"javascript:;",class:"p-3.5 py-2 -mb-[1px] flex items-center rounded pointer-events-none text-white-light dark:text-dark"},Ze=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),Ae=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ze=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Ke=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Oe=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Qe=e("pre",null,`<!-- icon pills -->
  224. <TabGroup as="div" class="mb-5">
  225. <TabList class="flex flex-wrap mt-3 gap-2">
  226. <Tab as="template" v-slot="{ selected }">
  227. <a
  228. href="javascript:;"
  229. class="p-3.5 py-2 -mb-[1px] flex items-center rounded hover:bg-warning hover:text-white !outline-none transition duration-300"
  230. :class="{ 'bg-warning text-white': selected }"
  231. >
  232. <svg> ... </svg>
  233. Home
  234. </a>
  235. </Tab>
  236. <Tab as="template" v-slot="{ selected }">
  237. <a
  238. href="javascript:;"
  239. class="p-3.5 py-2 -mb-[1px] flex items-center rounded hover:bg-warning hover:text-white !outline-none transition duration-300"
  240. :class="{ 'bg-warning text-white': selected }"
  241. >
  242. <svg> ... </svg>
  243. Profile
  244. </a>
  245. </Tab>
  246. <Tab as="template" v-slot="{ selected }">
  247. <a
  248. href="javascript:;"
  249. class="p-3.5 py-2 -mb-[1px] flex items-center rounded hover:bg-warning hover:text-white !outline-none transition duration-300"
  250. :class="{ 'bg-warning text-white': selected }"
  251. >
  252. <svg> ... </svg>
  253. Contact
  254. </a>
  255. </Tab>
  256. <Tab as="template" disabled>
  257. <a href="javascript:;" class="p-3.5 py-2 -mb-[1px] flex items-center rounded pointer-events-none text-white-light dark:text-dark">
  258. <svg> ... </svg>
  259. Disabled
  260. </a>
  261. </Tab>
  262. </TabList>
  263. <TabPanels class="pt-5 flex-1 text-sm">
  264. <TabPanel>
  265. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  266. <p class="mb-4">
  267. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  268. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  269. </p>
  270. <p>
  271. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  272. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  273. </p>
  274. </TabPanel>
  275. <TabPanel>
  276. <div class="flex items-start">
  277. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  278. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  279. </div>
  280. <div class="flex-auto">
  281. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  282. <p class="text-white-dark">
  283. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  284. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  285. </p>
  286. </div>
  287. </div>
  288. </TabPanel>
  289. <TabPanel>
  290. <p>
  291. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  292. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  293. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  294. </p>
  295. </TabPanel>
  296. <TabPanel>Disabled</TabPanel>
  297. </TabPanels>
  298. </TabGroup>
  299. <!-- script -->
  300. <script lang="ts" setup>
  301. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  302. <\/script>
  303. `,-1),Xe={class:"panel"},Ye={class:"flex items-center justify-between mb-5"},et=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Vertical Bordered",-1),tt={class:"flex items-center"},it={class:"mx-10 mb-5 sm:mb-0"},at=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),st=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ot=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),rt=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),lt=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),nt=e("blockquote",{class:"text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"},[e("div",{class:"flex items-start"},[e("p",{class:"not-italic text-[#515365] text-sm dark:text-white-dark m-0"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. ")])],-1),dt=e("pre",null,`<!-- vertical border -->
  304. <TabGroup as="div" class="mb-5 flex flex-col sm:flex-row">
  305. <div class="mx-10 mb-5 sm:mb-0">
  306. <TabList class="w-24 m-auto text-center">
  307. <Tab as="template" v-slot="{ selected }">
  308. <a
  309. href="javascript:;"
  310. class="p-3.5 py-2 -mb-[1px] block border border-white-light dark:border-[#191e3a] hover:bg-success hover:text-white !outline-none transition duration-300"
  311. :class="{ 'bg-success text-white': selected }"
  312. >Home</a
  313. >
  314. </Tab>
  315. <Tab as="template" v-slot="{ selected }">
  316. <a
  317. href="javascript:;"
  318. class="p-3.5 py-2 -mb-[1px] block border border-white-light dark:border-[#191e3a] hover:bg-success hover:text-white !outline-none transition duration-300"
  319. :class="{ 'bg-success text-white': selected }"
  320. >Profile</a
  321. >
  322. </Tab>
  323. <Tab as="template" v-slot="{ selected }">
  324. <a
  325. href="javascript:;"
  326. class="p-3.5 py-2 -mb-[1px] block border border-white-light dark:border-[#191e3a] hover:bg-success hover:text-white !outline-none transition duration-300"
  327. :class="{ 'bg-success text-white': selected }"
  328. >Messages</a
  329. >
  330. </Tab>
  331. <Tab as="template" v-slot="{ selected }">
  332. <a
  333. href="javascript:;"
  334. class="p-3.5 py-2 -mb-[1px] block border border-white-light dark:border-[#191e3a] hover:bg-success hover:text-white !outline-none transition duration-300"
  335. :class="{ 'bg-success text-white': selected }"
  336. >Settings</a
  337. >
  338. </Tab>
  339. </TabList>
  340. </div>
  341. <TabPanels class="flex-1 text-sm">
  342. <TabPanel>
  343. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  344. <p class="mb-4">
  345. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  346. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  347. </p>
  348. <p>
  349. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  350. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  351. </p>
  352. </TabPanel>
  353. <TabPanel>
  354. <div class="flex items-start">
  355. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  356. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  357. </div>
  358. <div class="flex-auto">
  359. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  360. <p class="text-white-dark">
  361. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  362. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  363. </p>
  364. </div>
  365. </div>
  366. </TabPanel>
  367. <TabPanel>
  368. <p>
  369. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  370. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  371. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  372. </p>
  373. </TabPanel>
  374. <TabPanel>
  375. <blockquote
  376. class="text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"
  377. >
  378. <div class="flex items-start">
  379. <p class="not-italic text-[#515365] text-sm dark:text-white-dark m-0">
  380. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  381. nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  382. </p>
  383. </div>
  384. </blockquote>
  385. </TabPanel>
  386. </TabPanels>
  387. </TabGroup>
  388. <!-- script -->
  389. <script lang="ts" setup>
  390. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  391. <\/script>
  392. `,-1),ut={class:"panel"},ct={class:"flex items-center justify-between mb-5"},mt=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Border Tabs",-1),bt={class:"flex items-center"},pt=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),ht=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ft=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),vt=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),xt=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),gt=e("pre",null,`<!-- border tabs -->
  393. <TabGroup as="div" class="mb-5">
  394. <TabList class="flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]">
  395. <Tab as="template" v-slot="{ selected }">
  396. <a
  397. href="javascript:;"
  398. class="p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300"
  399. :class="{ '!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black': selected }"
  400. >
  401. <svg> ... </svg>
  402. Home
  403. </a>
  404. </Tab>
  405. <Tab as="template" v-slot="{ selected }">
  406. <a
  407. href="javascript:;"
  408. class="p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300"
  409. :class="{ '!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black': selected }"
  410. >
  411. <svg> ... </svg>
  412. Profile
  413. </a>
  414. </Tab>
  415. <Tab as="template" v-slot="{ selected }">
  416. <a
  417. href="javascript:;"
  418. class="p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300"
  419. :class="{ '!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black': selected }"
  420. >
  421. <svg> ... </svg>
  422. Contact
  423. </a>
  424. </Tab>
  425. </TabList>
  426. <TabPanels class="p-4 flex-1 text-sm border border-white-light border-t-0 dark:border-[#191e3a]">
  427. <TabPanel class="active">
  428. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  429. <p class="mb-4">
  430. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  431. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  432. </p>
  433. <p>
  434. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  435. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  436. </p>
  437. </TabPanel>
  438. <TabPanel>
  439. <div class="flex items-start">
  440. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  441. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  442. </div>
  443. <div class="flex-auto">
  444. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  445. <p class="text-white-dark">
  446. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  447. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  448. </p>
  449. </div>
  450. </div>
  451. </TabPanel>
  452. <TabPanel>
  453. <p>
  454. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  455. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  456. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  457. </p>
  458. </TabPanel>
  459. </TabPanels>
  460. </TabGroup>
  461. <!-- script -->
  462. <script lang="ts" setup>
  463. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  464. <\/script>
  465. `,-1),_t={class:"panel"},wt={class:"flex items-center justify-between mb-5"},kt=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Border Top",-1),qt={class:"flex items-center"},Tt=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),yt=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),jt=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Pt=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Ct=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Lt=e("blockquote",{class:"text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"},[e("div",{class:"flex items-start"},[e("p",{class:"not-italic text-[#515365] text-sm dark:text-white-dark m-0"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. ")])],-1),Ut=e("pre",null,`<!-- border top -->
  466. <TabGroup as="div" class="mb-5">
  467. <TabList class="flex flex-wrap mt-3 mb-5">
  468. <Tab as="template" v-slot="{ selected }">
  469. <a
  470. href="javascript:;"
  471. class="p-7 py-3 flex items-center bg-[#f6f7f8] dark:bg-transparent border-transparent border-t-2 dark:hover:bg-[#191e3a] hover:border-secondary hover:text-secondary !outline-none transition duration-300"
  472. :class="{ '!border-secondary text-secondary dark:bg-[#191e3a]': selected }"
  473. >
  474. <svg> ... </svg>
  475. Home
  476. </a>
  477. </Tab>
  478. <Tab as="template" v-slot="{ selected }">
  479. <a
  480. href="javascript:;"
  481. class="p-7 py-3 flex items-center bg-[#f6f7f8] dark:bg-transparent dark:hover:bg-[#191e3a] border-transparent border-t-2 hover:border-secondary hover:text-secondary !outline-none transition duration-300"
  482. :class="{ '!border-secondary text-secondary dark:bg-[#191e3a]': selected }"
  483. >
  484. <svg> ... </svg>
  485. Profile
  486. </a>
  487. </Tab>
  488. <Tab as="template" v-slot="{ selected }">
  489. <a
  490. href="javascript:;"
  491. class="p-7 py-3 flex items-center bg-[#f6f7f8] dark:bg-transparent dark:hover:bg-[#191e3a] border-transparent border-t-2 hover:border-secondary hover:text-secondary !outline-none transition duration-300"
  492. :class="{ '!border-secondary text-secondary dark:bg-[#191e3a]': selected }"
  493. >
  494. <svg> ... </svg>
  495. Contact
  496. </a>
  497. </Tab>
  498. <Tab as="template" v-slot="{ selected }">
  499. <a
  500. href="javascript:;"
  501. class="p-7 py-3 flex items-center bg-[#f6f7f8] dark:bg-transparent dark:hover:bg-[#191e3a] border-transparent border-t-2 hover:border-secondary hover:text-secondary !outline-none transition duration-300"
  502. :class="{ '!border-secondary text-secondary dark:bg-[#191e3a]': selected }"
  503. >
  504. <svg> ... </svg>
  505. Settings
  506. </a>
  507. </Tab>
  508. </TabList>
  509. <TabPanels class="flex-1 text-sm">
  510. <TabPanel>
  511. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  512. <p class="mb-4">
  513. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  514. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  515. </p>
  516. <p>
  517. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  518. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  519. </p>
  520. </TabPanel>
  521. <TabPanel>
  522. <div class="flex items-start">
  523. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  524. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  525. </div>
  526. <div class="flex-auto">
  527. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  528. <p class="text-white-dark">
  529. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  530. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  531. </p>
  532. </div>
  533. </div>
  534. </TabPanel>
  535. <TabPanel>
  536. <p>
  537. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  538. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  539. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  540. </p>
  541. </TabPanel>
  542. <TabPanel>
  543. <blockquote
  544. class="text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"
  545. >
  546. <div class="flex items-start">
  547. <p class="not-italic text-[#515365] text-sm dark:text-white-dark m-0">
  548. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  549. nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  550. </p>
  551. </div>
  552. </blockquote>
  553. </TabPanel>
  554. </TabPanels>
  555. </TabGroup>
  556. <!-- script -->
  557. <script lang="ts" setup>
  558. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  559. <\/script>
  560. `,-1),Dt={class:"panel"},Gt={class:"flex items-center justify-between mb-5"},Mt=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Line",-1),Nt={class:"flex items-center"},Wt=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),$t=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Et=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Ft=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Ht=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Vt=e("pre",null,`<!-- line -->
  561. <TabGroup as="div" class="mb-5">
  562. <TabList class="flex flex-wrap mt-3 mb-5 border-b border-white-light dark:border-[#191e3a]">
  563. <Tab as="template" v-slot="{ selected }">
  564. <a
  565. href="javascript:;"
  566. class="p-5 py-3 -mb-[1px] flex items-center hover:border-b border-transparent hover:!border-secondary hover:text-secondary !outline-none transition duration-300"
  567. :class="{ 'border-b !border-secondary text-secondary': selected }"
  568. >
  569. <svg> ... </svg>
  570. Home
  571. </a>
  572. </Tab>
  573. <Tab as="template" v-slot="{ selected }">
  574. <a
  575. href="javascript:;"
  576. class="p-5 py-3 -mb-[1px] flex items-center hover:border-b border-transparent hover:!border-secondary hover:text-secondary !outline-none transition duration-300"
  577. :class="{ 'border-b !border-secondary text-secondary': selected }"
  578. >
  579. <svg> ... </svg>
  580. Profile
  581. </a>
  582. </Tab>
  583. <Tab as="template" v-slot="{ selected }">
  584. <a
  585. href="javascript:;"
  586. class="p-5 py-3 -mb-[1px] flex items-center hover:border-b border-transparent hover:!border-secondary hover:text-secondary !outline-none transition duration-300"
  587. :class="{ 'border-b !border-secondary text-secondary': selected }"
  588. >
  589. <svg> ... </svg>
  590. Contact
  591. </a>
  592. </Tab>
  593. </TabList>
  594. <TabPanels class="flex-1 text-sm">
  595. <TabPanel>
  596. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  597. <p class="mb-4">
  598. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  599. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  600. </p>
  601. <p>
  602. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  603. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  604. </p>
  605. </TabPanel>
  606. <TabPanel>
  607. <div class="flex items-start">
  608. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  609. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  610. </div>
  611. <div class="flex-auto">
  612. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  613. <p class="text-white-dark">
  614. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  615. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  616. </p>
  617. </div>
  618. </div>
  619. </TabPanel>
  620. <TabPanel>
  621. <p>
  622. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  623. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  624. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  625. </p>
  626. </TabPanel>
  627. </TabPanels>
  628. </TabGroup>
  629. <!-- script -->
  630. <script lang="ts" setup>
  631. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  632. <\/script>
  633. `,-1),St={class:"panel"},It={class:"flex items-center justify-between mb-5"},Bt=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Animated Line",-1),Jt={class:"flex items-center"},Rt=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),Zt=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),At=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),zt=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover /"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Kt=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Ot=e("pre",null,`<!-- animated line -->
  634. <TabGroup as="div" class="mb-5">
  635. <TabList class="flex flex-wrap mt-3 mb-5 border-b border-white-light dark:border-[#191e3a]">
  636. <Tab as="template" v-slot="{ selected }">
  637. <a
  638. href="javascript:;"
  639. class="p-5 py-3 -mb-[1px] flex items-center relative before:transition-all before:duration-700 before:absolute hover:text-secondary before:bottom-0 before:w-0 before:left-0 before:right-0 before:m-auto before:h-[1px] before:bg-secondary hover:before:w-full !outline-none transition duration-300"
  640. :class="{ 'before:!w-full text-secondary': selected }"
  641. >
  642. <svg> ... </svg>
  643. Home
  644. </a>
  645. </Tab>
  646. <Tab as="template" v-slot="{ selected }">
  647. <a
  648. href="javascript:;"
  649. class="p-5 py-3 -mb-[1px] flex items-center relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-0 before:bottom-0 before:left-0 before:right-0 before:m-auto before:h-[1px] before:bg-secondary hover:before:w-full !outline-none transition duration-300"
  650. :class="{ 'before:!w-full text-secondary': selected }"
  651. >
  652. <svg> ... </svg>
  653. Profile
  654. </a>
  655. </Tab>
  656. <Tab as="template" v-slot="{ selected }">
  657. <a
  658. href="javascript:;"
  659. class="p-5 py-3 -mb-[1px] flex items-center relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-0 before:bottom-0 before:left-0 before:right-0 before:m-auto before:h-[1px] before:bg-secondary hover:before:w-full !outline-none transition duration-300"
  660. :class="{ 'before:!w-full text-secondary': selected }"
  661. >
  662. <svg> ... </svg>
  663. Contact
  664. </a>
  665. </Tab>
  666. </TabList>
  667. <TabPanels class="flex-1 text-sm">
  668. <TabPanel>
  669. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  670. <p class="mb-4">
  671. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  672. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  673. </p>
  674. <p>
  675. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  676. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  677. </p>
  678. </TabPanel>
  679. <TabPanel>
  680. <div class="flex items-start">
  681. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  682. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover /" />
  683. </div>
  684. <div class="flex-auto">
  685. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  686. <p class="text-white-dark">
  687. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  688. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  689. </p>
  690. </div>
  691. </div>
  692. </TabPanel>
  693. <TabPanel>
  694. <p>
  695. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  696. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  697. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  698. </p>
  699. </TabPanel>
  700. </TabPanels>
  701. </TabGroup>
  702. <!-- script -->
  703. <script lang="ts" setup>
  704. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  705. <\/script>
  706. `,-1),Qt={class:"panel"},Xt={class:"flex items-center justify-between mb-5"},Yt=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Vertical Line Tab",-1),ei={class:"flex items-center"},ti={class:"mx-10 mb-5 sm:mb-0"},ii=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),ai=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),si=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),oi=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),ri=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),li=e("blockquote",{class:"text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"},[e("div",{class:"flex items-start"},[e("p",{class:"not-italic text-[#515365] text-sm dark:text-white-dark m-0"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. ")])],-1),ni=e("pre",null,`<!-- Vertical line tabs -->
  707. <TabGroup as="div" class="mb-5 flex flex-col sm:flex-row">
  708. <div class="mx-10 mb-5 sm:mb-0">
  709. <TabList class="w-24 m-auto text-center font-semibold">
  710. <Tab as="template" v-slot="{ selected }">
  711. <a
  712. href="javascript:;"
  713. class="p-3.5 py-4 -mb-[1px] block ltr:border-r rtl:border-l border-white-light dark:border-[#191e3a] relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-[1px] before:bottom-0 before:top-0 ltr:before:-right-[1px] rtl:before:-left-[1px] before:m-auto before:h-0 before:bg-secondary hover:before:h-[80%] !outline-none transition duration-300"
  714. :class="{ 'text-secondary before:!h-[80%]': selected }"
  715. >Home</a
  716. >
  717. </Tab>
  718. <Tab as="template" v-slot="{ selected }">
  719. <a
  720. href="javascript:;"
  721. class="p-3.5 py-4 -mb-[1px] block ltr:border-r rtl:border-l border-white-light dark:border-[#191e3a] relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-[1px] before:bottom-0 before:top-0 ltr:before:-right-[1px] rtl:before:-left-[1px] before:m-auto before:h-0 before:bg-secondary hover:before:h-[80%] !outline-none transition duration-300"
  722. :class="{ 'text-secondary before:!h-[80%]': selected }"
  723. >Profile</a
  724. >
  725. </Tab>
  726. <Tab as="template" v-slot="{ selected }">
  727. <a
  728. href="javascript:;"
  729. class="p-3.5 py-4 -mb-[1px] block ltr:border-r rtl:border-l border-white-light dark:border-[#191e3a] relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-[1px] before:bottom-0 before:top-0 ltr:before:-right-[1px] rtl:before:-left-[1px] before:m-auto before:h-0 before:bg-secondary hover:before:h-[80%] !outline-none transition duration-300"
  730. :class="{ 'text-secondary before:!h-[80%]': selected }"
  731. >Messages</a
  732. >
  733. </Tab>
  734. <Tab as="template" v-slot="{ selected }">
  735. <a
  736. href="javascript:;"
  737. class="p-3.5 py-4 -mb-[1px] block ltr:border-r rtl:border-l border-white-light dark:border-[#191e3a] relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-[1px] before:bottom-0 before:top-0 ltr:before:-right-[1px] rtl:before:-left-[1px] before:m-auto before:h-0 before:bg-secondary hover:before:h-[80%] !outline-none transition duration-300"
  738. :class="{ 'text-secondary before:!h-[80%]': selected }"
  739. >Settings</a
  740. >
  741. </Tab>
  742. </TabList>
  743. </div>
  744. <TabPanels class="flex-1 text-sm">
  745. <TabPanel>
  746. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  747. <p class="mb-4">
  748. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  749. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  750. </p>
  751. <p>
  752. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  753. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  754. </p>
  755. </TabPanel>
  756. <TabPanel>
  757. <div class="flex items-start">
  758. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  759. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  760. </div>
  761. <div class="flex-auto">
  762. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  763. <p class="text-white-dark">
  764. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  765. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  766. </p>
  767. </div>
  768. </div>
  769. </TabPanel>
  770. <TabPanel>
  771. <p>
  772. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  773. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  774. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  775. </p>
  776. </TabPanel>
  777. <TabPanel>
  778. <blockquote
  779. class="text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"
  780. >
  781. <div class="flex items-start">
  782. <p class="not-italic text-[#515365] text-sm dark:text-white-dark m-0">
  783. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  784. nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  785. </p>
  786. </div>
  787. </blockquote>
  788. </TabPanel>
  789. </TabPanels>
  790. </TabGroup>
  791. <!-- script -->
  792. <script lang="ts" setup>
  793. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  794. <\/script>
  795. `,-1),di={class:"panel"},ui={class:"flex items-center justify-between mb-5"},ci=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Justify Tabs",-1),mi={class:"flex items-center"},bi=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),pi=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),hi=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),fi=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),vi=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),xi=e("pre",null,`<!-- justify tabs -->
  796. <TabGroup as="div" class="mb-5">
  797. <TabList class="flex flex-wrap justify-between mt-3 border-b border-white-light dark:border-[#191e3a] text-center">
  798. <Tab as="template" v-slot="{ selected }">
  799. <a
  800. href="javascript:;"
  801. class="flex-auto p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300"
  802. :class="{ '!border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black': selected }"
  803. >Home</a
  804. >
  805. </Tab>
  806. <Tab as="template" v-slot="{ selected }">
  807. <a
  808. href="javascript:;"
  809. class="flex-auto p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300"
  810. :class="{ '!border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black': selected }"
  811. >Profile</a
  812. >
  813. </Tab>
  814. <Tab as="template" v-slot="{ selected }">
  815. <a
  816. href="javascript:;"
  817. class="flex-auto p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300"
  818. :class="{ '!border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black': selected }"
  819. >Contact</a
  820. >
  821. </Tab>
  822. </TabList>
  823. <TabPanels class="pt-5 flex-1 text-sm">
  824. <TabPanel>
  825. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  826. <p class="mb-4">
  827. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  828. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  829. </p>
  830. <p>
  831. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  832. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  833. </p>
  834. </TabPanel>
  835. <TabPanel>
  836. <div class="flex items-start">
  837. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  838. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  839. </div>
  840. <div class="flex-auto">
  841. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  842. <p class="text-white-dark">
  843. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  844. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  845. </p>
  846. </div>
  847. </div>
  848. </TabPanel>
  849. <TabPanel>
  850. <p>
  851. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  852. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  853. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  854. </p>
  855. </TabPanel>
  856. </TabPanels>
  857. </TabGroup>
  858. <!-- script -->
  859. <script lang="ts" setup>
  860. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  861. <\/script>
  862. `,-1),gi={class:"panel"},_i={class:"flex items-center justify-between mb-5"},wi=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Justify Pills",-1),ki={class:"flex items-center"},qi=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),Ti=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),yi=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ji=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Pi=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Ci=e("pre",null,`<!-- justify pills -->
  863. <TabGroup as="div" class="mb-5">
  864. <TabList class="flex flex-wrap justify-between mt-3 space-x-2 rtl:space-x-reverse text-center">
  865. <Tab as="template" v-slot="{ selected }">
  866. <a
  867. href="javascript:;"
  868. class="flex-auto p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300"
  869. :class="{ 'bg-info text-white': selected }"
  870. >Home</a
  871. >
  872. </Tab>
  873. <Tab as="template" v-slot="{ selected }">
  874. <a
  875. href="javascript:;"
  876. class="flex-auto p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300"
  877. :class="{ 'bg-info text-white': selected }"
  878. >Profile</a
  879. >
  880. </Tab>
  881. <Tab as="template" v-slot="{ selected }">
  882. <a
  883. href="javascript:;"
  884. class="flex-auto p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300"
  885. :class="{ 'bg-info text-white': selected }"
  886. >Contact</a
  887. >
  888. </Tab>
  889. </TabList>
  890. <TabPanels class="pt-5 flex-1 text-sm">
  891. <TabPanel>
  892. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  893. <p class="mb-4">
  894. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  895. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  896. </p>
  897. <p>
  898. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  899. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  900. </p>
  901. </TabPanel>
  902. <TabPanel>
  903. <div class="flex items-start">
  904. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  905. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  906. </div>
  907. <div class="flex-auto">
  908. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  909. <p class="text-white-dark">
  910. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  911. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  912. </p>
  913. </div>
  914. </div>
  915. </TabPanel>
  916. <TabPanel>
  917. <p>
  918. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  919. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  920. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  921. </p>
  922. </TabPanel>
  923. </TabPanels>
  924. </TabGroup>
  925. <!-- script -->
  926. <script lang="ts" setup>
  927. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  928. <\/script>
  929. `,-1),Li={class:"panel"},Ui={class:"flex items-center justify-between mb-5"},Di=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Justify Center Tabs",-1),Gi={class:"flex items-center"},Mi=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),Ni=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Wi=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),$i=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Ei=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Fi=e("pre",null,`<!-- justify center tabs -->
  930. <TabGroup as="div" class="mb-5">
  931. <TabList class="flex flex-wrap justify-center mt-3 border-b border-white-light dark:border-[#191e3a]">
  932. <Tab as="template" v-slot="{ selected }">
  933. <a
  934. href="javascript:;"
  935. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300"
  936. :class="{ 'text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black': selected }"
  937. >Home</a
  938. >
  939. </Tab>
  940. <Tab as="template" v-slot="{ selected }">
  941. <a
  942. href="javascript:;"
  943. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300"
  944. :class="{ 'text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black': selected }"
  945. >Profile</a
  946. >
  947. </Tab>
  948. <Tab as="template" v-slot="{ selected }">
  949. <a
  950. href="javascript:;"
  951. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300"
  952. :class="{ 'text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black': selected }"
  953. >Contact</a
  954. >
  955. </Tab>
  956. </TabList>
  957. <TabPanels class="pt-5 flex-1 text-sm">
  958. <TabPanel>
  959. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  960. <p class="mb-4">
  961. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  962. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  963. </p>
  964. <p>
  965. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  966. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  967. </p>
  968. </TabPanel>
  969. <TabPanel>
  970. <div class="flex items-start">
  971. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  972. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  973. </div>
  974. <div class="flex-auto">
  975. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  976. <p class="text-white-dark">
  977. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  978. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  979. </p>
  980. </div>
  981. </div>
  982. </TabPanel>
  983. <TabPanel>
  984. <p>
  985. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  986. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  987. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  988. </p>
  989. </TabPanel>
  990. </TabPanels>
  991. </TabGroup>
  992. <!-- script -->
  993. <script lang="ts" setup>
  994. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  995. <\/script>
  996. `,-1),Hi={class:"panel"},Vi={class:"flex items-center justify-between mb-5"},Si=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Justify Center Pills",-1),Ii={class:"flex items-center"},Bi=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),Ji=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Ri=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Zi=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Ai=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),zi=e("pre",null,`<!-- justify center pills -->
  997. <TabGroup as="div" class="mb-5">
  998. <TabList class="flex flex-wrap justify-center mt-3 space-x-2 rtl:space-x-reverse">
  999. <Tab as="template" v-slot="{ selected }"
  1000. ><a
  1001. href="javascript:;"
  1002. class="p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300"
  1003. :class="{ 'bg-info text-white': selected }"
  1004. >Home</a
  1005. >
  1006. </Tab>
  1007. <Tab as="template" v-slot="{ selected }"
  1008. ><a
  1009. href="javascript:;"
  1010. class="p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300"
  1011. :class="{ 'bg-info text-white': selected }"
  1012. >Profile</a
  1013. ></Tab
  1014. >
  1015. <Tab as="template" v-slot="{ selected }"
  1016. ><a
  1017. href="javascript:;"
  1018. class="p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300"
  1019. :class="{ 'bg-info text-white': selected }"
  1020. >Contact</a
  1021. ></Tab
  1022. >
  1023. </TabList>
  1024. <TabPanels class="pt-5 flex-1 text-sm">
  1025. <TabPanel>
  1026. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  1027. <p class="mb-4">
  1028. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1029. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1030. </p>
  1031. <p>
  1032. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1033. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1034. </p>
  1035. </TabPanel>
  1036. <TabPanel>
  1037. <div class="flex items-start">
  1038. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  1039. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  1040. </div>
  1041. <div class="flex-auto">
  1042. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  1043. <p class="text-white-dark">
  1044. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  1045. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1046. </p>
  1047. </div>
  1048. </div>
  1049. </TabPanel>
  1050. <TabPanel>
  1051. <p>
  1052. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1053. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  1054. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1055. </p>
  1056. </TabPanel>
  1057. </TabPanels>
  1058. </TabGroup>
  1059. <!-- script -->
  1060. <script lang="ts" setup>
  1061. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1062. <\/script>
  1063. `,-1),Ki={class:"panel"},Oi={class:"flex items-center justify-between mb-5"},Qi=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Justify Right Tabs",-1),Xi={class:"flex items-center"},Yi=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),ea=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ta=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ia=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),aa=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),sa=e("pre",null,`<!-- justify right tabs -->
  1064. <TabGroup as="div" class="mb-5">
  1065. <TabList class="flex flex-wrap justify-end mt-3 border-b border-white-light dark:border-[#191e3a]">
  1066. <Tab as="template" v-slot="{ selected }">
  1067. <a
  1068. href="javascript:;"
  1069. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300"
  1070. :class="{ 'text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black': selected }"
  1071. >Home</a
  1072. >
  1073. </Tab>
  1074. <Tab as="template" v-slot="{ selected }">
  1075. <a
  1076. href="javascript:;"
  1077. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300"
  1078. :class="{ 'text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black': selected }"
  1079. >Profile</a
  1080. >
  1081. </Tab>
  1082. <Tab as="template" v-slot="{ selected }">
  1083. <a
  1084. href="javascript:;"
  1085. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300"
  1086. :class="{ 'text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black': selected }"
  1087. >Contact</a
  1088. >
  1089. </Tab>
  1090. </TabList>
  1091. <TabPanels class="pt-5 flex-1 text-sm">
  1092. <TabPanel class="active">
  1093. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  1094. <p class="mb-4">
  1095. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1096. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1097. </p>
  1098. <p>
  1099. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1100. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1101. </p>
  1102. </TabPanel>
  1103. <TabPanel>
  1104. <div class="flex items-start">
  1105. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  1106. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  1107. </div>
  1108. <div class="flex-auto">
  1109. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  1110. <p class="text-white-dark">
  1111. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  1112. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1113. </p>
  1114. </div>
  1115. </div>
  1116. </TabPanel>
  1117. <TabPanel>
  1118. <p>
  1119. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1120. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  1121. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1122. </p>
  1123. </TabPanel>
  1124. </TabPanels>
  1125. </TabGroup>
  1126. <!-- script -->
  1127. <script lang="ts" setup>
  1128. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1129. <\/script>
  1130. `,-1),oa={class:"panel"},ra={class:"flex items-center justify-between mb-5"},la=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Justify Right Pills",-1),na={class:"flex items-center"},da=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),ua=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ca=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ma=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),ba=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),pa=e("pre",null,`<!-- justify right pills -->
  1131. <TabGroup as="div" class="mb-5">
  1132. <TabList class="flex flex-wrap justify-end mt-3 space-x-2 rtl:space-x-reverse">
  1133. <Tab as="template" v-slot="{ selected }">
  1134. <a
  1135. href="javascript:;"
  1136. class="p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300"
  1137. :class="{ 'bg-info text-white': selected }"
  1138. >Home</a
  1139. >
  1140. </Tab>
  1141. <Tab as="template" v-slot="{ selected }">
  1142. <a
  1143. href="javascript:;"
  1144. class="p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300"
  1145. :class="{ 'bg-info text-white': selected }"
  1146. >Profile</a
  1147. >
  1148. </Tab>
  1149. <Tab as="template" v-slot="{ selected }">
  1150. <a
  1151. href="javascript:;"
  1152. class="p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300"
  1153. :class="{ 'bg-info text-white': selected }"
  1154. >Contact</a
  1155. >
  1156. </Tab>
  1157. </TabList>
  1158. <TabPanels class="pt-5 flex-1 text-sm">
  1159. <TabPanel>
  1160. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  1161. <p class="mb-4">
  1162. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1163. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1164. </p>
  1165. <p>
  1166. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1167. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1168. </p>
  1169. </TabPanel>
  1170. <TabPanel>
  1171. <div class="flex items-start">
  1172. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  1173. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  1174. </div>
  1175. <div class="flex-auto">
  1176. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  1177. <p class="text-white-dark">
  1178. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  1179. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1180. </p>
  1181. </div>
  1182. </div>
  1183. </TabPanel>
  1184. <TabPanel>
  1185. <p>
  1186. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1187. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  1188. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1189. </p>
  1190. </TabPanel>
  1191. </TabPanels>
  1192. </TabGroup>
  1193. <!-- script -->
  1194. <script lang="ts" setup>
  1195. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1196. <\/script>
  1197. `,-1),ha={class:"panel"},fa={class:"flex items-center justify-between mb-5"},va=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Pills with Icon",-1),xa={class:"flex items-center"},ga=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),_a=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),wa=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ka=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),qa=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Ta=e("blockquote",{class:"text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"},[e("div",{class:"flex items-start"},[e("p",{class:"not-italic text-[#515365] text-sm dark:text-white-dark m-0"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. ")])],-1),ya=e("pre",null,`<!-- pills with icon -->
  1198. <TabGroup as="div" class="mb-5">
  1199. <TabList class="grid grid-cols-4 gap-2 sm:flex sm:flex-wrap sm:justify-center mt-3 mb-5 sm:space-x-3 rtl:space-x-reverse">
  1200. <Tab as="template" v-slot="{ selected }">
  1201. <a
  1202. href="javascript:;"
  1203. class="p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] !outline-none transition duration-300"
  1204. :class="{ '!bg-success text-white': selected }"
  1205. >
  1206. <svg> ... </svg>
  1207. Home
  1208. </a>
  1209. </Tab>
  1210. <Tab as="template" v-slot="{ selected }">
  1211. <a
  1212. href="javascript:;"
  1213. class="p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] !outline-none transition duration-300"
  1214. :class="{ '!bg-success text-white': selected }"
  1215. >
  1216. <svg> ... </svg>
  1217. Profile
  1218. </a>
  1219. </Tab>
  1220. <Tab as="template" v-slot="{ selected }">
  1221. <a
  1222. href="javascript:;"
  1223. class="p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] !outline-none transition duration-300"
  1224. :class="{ '!bg-success text-white': selected }"
  1225. >
  1226. <svg> ... </svg>
  1227. Contact
  1228. </a>
  1229. </Tab>
  1230. <Tab as="template" v-slot="{ selected }">
  1231. <a
  1232. href="javascript:;"
  1233. class="p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] !outline-none transition duration-300"
  1234. :class="{ '!bg-success text-white': selected }"
  1235. >
  1236. <svg> ... </svg>
  1237. Settings
  1238. </a>
  1239. </Tab>
  1240. </TabList>
  1241. <TabPanels class="flex-1 text-sm">
  1242. <TabPanel>
  1243. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  1244. <p class="mb-4">
  1245. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1246. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1247. </p>
  1248. <p>
  1249. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1250. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1251. </p>
  1252. </TabPanel>
  1253. <TabPanel>
  1254. <div class="flex items-start">
  1255. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  1256. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  1257. </div>
  1258. <div class="flex-auto">
  1259. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  1260. <p class="text-white-dark">
  1261. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  1262. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1263. </p>
  1264. </div>
  1265. </div>
  1266. </TabPanel>
  1267. <TabPanel>
  1268. <p>
  1269. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1270. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  1271. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1272. </p>
  1273. </TabPanel>
  1274. <TabPanel>
  1275. <blockquote
  1276. class="text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"
  1277. >
  1278. <div class="flex items-start">
  1279. <p class="not-italic text-[#515365] text-sm dark:text-white-dark m-0">
  1280. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  1281. nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  1282. </p>
  1283. </div>
  1284. </blockquote>
  1285. </TabPanel>
  1286. </TabPanels>
  1287. </TabGroup>
  1288. <!-- script -->
  1289. <script lang="ts" setup>
  1290. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1291. <\/script>
  1292. `,-1),ja={class:"panel"},Pa={class:"flex items-center justify-between mb-5"},Ca=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Rounded Pills with Icon",-1),La={class:"flex items-center"},Ua=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),Da=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Ga=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Ma=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Na=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Wa=e("blockquote",{class:"text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"},[e("div",{class:"flex items-start"},[e("p",{class:"not-italic text-[#515365] text-sm dark:text-white-dark m-0"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. ")])],-1),$a=e("pre",null,`<!-- rounded pills with icon -->
  1293. <TabGroup as="div" class="mb-5">
  1294. <TabList class="flex flex-wrap justify-center mt-3 mb-5 space-x-3 rtl:space-x-reverse">
  1295. <Tab as="template" v-slot="{ selected }">
  1296. <a
  1297. href="javascript:;"
  1298. class="w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1299. :class="{ '!bg-info text-white': selected }"
  1300. >
  1301. <svg> ... </svg>
  1302. </a>
  1303. </Tab>
  1304. <Tab as="template" v-slot="{ selected }">
  1305. <a
  1306. href="javascript:;"
  1307. class="w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1308. :class="{ '!bg-info text-white': selected }"
  1309. >
  1310. <svg> ... </svg>
  1311. </a>
  1312. </Tab>
  1313. <Tab as="template" v-slot="{ selected }">
  1314. <a
  1315. href="javascript:;"
  1316. class="w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1317. :class="{ '!bg-info text-white': selected }"
  1318. >
  1319. <svg> ... </svg>
  1320. </a>
  1321. </Tab>
  1322. <Tab as="template" v-slot="{ selected }">
  1323. <a
  1324. href="javascript:;"
  1325. class="w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1326. :class="{ '!bg-info text-white': selected }"
  1327. >
  1328. <svg> ... </svg>
  1329. </a>
  1330. </Tab>
  1331. </TabList>
  1332. <TabPanels class="flex-1 text-sm">
  1333. <TabPanel>
  1334. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  1335. <p class="mb-4">
  1336. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1337. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1338. </p>
  1339. <p>
  1340. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1341. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1342. </p>
  1343. </TabPanel>
  1344. <TabPanel>
  1345. <div class="flex items-start">
  1346. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  1347. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  1348. </div>
  1349. <div class="flex-auto">
  1350. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  1351. <p class="text-white-dark">
  1352. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  1353. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1354. </p>
  1355. </div>
  1356. </div>
  1357. </TabPanel>
  1358. <TabPanel>
  1359. <p>
  1360. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1361. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  1362. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1363. </p>
  1364. </TabPanel>
  1365. <TabPanel>
  1366. <blockquote
  1367. class="text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"
  1368. >
  1369. <div class="flex items-start">
  1370. <p class="not-italic text-[#515365] text-sm dark:text-white-dark m-0">
  1371. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  1372. nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  1373. </p>
  1374. </div>
  1375. </blockquote>
  1376. </TabPanel>
  1377. </TabPanels>
  1378. </TabGroup>
  1379. <!-- script -->
  1380. <script lang="ts" setup>
  1381. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1382. <\/script>
  1383. `,-1),Ea={class:"panel"},Fa={class:"flex items-center justify-between mb-5"},Ha=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Vertical Rounded With Icon",-1),Va={class:"flex items-center"},Sa={class:"mx-10 mb-5 sm:mb-0"},Ia=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),Ba=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Ja=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Ra=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Za=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Aa=e("pre",null,`<!-- vertical rounded with icon -->
  1384. <TabGroup as="div" class="mb-5 flex flex-col sm:flex-row">
  1385. <div class="mx-10 mb-5 sm:mb-0">
  1386. <TabList class="flex flex-col justify-center m-auto space-y-3 w-24">
  1387. <Tab as="template" v-slot="{ selected }">
  1388. <a
  1389. href="javascript:;"
  1390. class="p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1391. :class="{ '!bg-success text-white': selected }"
  1392. >
  1393. <svg> ... </svg>
  1394. Home
  1395. </a>
  1396. </Tab>
  1397. <Tab as="template" v-slot="{ selected }">
  1398. <a
  1399. href="javascript:;"
  1400. class="p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1401. :class="{ '!bg-success text-white': selected }"
  1402. >
  1403. <svg> ... </svg>
  1404. Profile
  1405. </a>
  1406. </Tab>
  1407. <Tab as="template" v-slot="{ selected }">
  1408. <a
  1409. href="javascript:;"
  1410. class="p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1411. :class="{ '!bg-success text-white': selected }"
  1412. >
  1413. <svg> ... </svg>
  1414. Contact
  1415. </a>
  1416. </Tab>
  1417. </TabList>
  1418. </div>
  1419. <TabPanels class="flex-1 text-sm">
  1420. <TabPanel>
  1421. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  1422. <p class="mb-4">
  1423. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1424. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1425. </p>
  1426. <p>
  1427. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1428. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1429. </p>
  1430. </TabPanel>
  1431. <TabPanel>
  1432. <div class="flex items-start">
  1433. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  1434. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  1435. </div>
  1436. <div class="flex-auto">
  1437. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  1438. <p class="text-white-dark">
  1439. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  1440. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1441. </p>
  1442. </div>
  1443. </div>
  1444. </TabPanel>
  1445. <TabPanel>
  1446. <p>
  1447. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1448. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  1449. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1450. </p>
  1451. </TabPanel>
  1452. </TabPanels>
  1453. </TabGroup>
  1454. <!-- script -->
  1455. <script lang="ts" setup>
  1456. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1457. <\/script>
  1458. `,-1),za={class:"panel"},Ka={class:"flex items-center justify-between mb-5"},Oa=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Vertical Circle With Icon",-1),Qa={class:"flex items-center"},Xa={class:"mx-10 mb-5 sm:mb-0"},Ya=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),es=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ts=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),is=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),as=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),ss=e("pre",null,`<!-- vertical circle dith icon -->
  1459. <TabGroup as="div" class="mb-5 flex flex-col sm:flex-row">
  1460. <div class="mx-10 mb-5 sm:mb-0">
  1461. <TabList class="flex flex-col justify-center items-center space-y-3">
  1462. <Tab as="template" v-slot="{ selected }">
  1463. <a
  1464. href="javascript:;"
  1465. class="w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1466. :class="{ '!bg-info text-white': selected }"
  1467. >
  1468. <svg> ... </svg>
  1469. </a>
  1470. </Tab>
  1471. <Tab as="template" v-slot="{ selected }">
  1472. <a
  1473. href="javascript:;"
  1474. class="w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1475. :class="{ '!bg-info text-white': selected }"
  1476. >
  1477. <svg> ... </svg>
  1478. </a>
  1479. </Tab>
  1480. <Tab as="template" v-slot="{ selected }">
  1481. <a
  1482. href="javascript:;"
  1483. class="w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none"
  1484. :class="{ '!bg-info text-white': selected }"
  1485. >
  1486. <svg> ... </svg>
  1487. </a>
  1488. </Tab>
  1489. </TabList>
  1490. </div>
  1491. <TabPanels class="flex-1 text-sm">
  1492. <TabPanel>
  1493. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  1494. <p class="mb-4">
  1495. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1496. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1497. </p>
  1498. <p>
  1499. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1500. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1501. </p>
  1502. </TabPanel>
  1503. <TabPanel>
  1504. <div class="flex items-start">
  1505. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  1506. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  1507. </div>
  1508. <div class="flex-auto">
  1509. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  1510. <p class="text-white-dark">
  1511. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  1512. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1513. </p>
  1514. </div>
  1515. </div>
  1516. </TabPanel>
  1517. <TabPanel>
  1518. <p>
  1519. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1520. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  1521. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1522. </p>
  1523. </TabPanel>
  1524. </TabPanels>
  1525. </TabGroup>
  1526. <!-- script -->
  1527. <script lang="ts" setup>
  1528. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1529. <\/script>
  1530. `,-1),os={class:"panel"},rs={class:"flex items-center justify-between mb-5"},ls=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Vertical Pills",-1),ns={class:"flex items-center"},ds=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),us=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),cs=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ms=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),bs=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),ps=e("blockquote",{class:"text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"},[e("div",{class:"flex items-start"},[e("p",{class:"not-italic text-[#515365] text-sm dark:text-white-dark m-0"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. ")])],-1),hs=e("pre",null,`<!-- vertical pills -->
  1531. <TabGroup as="div" class="mb-5 flex flex-col sm:flex-row">
  1532. <TabList class="ltr:pr-4 rtl:pl-4 space-y-2 sm:flex-[0_0_20%] mb-5 sm:mb-0">
  1533. <Tab as="template" v-slot="{ selected }"
  1534. ><a
  1535. href="javascript:;"
  1536. class="p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none"
  1537. :class="{ '!bg-success text-white': selected }"
  1538. >Home</a
  1539. ></Tab
  1540. >
  1541. <Tab as="template" v-slot="{ selected }"
  1542. ><a
  1543. href="javascript:;"
  1544. class="p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none"
  1545. :class="{ '!bg-success text-white': selected }"
  1546. >Profile</a
  1547. ></Tab
  1548. >
  1549. <Tab as="template" v-slot="{ selected }"
  1550. ><a
  1551. href="javascript:;"
  1552. class="p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none"
  1553. :class="{ '!bg-success text-white': selected }"
  1554. >Messages</a
  1555. ></Tab
  1556. >
  1557. <Tab as="template" v-slot="{ selected }"
  1558. ><a
  1559. href="javascript:;"
  1560. class="p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none"
  1561. :class="{ '!bg-success text-white': selected }"
  1562. >Settings</a
  1563. ></Tab
  1564. >
  1565. </TabList>
  1566. <TabPanels class="flex-1 text-sm">
  1567. <TabPanel>
  1568. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  1569. <p class="mb-4">
  1570. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1571. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1572. </p>
  1573. <p>
  1574. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1575. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1576. </p>
  1577. </TabPanel>
  1578. <TabPanel>
  1579. <div class="flex items-start">
  1580. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  1581. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  1582. </div>
  1583. <div class="flex-auto">
  1584. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  1585. <p class="text-white-dark">
  1586. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  1587. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1588. </p>
  1589. </div>
  1590. </div>
  1591. </TabPanel>
  1592. <TabPanel>
  1593. <p>
  1594. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1595. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  1596. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1597. </p>
  1598. </TabPanel>
  1599. <TabPanel>
  1600. <blockquote
  1601. class="text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"
  1602. >
  1603. <div class="flex items-start">
  1604. <p class="not-italic text-[#515365] text-sm dark:text-white-dark m-0">
  1605. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  1606. nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  1607. </p>
  1608. </div>
  1609. </blockquote>
  1610. </TabPanel>
  1611. </TabPanels>
  1612. </TabGroup>
  1613. <!-- script -->
  1614. <script lang="ts" setup>
  1615. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1616. <\/script>
  1617. `,-1),fs={class:"panel"},vs={class:"flex items-center justify-between mb-5"},xs=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Justify Vertical Pills Right",-1),gs={class:"flex items-center"},_s=e("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),ws=e("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),ks=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),qs=e("div",{class:"flex items-start"},[e("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[e("img",{src:_,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),e("div",{class:"flex-auto"},[e("h5",{class:"text-xl font-medium mb-4"},"Media heading"),e("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Ts=e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),ys=e("blockquote",{class:"text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"},[e("div",{class:"flex items-start"},[e("p",{class:"not-italic text-[#515365] text-sm dark:text-white-dark m-0"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. ")])],-1),js=e("pre",null,`<!-- justify vertical pills right -->
  1618. <TabGroup as="div" class="mb-5 flex flex-col sm:flex-row">
  1619. <TabList class="ltr:pr-4 rtl:pl-4 space-y-2 sm:flex-[0_0_20%] mb-5 sm:mb-0 sm:order-1">
  1620. <Tab as="template" v-slot="{ selected }"
  1621. ><a
  1622. href="javascript:;"
  1623. class="p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none"
  1624. :class="{ '!bg-success text-white': selected }"
  1625. >Home</a
  1626. ></Tab
  1627. >
  1628. <Tab as="template" v-slot="{ selected }"
  1629. ><a
  1630. href="javascript:;"
  1631. class="p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none"
  1632. :class="{ '!bg-success text-white': selected }"
  1633. >Profile</a
  1634. ></Tab
  1635. >
  1636. <Tab as="template" v-slot="{ selected }"
  1637. ><a
  1638. href="javascript:;"
  1639. class="p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none"
  1640. :class="{ '!bg-success text-white': selected }"
  1641. >Messages</a
  1642. ></Tab
  1643. >
  1644. <Tab as="template" v-slot="{ selected }"
  1645. ><a
  1646. href="javascript:;"
  1647. class="p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none"
  1648. :class="{ '!bg-success text-white': selected }"
  1649. >Settings</a
  1650. ></Tab
  1651. >
  1652. </TabList>
  1653. <TabPanels class="flex-1 text-sm">
  1654. <TabPanel>
  1655. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  1656. <p class="mb-4">
  1657. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1658. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1659. </p>
  1660. <p>
  1661. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1662. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1663. </p>
  1664. </TabPanel>
  1665. <TabPanel>
  1666. <div class="flex items-start">
  1667. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  1668. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  1669. </div>
  1670. <div class="flex-auto">
  1671. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  1672. <p class="text-white-dark">
  1673. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  1674. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1675. </p>
  1676. </div>
  1677. </div>
  1678. </TabPanel>
  1679. <TabPanel>
  1680. <p>
  1681. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  1682. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  1683. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1684. </p>
  1685. </TabPanel>
  1686. <TabPanel>
  1687. <blockquote
  1688. class="text-black p-5 ltr:pl-3.5 rtl:pr-3.5 bg-white shadow-md rounded-tr-md rounded-br-md border border-white-light border-l-2 !border-l-primary dark:bg-[#060818] dark:border-[#060818]"
  1689. >
  1690. <div class="flex items-start">
  1691. <p class="not-italic text-[#515365] text-sm dark:text-white-dark m-0">
  1692. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  1693. nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  1694. </p>
  1695. </div>
  1696. </blockquote>
  1697. </TabPanel>
  1698. </TabPanels>
  1699. </TabGroup>
  1700. <!-- script -->
  1701. <script lang="ts" setup>
  1702. import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1703. <\/script>
  1704. `,-1),Ns=L({__name:"tabs",setup(y){U({title:"Tabs"});const{codeArr:c,toggleCode:m}=D();return(Ps,d)=>(u(),T("div",null,[te,e("div",ie,[e("div",ae,[e("div",se,[t(G)]),oe,re]),e("div",le,[e("div",ne,[e("div",de,[ue,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[0]||(d[0]=s=>i(m)("code1"))},[e("span",ce,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none transition duration-300",{"!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none transition duration-300",{"!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none transition duration-300",{"!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black":s}])},"Contact",2)]),_:1}),t(i(o),{as:"template",disabled:""},{default:a(()=>[me]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[be,pe,he]),_:1}),t(i(r),null,{default:a(()=>[fe]),_:1}),t(i(r),null,{default:a(()=>[ve]),_:1}),t(i(r),null,{default:a(()=>[n("Disabled")]),_:1})]),_:1})]),_:1}),i(c).includes("code1")?(u(),b(h,{key:0},{default:a(()=>[xe]),_:1})):p("",!0)]),e("div",ge,[e("div",_e,[we,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[1]||(d[1]=s=>i(m)("code2"))},[e("span",ke,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap mt-3"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] ltr:mr-2 rtl:ml-2 block rounded hover:bg-primary hover:text-white !outline-none transition duration-300",{"bg-primary text-white":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] ltr:mr-2 rtl:ml-2 block rounded hover:bg-primary hover:text-white !outline-none transition duration-300",{"bg-primary text-white":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] ltr:mr-2 rtl:ml-2 block rounded hover:bg-primary hover:text-white !outline-none transition duration-300",{"bg-primary text-white":s}])},"Contact",2)]),_:1}),t(i(o),{as:"template",disabled:""},{default:a(()=>[qe]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Te,ye,je]),_:1}),t(i(r),null,{default:a(()=>[Pe]),_:1}),t(i(r),null,{default:a(()=>[Ce]),_:1}),t(i(r),null,{default:a(()=>[n("Disabled")]),_:1})]),_:1})]),_:1}),i(c).includes("code2")?(u(),b(h,{key:0},{default:a(()=>[Le]),_:1})):p("",!0)]),e("div",Ue,[e("div",De,[Ge,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[2]||(d[2]=s=>i(m)("code3"))},[e("span",Me,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300",{"!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black":s}])},[t(q,{class:"ltr:mr-2 rtl:ml-2"}),n(" Home ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300",{"!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black":s}])},[t(w,{class:"w-5 h-5 ltr:mr-2 rtl:ml-2"}),n(" Profile ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300",{"!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black":s}])},[t(k,{class:"ltr:mr-2 rtl:ml-2"}),n(" Contact ")],2)]),_:1}),t(i(o),{as:"template",disabled:""},{default:a(()=>[e("a",Ne,[t(P,{class:"w-5 h-5 ltr:mr-2 rtl:ml-2"}),n(" Disabled ")])]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[We,$e,Ee]),_:1}),t(i(r),null,{default:a(()=>[Fe]),_:1}),t(i(r),null,{default:a(()=>[He]),_:1}),t(i(r),null,{default:a(()=>[n("Disabled")]),_:1})]),_:1})]),_:1}),i(c).includes("code3")?(u(),b(h,{key:0},{default:a(()=>[Ve]),_:1})):p("",!0)]),e("div",Se,[e("div",Ie,[Be,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[3]||(d[3]=s=>i(m)("code4"))},[e("span",Je,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap mt-3 gap-2"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] flex items-center rounded hover:bg-warning hover:text-white !outline-none transition duration-300",{"bg-warning text-white":s}])},[t(q,{class:"ltr:mr-2 rtl:ml-2"}),n(" Home ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] flex items-center rounded hover:bg-warning hover:text-white !outline-none transition duration-300",{"bg-warning text-white":s}])},[t(w,{class:"w-5 h-5 ltr:mr-2 rtl:ml-2"}),n(" Profile ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] flex items-center rounded hover:bg-warning hover:text-white !outline-none transition duration-300",{"bg-warning text-white":s}])},[t(k,{class:"ltr:mr-2 rtl:ml-2"}),n(" Contact ")],2)]),_:1}),t(i(o),{as:"template",disabled:""},{default:a(()=>[e("a",Re,[t(P,{class:"w-5 h-5 ltr:mr-2 rtl:ml-2"}),n(" Disabled ")])]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Ze,Ae,ze]),_:1}),t(i(r),null,{default:a(()=>[Ke]),_:1}),t(i(r),null,{default:a(()=>[Oe]),_:1}),t(i(r),null,{default:a(()=>[n("Disabled")]),_:1})]),_:1})]),_:1}),i(c).includes("code4")?(u(),b(h,{key:0},{default:a(()=>[Qe]),_:1})):p("",!0)]),e("div",Xe,[e("div",Ye,[et,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[4]||(d[4]=s=>i(m)("code5"))},[e("span",tt,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5 flex flex-col sm:flex-row"},{default:a(()=>[e("div",it,[t(i(x),{class:"w-24 m-auto text-center"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-white-light dark:border-[#191e3a] hover:bg-success hover:text-white !outline-none transition duration-300",{"bg-success text-white":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-white-light dark:border-[#191e3a] hover:bg-success hover:text-white !outline-none transition duration-300",{"bg-success text-white":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-white-light dark:border-[#191e3a] hover:bg-success hover:text-white !outline-none transition duration-300",{"bg-success text-white":s}])},"Messages",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-white-light dark:border-[#191e3a] hover:bg-success hover:text-white !outline-none transition duration-300",{"bg-success text-white":s}])},"Settings",2)]),_:1})]),_:1})]),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[at,st,ot]),_:1}),t(i(r),null,{default:a(()=>[rt]),_:1}),t(i(r),null,{default:a(()=>[lt]),_:1}),t(i(r),null,{default:a(()=>[nt]),_:1})]),_:1})]),_:1}),i(c).includes("code5")?(u(),b(h,{key:0},{default:a(()=>[dt]),_:1})):p("",!0)]),e("div",ut,[e("div",ct,[mt,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[5]||(d[5]=s=>i(m)("code6"))},[e("span",bt,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300",{"!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black":s}])},[t(q,{class:"ltr:mr-2 rtl:ml-2"}),n(" Home ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300",{"!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black":s}])},[t(w,{class:"w-5 h-5 ltr:mr-2 rtl:ml-2"}),n(" Profile ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] flex items-center border border-transparent hover:text-danger !outline-none transition duration-300",{"!border-white-light !border-b-white text-danger dark:!border-[#191e3a] dark:!border-b-black":s}])},[t(k,{class:"ltr:mr-2 rtl:ml-2"}),n(" Contact ")],2)]),_:1})]),_:1}),t(i(g),{class:"p-4 flex-1 text-sm border border-white-light border-t-0 dark:border-[#191e3a]"},{default:a(()=>[t(i(r),{class:"active"},{default:a(()=>[pt,ht,ft]),_:1}),t(i(r),null,{default:a(()=>[vt]),_:1}),t(i(r),null,{default:a(()=>[xt]),_:1})]),_:1})]),_:1}),i(c).includes("code6")?(u(),b(h,{key:0},{default:a(()=>[gt]),_:1})):p("",!0)]),e("div",_t,[e("div",wt,[kt,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[6]||(d[6]=s=>i(m)("code7"))},[e("span",qt,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap mt-3 mb-5"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex items-center bg-[#f6f7f8] dark:bg-transparent border-transparent border-t-2 dark:hover:bg-[#191e3a] hover:border-secondary hover:text-secondary !outline-none transition duration-300",{"!border-secondary text-secondary dark:bg-[#191e3a]":s}])},[t(q,{class:"ltr:mr-2 rtl:ml-2"}),n(" Home ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex items-center bg-[#f6f7f8] dark:bg-transparent dark:hover:bg-[#191e3a] border-transparent border-t-2 hover:border-secondary hover:text-secondary !outline-none transition duration-300",{"!border-secondary text-secondary dark:bg-[#191e3a]":s}])},[t(w,{class:"w-5 h-5 ltr:mr-2 rtl:ml-2"}),n(" Profile ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex items-center bg-[#f6f7f8] dark:bg-transparent dark:hover:bg-[#191e3a] border-transparent border-t-2 hover:border-secondary hover:text-secondary !outline-none transition duration-300",{"!border-secondary text-secondary dark:bg-[#191e3a]":s}])},[t(k,{class:"ltr:mr-2 rtl:ml-2"}),n(" Contact ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex items-center bg-[#f6f7f8] dark:bg-transparent dark:hover:bg-[#191e3a] border-transparent border-t-2 hover:border-secondary hover:text-secondary !outline-none transition duration-300",{"!border-secondary text-secondary dark:bg-[#191e3a]":s}])},[t(j,{class:"w-5 h-5 ltr:mr-2 rtl:ml-2"}),n(" Settings ")],2)]),_:1})]),_:1}),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Tt,yt,jt]),_:1}),t(i(r),null,{default:a(()=>[Pt]),_:1}),t(i(r),null,{default:a(()=>[Ct]),_:1}),t(i(r),null,{default:a(()=>[Lt]),_:1})]),_:1})]),_:1}),i(c).includes("code7")?(u(),b(h,{key:0},{default:a(()=>[Ut]),_:1})):p("",!0)]),e("div",Dt,[e("div",Gt,[Mt,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[7]||(d[7]=s=>i(m)("code8"))},[e("span",Nt,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap mt-3 mb-5 border-b border-white-light dark:border-[#191e3a]"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-5 py-3 -mb-[1px] flex items-center hover:border-b border-transparent hover:!border-secondary hover:text-secondary !outline-none transition duration-300",{"border-b !border-secondary text-secondary":s}])},[t(q,{class:"ltr:mr-2 rtl:ml-2"}),n(" Home ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-5 py-3 -mb-[1px] flex items-center hover:border-b border-transparent hover:!border-secondary hover:text-secondary !outline-none transition duration-300",{"border-b !border-secondary text-secondary":s}])},[t(w,{class:"w-5 h-5 ltr:mr-2 rtl:ml-2"}),n(" Profile ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-5 py-3 -mb-[1px] flex items-center hover:border-b border-transparent hover:!border-secondary hover:text-secondary !outline-none transition duration-300",{"border-b !border-secondary text-secondary":s}])},[t(k,{class:"ltr:mr-2 rtl:ml-2"}),n(" Contact ")],2)]),_:1})]),_:1}),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Wt,$t,Et]),_:1}),t(i(r),null,{default:a(()=>[Ft]),_:1}),t(i(r),null,{default:a(()=>[Ht]),_:1})]),_:1})]),_:1}),i(c).includes("code8")?(u(),b(h,{key:0},{default:a(()=>[Vt]),_:1})):p("",!0)]),e("div",St,[e("div",It,[Bt,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[8]||(d[8]=s=>i(m)("code9"))},[e("span",Jt,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap mt-3 mb-5 border-b border-white-light dark:border-[#191e3a]"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-5 py-3 -mb-[1px] flex items-center relative before:transition-all before:duration-700 before:absolute hover:text-secondary before:bottom-0 before:w-0 before:left-0 before:right-0 before:m-auto before:h-[1px] before:bg-secondary hover:before:w-full !outline-none transition duration-300",{"before:!w-full text-secondary":s}])},[t(q,{class:"ltr:mr-2 rtl:ml-2"}),n(" Home ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-5 py-3 -mb-[1px] flex items-center relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-0 before:bottom-0 before:left-0 before:right-0 before:m-auto before:h-[1px] before:bg-secondary hover:before:w-full !outline-none transition duration-300",{"before:!w-full text-secondary":s}])},[t(w,{class:"w-5 h-5 ltr:mr-2 rtl:ml-2"}),n(" Profile ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-5 py-3 -mb-[1px] flex items-center relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-0 before:bottom-0 before:left-0 before:right-0 before:m-auto before:h-[1px] before:bg-secondary hover:before:w-full !outline-none transition duration-300",{"before:!w-full text-secondary":s}])},[t(k,{class:"ltr:mr-2 rtl:ml-2"}),n(" Contact ")],2)]),_:1})]),_:1}),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Rt,Zt,At]),_:1}),t(i(r),null,{default:a(()=>[zt]),_:1}),t(i(r),null,{default:a(()=>[Kt]),_:1})]),_:1})]),_:1}),i(c).includes("code9")?(u(),b(h,{key:0},{default:a(()=>[Ot]),_:1})):p("",!0)]),e("div",Qt,[e("div",Xt,[Yt,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[9]||(d[9]=s=>i(m)("code10"))},[e("span",ei,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5 flex flex-col sm:flex-row"},{default:a(()=>[e("div",ti,[t(i(x),{class:"w-24 m-auto text-center font-semibold"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-4 -mb-[1px] block ltr:border-r rtl:border-l border-white-light dark:border-[#191e3a] relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-[1px] before:bottom-0 before:top-0 ltr:before:-right-[1px] rtl:before:-left-[1px] before:m-auto before:h-0 before:bg-secondary hover:before:h-[80%] !outline-none transition duration-300",{"text-secondary before:!h-[80%]":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-4 -mb-[1px] block ltr:border-r rtl:border-l border-white-light dark:border-[#191e3a] relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-[1px] before:bottom-0 before:top-0 ltr:before:-right-[1px] rtl:before:-left-[1px] before:m-auto before:h-0 before:bg-secondary hover:before:h-[80%] !outline-none transition duration-300",{"text-secondary before:!h-[80%]":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-4 -mb-[1px] block ltr:border-r rtl:border-l border-white-light dark:border-[#191e3a] relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-[1px] before:bottom-0 before:top-0 ltr:before:-right-[1px] rtl:before:-left-[1px] before:m-auto before:h-0 before:bg-secondary hover:before:h-[80%] !outline-none transition duration-300",{"text-secondary before:!h-[80%]":s}])},"Messages",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-4 -mb-[1px] block ltr:border-r rtl:border-l border-white-light dark:border-[#191e3a] relative before:transition-all before:duration-700 hover:text-secondary before:absolute before:w-[1px] before:bottom-0 before:top-0 ltr:before:-right-[1px] rtl:before:-left-[1px] before:m-auto before:h-0 before:bg-secondary hover:before:h-[80%] !outline-none transition duration-300",{"text-secondary before:!h-[80%]":s}])},"Settings",2)]),_:1})]),_:1})]),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[ii,ai,si]),_:1}),t(i(r),null,{default:a(()=>[oi]),_:1}),t(i(r),null,{default:a(()=>[ri]),_:1}),t(i(r),null,{default:a(()=>[li]),_:1})]),_:1})]),_:1}),i(c).includes("code10")?(u(),b(h,{key:0},{default:a(()=>[ni]),_:1})):p("",!0)]),e("div",di,[e("div",ui,[ci,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[10]||(d[10]=s=>i(m)("code11"))},[e("span",mi,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap justify-between mt-3 border-b border-white-light dark:border-[#191e3a] text-center"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["flex-auto p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300",{"!border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["flex-auto p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300",{"!border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["flex-auto p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300",{"!border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black":s}])},"Contact",2)]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[bi,pi,hi]),_:1}),t(i(r),null,{default:a(()=>[fi]),_:1}),t(i(r),null,{default:a(()=>[vi]),_:1})]),_:1})]),_:1}),i(c).includes("code11")?(u(),b(h,{key:0},{default:a(()=>[xi]),_:1})):p("",!0)]),e("div",gi,[e("div",_i,[wi,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[11]||(d[11]=s=>i(m)("code12"))},[e("span",ki,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap justify-between mt-3 space-x-2 rtl:space-x-reverse text-center"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["flex-auto p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300",{"bg-info text-white":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["flex-auto p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300",{"bg-info text-white":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["flex-auto p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300",{"bg-info text-white":s}])},"Contact",2)]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[qi,Ti,yi]),_:1}),t(i(r),null,{default:a(()=>[ji]),_:1}),t(i(r),null,{default:a(()=>[Pi]),_:1})]),_:1})]),_:1}),i(c).includes("code12")?(u(),b(h,{key:0},{default:a(()=>[Ci]),_:1})):p("",!0)]),e("div",Li,[e("div",Ui,[Di,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[12]||(d[12]=s=>i(m)("code13"))},[e("span",Gi,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap justify-center mt-3 border-b border-white-light dark:border-[#191e3a]"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300",{"text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300",{"text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300",{"text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black":s}])},"Contact",2)]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Mi,Ni,Wi]),_:1}),t(i(r),null,{default:a(()=>[$i]),_:1}),t(i(r),null,{default:a(()=>[Ei]),_:1})]),_:1})]),_:1}),i(c).includes("code13")?(u(),b(h,{key:0},{default:a(()=>[Fi]),_:1})):p("",!0)]),e("div",Hi,[e("div",Vi,[Si,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[13]||(d[13]=s=>i(m)("code14"))},[e("span",Ii,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap justify-center mt-3 space-x-2 rtl:space-x-reverse"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300",{"bg-info text-white":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300",{"bg-info text-white":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300",{"bg-info text-white":s}])},"Contact",2)]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Bi,Ji,Ri]),_:1}),t(i(r),null,{default:a(()=>[Zi]),_:1}),t(i(r),null,{default:a(()=>[Ai]),_:1})]),_:1})]),_:1}),i(c).includes("code14")?(u(),b(h,{key:0},{default:a(()=>[zi]),_:1})):p("",!0)]),e("div",Ki,[e("div",Oi,[Qi,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[14]||(d[14]=s=>i(m)("code15"))},[e("span",Xi,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap justify-end mt-3 border-b border-white-light dark:border-[#191e3a]"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300",{"text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300",{"text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:border-white-light hover:border-b-white dark:hover:border-[#191e3a] dark:hover:border-b-black !outline-none transition duration-300",{"text-primary !border-white-light !border-b-white dark:!border-[#191e3a] dark:!border-b-black":s}])},"Contact",2)]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),{class:"active"},{default:a(()=>[Yi,ea,ta]),_:1}),t(i(r),null,{default:a(()=>[ia]),_:1}),t(i(r),null,{default:a(()=>[aa]),_:1})]),_:1})]),_:1}),i(c).includes("code15")?(u(),b(h,{key:0},{default:a(()=>[sa]),_:1})):p("",!0)]),e("div",oa,[e("div",ra,[la,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[15]||(d[15]=s=>i(m)("code16"))},[e("span",na,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap justify-end mt-3 space-x-2 rtl:space-x-reverse"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300",{"bg-info text-white":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300",{"bg-info text-white":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 -mb-[1px] block hover:bg-info rounded hover:text-white !outline-none transition duration-300",{"bg-info text-white":s}])},"Contact",2)]),_:1})]),_:1}),t(i(g),{class:"pt-5 flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[da,ua,ca]),_:1}),t(i(r),null,{default:a(()=>[ma]),_:1}),t(i(r),null,{default:a(()=>[ba]),_:1})]),_:1})]),_:1}),i(c).includes("code16")?(u(),b(h,{key:0},{default:a(()=>[pa]),_:1})):p("",!0)]),e("div",ha,[e("div",fa,[va,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[16]||(d[16]=s=>i(m)("code17"))},[e("span",xa,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"grid grid-cols-4 gap-2 sm:flex sm:flex-wrap sm:justify-center mt-3 mb-5 sm:space-x-3 rtl:space-x-reverse"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] !outline-none transition duration-300",{"!bg-success text-white":s}])},[t(q,{class:"mb-1"}),n(" Home ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] !outline-none transition duration-300",{"!bg-success text-white":s}])},[t(w,{class:"w-5 h-5 mb-1"}),n(" Profile ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] !outline-none transition duration-300",{"!bg-success text-white":s}])},[t(k,{class:"mb-1"}),n(" Contact ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] !outline-none transition duration-300",{"!bg-success text-white":s}])},[t(j,{class:"w-5 h-5 mb-1"}),n(" Settings ")],2)]),_:1})]),_:1}),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[ga,_a,wa]),_:1}),t(i(r),null,{default:a(()=>[ka]),_:1}),t(i(r),null,{default:a(()=>[qa]),_:1}),t(i(r),null,{default:a(()=>[Ta]),_:1})]),_:1})]),_:1}),i(c).includes("code17")?(u(),b(h,{key:0},{default:a(()=>[ya]),_:1})):p("",!0)]),e("div",ja,[e("div",Pa,[Ca,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[17]||(d[17]=s=>i(m)("code18"))},[e("span",La,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5"},{default:a(()=>[t(i(x),{class:"flex flex-wrap justify-center mt-3 mb-5 space-x-3 rtl:space-x-reverse"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-info text-white":s}])},[t(q,{class:"w-6 h-6"})],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-info text-white":s}])},[t(w,{class:"w-6 h-6"})],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-info text-white":s}])},[t(k,{class:"w-6 h-6"})],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-info text-white":s}])},[t(j)],2)]),_:1})]),_:1}),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Ua,Da,Ga]),_:1}),t(i(r),null,{default:a(()=>[Ma]),_:1}),t(i(r),null,{default:a(()=>[Na]),_:1}),t(i(r),null,{default:a(()=>[Wa]),_:1})]),_:1})]),_:1}),i(c).includes("code18")?(u(),b(h,{key:0},{default:a(()=>[$a]),_:1})):p("",!0)]),e("div",Ea,[e("div",Fa,[Ha,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[18]||(d[18]=s=>i(m)("code19"))},[e("span",Va,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5 flex flex-col sm:flex-row"},{default:a(()=>[e("div",Sa,[t(i(x),{class:"flex flex-col justify-center m-auto space-y-3 w-24"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},[t(q,{class:"mb-1"}),n(" Home ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},[t(w,{class:"w-5 h-5 mb-1"}),n(" Profile ")],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-7 py-3 flex flex-col items-center justify-center rounded-lg bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-success hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},[t(k,{class:"mb-1"}),n(" Contact ")],2)]),_:1})]),_:1})]),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Ia,Ba,Ja]),_:1}),t(i(r),null,{default:a(()=>[Ra]),_:1}),t(i(r),null,{default:a(()=>[Za]),_:1})]),_:1})]),_:1}),i(c).includes("code19")?(u(),b(h,{key:0},{default:a(()=>[Aa]),_:1})):p("",!0)]),e("div",za,[e("div",Ka,[Oa,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[19]||(d[19]=s=>i(m)("code20"))},[e("span",Qa,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5 flex flex-col sm:flex-row"},{default:a(()=>[e("div",Xa,[t(i(x),{class:"flex flex-col justify-center items-center space-y-3"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-info text-white":s}])},[t(q,{class:"w-6 h-6"})],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-info text-white":s}])},[t(w,{class:"w-6 h-6"})],2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["w-16 h-16 flex flex-col items-center justify-center rounded-full bg-[#f1f2f3] dark:bg-[#191e3a] hover:!bg-info hover:text-white hover:shadow-[0_5px_15px_0_rgba(0,0,0,0.30)] transition-all duration-300 !outline-none",{"!bg-info text-white":s}])},[t(k,{class:"w-6 h-6"})],2)]),_:1})]),_:1})]),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[Ya,es,ts]),_:1}),t(i(r),null,{default:a(()=>[is]),_:1}),t(i(r),null,{default:a(()=>[as]),_:1})]),_:1})]),_:1}),i(c).includes("code20")?(u(),b(h,{key:0},{default:a(()=>[ss]),_:1})):p("",!0)]),e("div",os,[e("div",rs,[ls,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[20]||(d[20]=s=>i(m)("code21"))},[e("span",ns,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5 flex flex-col sm:flex-row"},{default:a(()=>[t(i(x),{class:"ltr:pr-4 rtl:pl-4 space-y-2 sm:flex-[0_0_20%] mb-5 sm:mb-0"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},"Messages",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},"Settings",2)]),_:1})]),_:1}),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[ds,us,cs]),_:1}),t(i(r),null,{default:a(()=>[ms]),_:1}),t(i(r),null,{default:a(()=>[bs]),_:1}),t(i(r),null,{default:a(()=>[ps]),_:1})]),_:1})]),_:1}),i(c).includes("code21")?(u(),b(h,{key:0},{default:a(()=>[hs]),_:1})):p("",!0)]),e("div",fs,[e("div",vs,[xs,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:d[21]||(d[21]=s=>i(m)("code22"))},[e("span",gs,[t(f,{class:"me-2"}),n(" Code ")])])]),t(i(v),{as:"div",class:"mb-5 flex flex-col sm:flex-row sm:gap-4"},{default:a(()=>[t(i(x),{class:"space-y-2 sm:flex-[0_0_20%] mb-5 sm:mb-0 sm:order-1"},{default:a(()=>[t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},"Home",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},"Profile",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},"Messages",2)]),_:1}),t(i(o),{as:"template"},{default:a(({selected:s})=>[e("a",{href:"javascript:;",class:l(["p-3.5 py-2 block rounded-md hover:bg-success hover:text-white transition-all duration-300 !outline-none",{"!bg-success text-white":s}])},"Settings",2)]),_:1})]),_:1}),t(i(g),{class:"flex-1 text-sm"},{default:a(()=>[t(i(r),null,{default:a(()=>[_s,ws,ks]),_:1}),t(i(r),null,{default:a(()=>[qs]),_:1}),t(i(r),null,{default:a(()=>[Ts]),_:1}),t(i(r),null,{default:a(()=>[ys]),_:1})]),_:1})]),_:1}),i(c).includes("code22")?(u(),b(h,{key:0},{default:a(()=>[js]),_:1})):p("",!0)])])])]))}});export{Ns as default};