custom hook

This commit is contained in:
jerempy
2023-10-04 13:12:52 -04:00
parent b7d569de98
commit 33e5e74228
7 changed files with 102 additions and 67 deletions

View File

@@ -2,24 +2,19 @@ import { Routes, Route } from 'react-router-dom';
import Navigation from './Navigation';
import Conversation from './conversation/Conversation';
import About from './About';
import { useState } from 'react';
import { ActiveState } from './models/misc';
import { inject } from '@vercel/analytics';
import { useMediaQuery } from './hooks';
inject();
export default function App() {
//TODO : below media query is disjoint from tailwind. Please wire it together.
const [navState, setNavState] = useState<ActiveState>(
window.matchMedia('(min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
);
const { isMobile } = useMediaQuery();
return (
<div className="min-h-full min-w-full">
<Navigation navState={navState} setNavState={setNavState} />
<Navigation />
<div
className={`transition-all duration-200 ${
navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-60' : 'ml-0 md:ml-16'
!isMobile ? 'ml-0 md:ml-72 lg:ml-60' : 'ml-0 md:ml-16'
}`}
>
<Routes>