Feat/blog

.eslintrc.cjs

@@ -40,6 +40,7 @@ module.exports = {
     '@stylistic/comma-dangle': [ 'warn', 'never' ],
     '@stylistic/no-multi-spaces': 'error',
     '@stylistic/max-statements-per-line': [ 'warn', { 'max': 5 } ],
+    '@typescript-eslint/consistent-type-imports': 'warn',
 
     '@typescript-eslint/no-unused-vars': 'warn',
     'linebreak-style': [ 'error', 'unix' ],

.gitignore

@@ -31,3 +31,15 @@ yarn-error.log*
 
 # vercel
 .vercel
+/.idea/codeStyles/codeStyleConfig.xml
+/.idea/aws.xml
+/.idea/dbnavigator.xml
+/.idea/git_toolbox_blame.xml
+/.idea/material_theme_project_new.xml
+/.idea/codeStyles/Project.xml
+/.idea/inspectionProfiles/Project_Default.xml
+/.idea/vcs.xml
+/.idea/workspace.xml
+/.idea/stylesheetLinters/stylelint.xml
+/.idea/prettier.xml
+/.idea/jsLinters/eslint.xml

components/Banner.tsx

@@ -1,5 +1,4 @@
 import { XMarkIcon } from '@heroicons/react/20/solid'
-import { motion } from 'framer-motion'
 import { useTranslation } from 'next-i18next'
 
 import { useAppDispatch } from '@/helpers/store'
@@ -8,31 +7,33 @@ import useWindowSize from '@/hooks/useWindowSize'
 import { useAppSelector } from '@/store/hooks'
 import { selectShowBanner, setShowBanner } from '@/store/uiSlice'
 
-export default function Banner({ ...props }) {
+export default function Banner() {
   const dispatch = useAppDispatch()
   const shouldShowBanner = useAppSelector(selectShowBanner)
   const { currency } = useCurrency()
   const { t } = useTranslation('banner')
-  const { isMobile } = useWindowSize()
+  const {
+    windowSize: { width }
+  } = useWindowSize()
+  const isMobile = width < 420 // Blaze it
 
   if (!shouldShowBanner) return null
 
   return (
-    <motion.div {...props} className="
+    <div
+      className="
+    relative 
     bg-gray-50 
-    w-full
+    isolate 
     flex 
-    flex-1
     justify-between 
     items-center 
     sm:flex-row 
     gap-2 
-    z-12
     overflow-hidden 
     p-2 
-    fixed 
-    bottom-0
-    sm:px-3.5">
+    sm:px-3.5"
+    >
       {!isMobile && <div className="w-6 h-6 md:w-12 md:h-12" />}
       <div className="flex flex-wrap gap-x-4 gap-y-2">
         <div className="flex justify-center items-center sm:flex-row gap-2">
@@ -61,7 +62,8 @@ export default function Banner({ ...props }) {
             {t('description')}
           </p>
 
-          <div className="
+          <div
+            className="
           bg-gray-900 
           uppercase 
           cursor-pointer 
@@ -83,18 +85,19 @@ export default function Banner({ ...props }) {
           focus-visible:outline-offset-2 
           focus-visible:outline-gray-900
           shadow-sm 
-          ">
+          "
+          >
             50 {currency}
           </div>
         </div>
       </div>
       <button
         onClick={() => dispatch(setShowBanner(false))}
         type="button"
-        className="-m-3 p-3 focus-visible:outline-offset-[-4px]"
+        className="-m-3 p-3 bg-transparent focus-visible:outline-offset-[-4px]"
       >
         <XMarkIcon className="sm:w-7 w-6 text-gray-900" aria-hidden="true" />
       </button>
-    </motion.div>
+    </div>
   )
 }

components/Container.tsx

@@ -1,20 +1,16 @@
-
-import Banner from './Banner'
 import Footer from './Footer'
-import Navigation from './navigation/Navigation'
+import Header from './Header'
 
 interface ContainerProps {
-  className?: string
-  children: JSX.Element | JSX.Element[]
+  className?: string;
+  children: JSX.Element | JSX.Element[];
 }
 
-export default function Container({ className,children }: ContainerProps) {
+export default function Container({ children }: ContainerProps) {
   return (
-    <div>
-      <Navigation />
-      <div className={`${className ?? 'md:mt-44 mt-12'}`}>{children}</div>
-      <Banner />
-
+    <div className="flex flex-1 flex-col justify-between min-h-screen">
+      <Header />
+      {children}
       <Footer />
     </div>
   )