feat: responsividade

erikfig · Sep 12, 2024 · efa87a2 · efa87a2
1 parent ea337b2
commit efa87a2
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 24 deletions.
diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx
@@ -3,9 +3,10 @@ import { createElement, HTMLAttributes, ReactNode } from 'react'
 export type TypographyProps = {
   type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'display' | undefined,
   children: ReactNode,
+  ellipsis?: boolean
 } & HTMLAttributes<HTMLDivElement>
 
-export const Typography = ({ children, type = 'p', ...props }: TypographyProps) => {
+export const Typography = ({ children, type = 'p', ellipsis, ...props }: TypographyProps) => {
   let localType: string = type
 
   const typeClasses = {
@@ -26,6 +27,10 @@ export const Typography = ({ children, type = 'p', ...props }: TypographyProps)
     className.push(props.className)
   }
 
+  if (ellipsis) {
+    className.push('text-nowrap text-ellipsis overflow-hidden')
+  }
+
   if (type === 'display') {
     localType = 'div'
   }

diff --git a/src/components/card/card-status.tsx b/src/components/card/card-status.tsx
@@ -15,12 +15,12 @@ const icons = {
 }
 
 export const CardStatus = ({ title, message, status }: CardStatusProps) => (
-  <Card className={`flex flex-row justify-between !py-4 !bg-${status} text-white`}>
+  <Card className={`flex flex-row justify-between !py-4 px-4 md:px-8 !bg-${status} text-white`}>
     <div>
       <Typography type="h5">{title}</Typography>
       <Typography type="h2" className="font-bold">{message}</Typography>
     </div>
-    <div className="chart">
+    <div className="hidden md:block chart">
       <span className="material-symbols-outlined !text-6xl">{icons[status]}</span>
     </div>
   </Card>

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
@@ -6,7 +6,7 @@ import { Typography } from '../Typography'
 type DataTableProps = { title?: string } & TableProps & PaginationProps
 
 export const DataTable = ({ title, columns, rows, perPage, current, total, onChange, isLoading }: DataTableProps) => (
-  <Card className="col-span-8 !p-0">
+  <Card className="col-span-8 !p-0 !overflow-auto">
     {title &&
       <Typography type='h3' className='p-4'>{title}</Typography>
     }

diff --git a/src/components/form/toggle/index.tsx b/src/components/form/toggle/index.tsx
@@ -9,7 +9,7 @@ type ToggleProps = {
 export const Toggle = ({ checked, onClick, children }: ToggleProps) => (
   <label className="inline-flex items-center me-5 cursor-pointer" >
     <input type="checkbox" className="sr-only peer" checked={checked} onClick={onClick} />
-    <div className="relative w-11 h-6 bg-neutral-400 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
+    <div className="relative min-w-[44px] h-6 bg-neutral-400 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
     <span className="ms-3 text-sm font-medium">{children}</span>
   </label>
 )
diff --git a/src/layouts/default/default.layout.tsx b/src/layouts/default/default.layout.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { Rounded } from '../../components/rounded'
 import { useDarkMode } from '../../contexts/dark-mode'
 import './style.css'
@@ -14,6 +14,7 @@ type DefaultLayoutProps = {
 }
 
 export const DefaultLayout = ({ title }: DefaultLayoutProps) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
   const { isDarkMode, toggleDarkMode } = useDarkMode()
 
   const menuItems = RoutesConfig
@@ -39,16 +40,16 @@ export const DefaultLayout = ({ title }: DefaultLayoutProps) => {
 
   const darkModeHandler = useCallback(() => {
     toggleDarkMode()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDarkMode])
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <div className='grid h-screen w-screen grid-cols-wrapper bg-grey dark:bg-dark dark:text-light'>
-        <section className='bg-grey dark:bg-dark fixed z-10 w-screen sm:w-auto sm:relative grid grid-rows-nav h-screen overflow-y-auto'>
+      <div className='grid h-screen w-screen lg:grid-cols-wrapper bg-grey dark:bg-dark dark:text-light'>
+        <section className={`bg-grey dark:bg-dark fixed z-10 left-0 w-screen lg:w-auto lg:relative grid grid-rows-nav h-screen overflow-y-auto transition-all ${!isMenuOpen && '-ml-[100%] lg:ml-0'}`}>
           <div className='m-6'>
 
-            <div className='absolute top-6 right-6'>
+            <div className='block lg:hidden absolute top-6 right-6 cursor-pointer' onClick={() => setIsMenuOpen(!isMenuOpen)}>
               <span className="material-symbols-outlined">close</span>
             </div>
 
@@ -90,14 +91,17 @@ export const DefaultLayout = ({ title }: DefaultLayoutProps) => {
         </section>
         <main className="relative z-0 overflow-x-hidden">
 
-          <header className='flex justify-between items-center h-12 mt-6 ml-6 mr-6 mb-2'>
-            <Typography type="h1" className='!text-2xl'>
+          <header className='flex gap-4 justify-between items-center h-12 mt-6 ml-6 mr-6 mb-2'>
+            <Typography ellipsis type="h1" className='!text-2xl'>
+              <div className='block lg:hidden cursor-pointer float-left mr-4' onClick={() => setIsMenuOpen(true)}>
+                <span className="material-symbols-outlined">menu</span>
+              </div>
               {title}
             </Typography>
             <Typography type="display" className='flex items-center gap-6'>
 
               <Toggle checked={isDarkMode} onClick={darkModeHandler}>
-                <span className="material-symbols-outlined">{isDarkMode ? 'brightness_4' : 'brightness_7'}</span> Dark Mode
+                <span className="material-symbols-outlined">{isDarkMode ? 'brightness_4' : 'brightness_7'}</span> <span className="hidden md:inline-flex">Dark Mode</span>
               </Toggle>
 
             </Typography>

diff --git a/src/pages/forms.tsx b/src/pages/forms.tsx
@@ -49,7 +49,7 @@ export const Forms = () => {
           />
         </div>
 
-        <div className="grid grid-cols-2 gap-6">
+        <div className="grid md:grid-cols-2 gap-6">
           <Input
             name="input-password"
             label="Password"
@@ -65,7 +65,7 @@ export const Forms = () => {
           />
         </div>
 
-        <div className="grid grid-cols-3 gap-6">
+        <div className="grid md:grid-cols-3 gap-6">
           <Input
             name="input-text-checkbox"
             label="Checkbox field"
@@ -121,7 +121,7 @@ export const Forms = () => {
           error
         />
 
-        <div className="grid grid-cols-2 gap-6">
+        <div className="grid md:grid-cols-2 gap-6">
           <Input
             name="input-text-select"
             label="Select"

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -36,7 +36,7 @@ export const Home = () => {
 
   return (
     <>
-      <div className="grid grid-cols-3">
+      <div className="grid xl:grid-cols-3">
         <Card className="flex flex-row justify-between !py-4 items-center">
           <div>
             <Typography type="h5">Likes (30 days)</Typography>
@@ -68,29 +68,31 @@ export const Home = () => {
         </Card>
       </div>
 
-      <div className="grid grid-cols-4">
+      <div className="grid grid-cols-2 xl:grid-cols-4">
         <CardStatus title="Error Card" message="Error Message" status="danger" />
         <CardStatus title="Warning Card" message="Warning Message" status="warning" />
         <CardStatus title="Success Card" message="Success Message" status="success" />
         <CardStatus title="Info Card" message="Info Message" status="info" />
       </div>
 
-      <div className="grid grid-cols-12">
-        <Card className="col-span-4">
+      <div className="grid xl:grid-cols-12">
+        <Card className="xl:col-span-4">
           <Typography type='h3'>Radial Chart</Typography>
-          <Radial />
+          <div className="flex h-full justify-center items-center">
+            <Radial />
+          </div>
         </Card>
 
-        <Card className="col-span-8">
+        <Card className="xl:col-span-8">
           <Typography type='h3'>Column Chart</Typography>
           <Bar />
         </Card>
       </div>
 
-      <div className="grid grid-cols-12">
+      <div className="grid xl:grid-cols-12">
         <DataTableAsync title='Last Users' query={query} columns={columns} onChange={(p) => setPage(p)} />
 
-        <Card className="col-span-4 !bg-transparent">
+        <Card className="xl:col-span-4 !bg-transparent">
           <CardBackground src="/programmer.jpeg" className="bg-dark/80 text-white">
             <Typography type="h2" className='mb-4'>Erik Figueiredo</Typography>
             <Typography>Desenvolvedor FullStack Sênior com mais de 15 anos de experiência, especializado em Node.js, TypeScript e PHP.</Typography>