When adding UI components, you should be able to group them in two root domains:
pages- page scope based componentsshared- components that are shared all across the app
Folder naming rules:
kebab-casefolder name indicates domain name
| export interface ICodeEditorProps { | |
| children: ReactNode; | |
| className?: string; | |
| path?: string; | |
| code?: string; | |
| isLive?: boolean; | |
| title?: string; | |
| lang?: Language; | |
| } |
| import React, { createContext, useState, useMemo, useContext, cloneElement, isValidElement, FC } from 'react'; | |
| import useConstant from '../../../hooks/useConstant'; | |
| type TabStateContext = [number, React.Dispatch<React.SetStateAction<number>>]; | |
| interface ITabsProps { | |
| state?: TabStateContext; | |
| } |
| // utils/env.ts | |
| export const isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement); | |
| export const isServer = !isBrowser; |
| import Link from 'next/link' | |
| import Head from 'next/head' | |
| export default class Layout extends React.Component { | |
| componentDidMount() { | |
| console.log('mount'); | |
| } | |
| componentWillUnmount() { | |
| console.log('unmount'); | |
| } |
| $(document).ready(function() { | |
| // Product slider | |
| var $sliderFilters = $('.js-products-slider-filter > li'); | |
| var $productsSliderNavigation = $('.js-products-slider-nav'); | |
| var $productsSliderPreview = $('.js-products-slider-preview'); | |
| initSliders(); | |
| function initSliders() { |