hesan-aminiloo

import { Colors } from "./colors";

import styles from "./JSExports.module.scss";

export const JSExports = () => {
  return (
    <div>
      <p>
        Used scss and css and JS to access these colors, kinda complicated but
        useful AF

hesan-aminiloo

import variables from "./JSExports.module.scss";

export const Colors = variables;

hesan-aminiloo

@import './variables';

$primary-color: var(--primary-color);
$secondary-color: var(--secondary-color);

.boxes {
  display: flex;
  justify-content: space-around;

  &__box {

hesan-aminiloo

$primary-color: #3498db;
$secondary-color: #e74c3c;

:export {
  primaryColor: $primary-color;
  secondaryColor: $secondary-color;
}

hesan-aminiloo

@import '../../styles/helpers';

.long-list {
  overflow: auto;
  display: flex;

  @include no-scrollbar();

  &__item {
    min-width: 150px;

hesan-aminiloo

$colors: (
  primary: #4038FF,
  secondary: #6C7689,
  success: #0AAF60,
  warning: #FFBE21,
  error: #EA5B5B,
);

@mixin badge-color($bg-color) {
  background-color: $bg-color;

hesan-aminiloo

@mixin no-scrollbar() {
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-sizing: border-box;

  // Hide scrollbar for Chrome, Safari and Opera
  &::-webkit-scrollbar {
    display: none;
  }
}

hesan-aminiloo

@use 'sass:color';

@function hex-to-rgba($hex, $alpha: 1) {
  $red: red($hex);
  $green: green($hex);
  $blue: blue($hex);
  
  @return rgba($red, $green, $blue, $alpha);
}

hesan-aminiloo

const heavyFn = () => {
  let total = 0
  for (let i = 0; i <= 10000000000; i++) {
    total += i
  }
  return total
}

console.time('test-fn')
heavyFn()

hesan-aminiloo

const App = () => {
  
  const handleRenderComponent = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
    console.log(`Component ${id} took ${actualDuration} to render on ${phase}`);
  }
  
  return (
    <Profiler id="heavy" onRender={handleRenderComponent}>
      <SomeHeavyComponent />
    </Profiler>