<div class="application-header">
  <div class="inner-container">
    <div class="title">

<div class="application-header">
  <div class="inner-container">
    <div class="title">

<div class="application-header">
  <div class="header__inner-container">
    <div class="header__title">

<div class="application-header">
  <div class="header__inner-container">
    <div class="header__title">

.application-header
  .application-header__inner
    header__title

.application-header
  .application-header__inner
    header__title

export const useTypewriter = (text, delay = 500) => {
  const [display, setDisplay] = useState("");
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timeoutId = setInterval(() => {
      if (index < text.length) {
        setDisplay((previous) => previous + text[index]);
        setIndex((previous) => previous + 1);
      }
    }, delay);

    return () => clearTimeout(timeoutId);
  }, [text, delay, index]); // If I remove index here it'll print out the first letter over and over

  return display;
};

export const useTypewriter = (text, delay = 500) => {
  const [display, setDisplay] = useState("");
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timeoutId = setInterval(() => {
      if (index < text.length) {
        setDisplay((previous) => previous + text[index]);
        setIndex((previous) => previous + 1);
      }
    }, delay);

    return () => clearTimeout(timeoutId);
  }, [text, delay, index]); // If I remove index here it'll print out the first letter over and over

  return display;
};

/**
 * Filters an array of messages
 * @param messages An array of `Message`
 * @param pivot
 * @returns An array of `Message` that are written by a user, contain text, and hav a specific reaction
 */
const getQualifyingMessages = async (
  channel: TextChannel,
  pivot?: string,
): Promise<Message[]> => {
  // there's more but unimportant...

  return messages.filter((message) => {
    return (
      isTextMessage(message) &&
      !isBotMessage(message) &&
      !!getMessageReaction(message) // If message contains specified reaction
    );
  });
};

/**
 * Filters an array of messages
 * @param messages An array of `Message`
 * @param pivot
 * @returns An array of `Message` that are written by a user, contain text, and hav a specific reaction
 */
const getQualifyingMessages = async (
  channel: TextChannel,
  pivot?: string,
): Promise<Message[]> => {
  // there's more but unimportant...

  return messages.filter((message) => {
    return (
      isTextMessage(message) &&
      !isBotMessage(message) &&
      !!getMessageReaction(message) // If message contains specified reaction
    );
  });
};

/**
 * Get specific reaction on a message
 * @param message A text message
 * @param filter The name of the reaction or emoji to filter for
 * @returns A specific reaction or null if one isn't found
 */
const getMessageReaction = (
  message: Message,
  filter: string = "💹",
): MessageReaction | null => {
  const [...all] = message.reactions.cache.values();

  const find = all.filter((reaction) => {
    const name = reaction.emoji.name ?? "";
    return filter.includes(name);
  });

  return find.pop() ?? null;
};

/**
 * Get specific reaction on a message
 * @param message A text message
 * @param filter The name of the reaction or emoji to filter for
 * @returns A specific reaction or null if one isn't found
 */
const getMessageReaction = (
  message: Message,
  filter: string = "💹",
): MessageReaction | null => {
  const [...all] = message.reactions.cache.values();

  const find = all.filter((reaction) => {
    const name = reaction.emoji.name ?? "";
    return filter.includes(name);
  });

  return find.pop() ?? null;
};

async function fetchNine(manager) {
  const result = []; // this will combine the results of each fetch call
  let pivot = null;
  while (result.length < 9) {
      // fetch a pack
      // if no pivot is available, pass undefined so the "before" parameter is ignored
      const pack = await manager.fetch({limit: 3, before: pivot?.id});
      // move the starting point to the current pack
      pivot = pack.last();
      // add the pack to the result
      pack.forEach(entry => result.push(entry));
  }
  return result;
}

async function fetchNine(manager) {
  const result = []; // this will combine the results of each fetch call
  let pivot = null;
  while (result.length < 9) {
      // fetch a pack
      // if no pivot is available, pass undefined so the "before" parameter is ignored
      const pack = await manager.fetch({limit: 3, before: pivot?.id});
      // move the starting point to the current pack
      pivot = pack.last();
      // add the pack to the result
      pack.forEach(entry => result.push(entry));
  }
  return result;
}

>scss
->shared/
-->_forms.scss

>scss
->shared/
-->_forms.scss

@use "@shared/forms" as f;

.form {
  @extend f.%form; // error!

@use "@shared/forms" as f;

.form {
  @extend f.%form; // error!

@use "@shared/forms" as f;

.form {
  @include f.form; // success!

@use "@shared/forms" as f;

.form {
  @include f.form; // success!

@mixin commerce-layout-padding() {
  padding: t.$sp-xs;
}

@mixin commerce-layout-padding() {
  padding: t.$sp-xs;
}

type Emoji = {
  emoji: string;
  count: number;
};

export default class User {
  constructor(
    public server: string,
    public username: string,
    public emojis: Emoji[],
  ) {}
}

type Emoji = {
  emoji: string;
  count: number;
};

export default class User {
  constructor(
    public server: string,
    public username: string,
    public emojis: Emoji[],
  ) {}
}

// psuedocode
const serverUsers = users.filter((user) => {
  return user.server === server;
});

users.sort((a, b) => {
  const userACount = a.emojis.find((emoji) => {
    return (emoji.emoji === 'chart').count;
  });

  const userBCount = b.emojis.find((emoji) => {
    return (emoji.emoji === 'chart').count;
  });

  return userACount > userBCount; // I know this won't work lol gotta think about it
});

// psuedocode
const serverUsers = users.filter((user) => {
  return user.server === server;
});

users.sort((a, b) => {
  const userACount = a.emojis.find((emoji) => {
    return (emoji.emoji === 'chart').count;
  });

  const userBCount = b.emojis.find((emoji) => {
    return (emoji.emoji === 'chart').count;
  });

  return userACount > userBCount; // I know this won't work lol gotta think about it
});