niikkiin

import type { AppProps } from 'next/app';
import { ThemeProvider } from 'next-themes';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

// styles
import 'tailwindcss/tailwind.css';
import '@/styles/tailwind.css';
import '@/styles/globals.scss';

niikkiin

import { withRouter } from 'next/router';
import Link from 'next/link';
import React, { Children } from 'react';

const ActiveLink = ({ router, children, ...props }) => {
  const child = Children.only(children);

  let className = child.props.className || '';
  if (router.pathname === props.href && props.activeClassName) {
    className = `${className} ${props.activeClassName}`.trim();

niikkiin

/*
SECTION PLACEHOLDERS MIXINS
Usage:
    input {
        @include placeholder {
          //STYLES here
        }
    }
Output
    input::-webkit-input-placeholder {

niikkiin

/* Usage:
  .element {
    @include prefix(transform, rotate(42deg), webkit ms);
  }
Output

  .element {
    -webkit-transform: rotate(42deg);
    -ms-transform: rotate(42deg);
    transform: rotate(42deg);

niikkiin

// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;

niikkiin

// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;

niikkiin

//App.js
import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import "./assets/main.css";
import Home from "./pages/Home";
import ThemeContext from "./utilities/ThemeContext";
function App() {
return (
<ThemeContext>
 <BrowserRouter>

niikkiin

import React from "react";

// router
import { BrowserRouter as Router, Switch } from "react-router-dom";

// routes
import AuthRoute from "routes/AuthRoute";

// pages
import Login from "pages/auth/Login";

niikkiin

import React from 'react';

// import the global styles
import { GlobalStyles } from 'utilities/styles/global.styles';

function App() {
  return (
    <>
      <GlobalStyles />
      Hello carrots

niikkiin

import React, {useState} from 'react';

// styled components
import {
  
} from './items.styles';

// components
import { DashboardContainer } from 'components/dashboard-container/dashboard-container.component';
import { Table } from 'components/table/table.component';