aaroniker

import { defineConfig } from '@pandacss/dev';
import { fluidTypography } from './fluidTypography';

declare module '@pandacss/dev' {
  interface ThemeConfig {
    fluidFont: Record<string, FluidFontProps>;
  }
}

const config = defineConfig({

aaroniker

import { defineUtility } from '@pandacss/dev';

type Unit = 'px' | 'rem' | 'em';
type VwUnit = 'vw' | 'vh' | '%';

interface FluidFontConfig {
  defaultUnit: Unit;
  defaultVwUnit: VwUnit;
  defaultMinVw: number;
  defaultMaxVw: number;

aaroniker

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'prettier'
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],

aaroniker

// Add element to markup
<div id="resize">
  <svg viewBox="0 0 20 20">
    <path d="...icon..." />
  </svg>
</div>

// Styling
#resize {
  position: absolute;

aaroniker

const useArrayState = <T>(initialState: T[] = []) => {
  const [state, setState] = useState<T[]>(initialState);

  const add = (newValue: T) => {
    setState((currentState) => [...currentState, newValue]);
  };

  const remove = (index: number) => {
    setState((currentState) => {
      const newState = [...currentState];

aaroniker

$breakpoints: (
    xs: 576px,
    sm: 768px,
    md: 992px,
    lg: 1200px
);

@mixin min($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media (min-width: map-get($breakpoints, $breakpoint)) {