Merge pull request #23 from alnavarrop99/style/responsive

Feat: create responsive design

src/components/ui/scroll-area.stories.tsx

@@ -1,18 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 
 const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+  (_, i, a) => `v1.2.0-beta.${a.length - i} Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.`
 )
 function Basic( { ...props }: React.ComponentProps< typeof ScrollArea > ) {
   return (
      <ScrollArea {...props} className="h-72 w-48 rounded-md border">
+      <ScrollBar orientation='horizontal'  />
       <div className="p-4">
         <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
         {tags.map((tag) => (
           <>
-            <div key={tag} className="text-sm">
+            <div key={tag} className="text-sm w-80">
               {tag}
             </div>
             <Separator className="my-2" />

src/lib/hook/useScreens.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import { screens } from 'tailwindcss/defaultTheme'
+
+/* eslint-disable-next-line */
+type TScreen = 'sm' | 'md' | 'lg'
+
+/* eslint-disable-next-line */
+type TUseScreens = () => TScreen
+
+/* eslint-disable-next-line */
+export const useScreen: TUseScreens = () => {
+  const [theme, setTheme] = useState<TScreen>('sm')
+  useEffect(() => {
+    const onChange = () => {
+      if (window.innerWidth >= +screens.md?.replace(/px/g, '')) {
+        setTheme('md')
+      }
+
+      if (window.innerWidth >= +screens.lg?.replace(/px/g, '')) {
+        setTheme('lg')
+      }
+    }
+    window.addEventListener('resize', onChange)
+    onChange()
+
+    return () => {
+      window.removeEventListener('resize', onChange)
+    }
+  }, [])
+
+  return theme
+}

src/lib/route.ts

@@ -24,7 +24,7 @@ export const translate = () => {
     '/report': { name: 'Reportes', validation: true, icon: icons.BookA },
     '/notification': {
       name: 'Notificaciones',
-      validation: false,
+      validation: true,
       icon: icons.Notebook,
     },
     '/update': { name: 'Editar', validation: false, icon: icons.Upload },

src/main.tsx

@@ -9,9 +9,9 @@ import {
 import { routeTree } from './routeTree.gen'
 
 async function enableMocking() {
-  if (!+import.meta.env.VITE_MSW || !import.meta.env.DEV) {
-    return
-  }
+  // if (!+import.meta.env.VITE_MSW || !import.meta.env.DEV) {
+  //   return
+  // }
   const { worker } = await import('@/mocks/config')
   return worker.start()
 }