marceloglacial

# GitHub Copilot Instructions for React and Next.js Projects

This file provides guidelines for GitHub Copilot to ensure consistent, clean, and performant code generation for React and Next.js applications.

## General Principles

- **Clean Code:** Prioritize **readability, maintainability, and reusability**.
- **Conciseness:** Aim for concise and expressive code.
- **Descriptive Naming:** Use clear and descriptive names for variables, functions, components, and files (e.g., `getUserProfile`, `ProductCard`, `useAuth`).
- **DRY (Don't Repeat Yourself):** Extract reusable logic into functions, custom hooks, or components.

marceloglacial

// https://stackoverflow.com/questions/40774697/how-can-i-group-an-array-of-objects-by-key
const groupArrayBy = (arr, prop) => {
    return arr.reduce(function (groups, item) {
        const val = item[prop]
        groups[val] = groups[val] || []
        groups[val].push(item)
        return groups
    }, {})
}

marceloglacial

const boookList = [
  {
    id: 1,
    category: "action"
  },
  {
    id: 2,
    category: "fiction"
  },
  {

marceloglacial

curl -sSL https://squizlabs.github.io/PHP_CodeSniffer/phpcbf.phar -o phpcbf.phar
chmod a+x phpcbf.phar 
sudo mv phpcbf.phar /usr/local/bin/phpcbf

marceloglacial

<h1>Progress Bars (with tabs)</h1>
<p>According text value</p>
<div class="tab-container">
  <div class="tab active">
    <h2 class='tab-title'>Tab 1</h2>
    <ul class="container">
      <li class="loading"><span class="progress">10%</span></li>
      <li class="loading"><span class="progress">20%</span></li>
      <li class="loading"><span class="progress">30%</span></li>
      <li class="loading"><span class="progress">40%</span></li>

marceloglacial

Multi-layered Parallax Illustration

Tutorial: https://medium.com/@PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27

Forked from Patryk Zabielski's Pen Multi-layered Parallax Illustration .

A Pen by Marcelo Glacial on CodePen.

License.