docs(bot): 🔥 style pre

packages/docs/src/assets/styles/global.css

@@ -5,7 +5,7 @@
  * the styles in here will be applied to the Document, without any sort of CSS scoping.
  *
  */
-
+@import 'prism.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -36,15 +36,15 @@
     }
 
     .slot p code {
-        @apply text-xs font-mono bg-stone-100 dark:bg-slate-600 dark:text-white text-red-500 p-1 rounded-sm;
+        @apply text-xs font-mono bg-stone-100 dark:bg-slate-600 dark:text-white text-red-500 p-1 rounded;
     }
 
     .slot pre {
-        @apply w-full  flex my-2;
+        @apply w-full flex my-2;
     }
 
     .slot pre code {
-        @apply p-3 rounded-sm min-w-[32rem]   w-fit bg-gray-800 dark:bg-slate-800  text-gray-100 text-xs;
+        @apply p-3 rounded md:w-full max-w-screen-md overflow-x-auto w-fit bg-gray-800 dark:bg-slate-800 ease-in duration-75 text-gray-100 text-xs shadow-xl;
     }
 
     .slot a {
@@ -56,7 +56,7 @@
     }
 
     .slot img {
-        @apply rounded-sm drop-shadow-2xl;
+        @apply rounded drop-shadow-2xl;
     }
 
     .slot ul {

packages/docs/src/assets/styles/prism.css

@@ -0,0 +1,86 @@
+.token.tag,
+.token.class-name,
+.token.selector,
+.token.selector .class,
+.token.selector.class,
+.token.function {
+    @apply text-pink-400;
+}
+
+.token.attr-name,
+.token.keyword,
+.token.rule,
+.token.pseudo-class,
+.token.important {
+    @apply text-slate-300;
+}
+
+.token.attr-value,
+.token.class,
+.token.string {
+    @apply text-sky-300;
+}
+
+.token.punctuation,
+.token.attr-equals {
+    @apply text-slate-500;
+}
+
+.token.attr-value * {
+    @apply text-sky-300;
+}
+
+.token.attr-value .attr-equals,
+.token.attr-value .attr-equals + .punctuation,
+.token.attr-value > .punctuation:last-child {
+    @apply text-slate-500;
+}
+
+.token.property {
+    @apply text-sky-300;
+}
+
+.token.unit {
+    @apply text-teal-200;
+}
+
+.language-shell .token:not(.comment),
+.token.atapply .token:not(.rule):not(.important):not(.punctuation) {
+    color: inherit;
+}
+
+.language-css .token.function {
+    @apply text-teal-200;
+}
+
+.token.comment,
+.token.module,
+.token.operator,
+.token.combinator {
+    @apply text-slate-400;
+}
+
+.token.unchanged {
+    @apply block;
+}
+
+.token.deleted,
+.token.inserted {
+    @apply block relative -mx-9 pl-8 pr-5 border-l-4 before:absolute before:top-0 before:left-4;
+}
+
+.token.inserted {
+    @apply bg-teal-400/[0.15] border-teal-400 before:content-['+'] before:text-teal-400;
+}
+
+.token.deleted {
+    @apply bg-rose-500/[0.15] border-rose-400 before:content-['-'] before:text-rose-400;
+}
+
+pre[class^='language-diff-'] {
+    @apply flex px-9;
+}
+
+pre[class^='language-diff-'] > code {
+    @apply flex-none min-w-full;
+}

packages/docs/src/routes/docs/index.mdx

@@ -26,7 +26,7 @@ npm create bot-whatsapp@latest
 
 <div class="my-4  ">
     <video
-        class="rounded drop-shadow-xl w-full max-w-lg rounded  "
+        class="rounded drop-shadow-xl w-full md:w-full max-w-screen-md"
         height="100%"
         autoplay
         loop