Merge branch 'refs/heads/main' into app-dir

# Conflicts:
#	components/details/ComboDetails.jsx
#	components/details/FlatgroundTrickDetails.jsx
#	components/details/GrindDetails.jsx
#	components/details/ManualDetails.jsx
#	components/forms/ComboForm.jsx
#	components/forms/FlatgroundTrickForm.jsx
#	components/forms/GrindForm.jsx
#	components/forms/ManualForm.jsx
#	components/forms/ProfileForm.jsx
#	components/stats/Stats.jsx
#	lib/commonUtils.js
#	models/FlatgroundTrick.js
#	models/Grind.js
#	package-lock.json
#	package.json
#	pages/_dashboard.jsx
#	pages/api/combos/search/index.js
#	pages/api/profiles/mine/index.js
#	pages/combos/index.jsx
#	pages/flatgroundtricks/[_id]/edit.jsx
#	pages/flatgroundtricks/_index.jsx
#	pages/grinds/index.jsx
#	pages/manuals/index.jsx
#	pages/profile/index.jsx
#	tailwind.config.js

__tests__/lib/capitalize.test.js

@@ -0,0 +1,10 @@
+import { capitalize } from '../../lib/commonUtils';
+
+describe('capitalize', () => {
+  it('should be able to capitalize one word', () => {
+    expect(capitalize('ollie')).toBe('Ollie');
+  });
+  it('should be able to capitalize multiple words PascalCase style', () => {
+    expect(capitalize('ollie Kickflip treflip', true)).toBe('Ollie Kickflip Treflip');
+  });
+});

__tests__/lib/trickNames.test.js

@@ -29,8 +29,9 @@ describe('Should resolve trick names correctly', () => {
       ${{ stance: fakie, direction: none, rotation: '0', name: heelflip }}                 | ${'Fakie Heelflip'}
       ${{ stance: regular, direction: backside, rotation: '360', name: kickflip }}         | ${'Backside 360 Kickflip'}
       ${{ stance: regular, direction: backside, rotation: '180', name: shove_it }}         | ${'Bigspin'}
-      ${{ stance: regular, direction: backside, rotation: '180', name: shove_it }}         | ${'Bigspin'}
-      ${{ stance: regular, direction: frontside, rotation: '360', name: shove_it }}        | ${'Biggerspin'}
+      ${{ stance: regular, direction: frontside, rotation: '360', name: shove_it }}        | ${'Frontside Biggerspin'}
+      ${{ stance: regular, direction: frontside, rotation: '180', name: shove_it }}        | ${'Frontside Bigspin'}
+      ${{ stance: regular, direction: frontside, rotation: '180', name: varial_heelflip }} | ${'Bigspin Heelflip'}
       ${{ stance: regular, direction: backside, rotation: '180', name: varial_kickflip }}  | ${'Bigspin Kickflip'}
       ${{ stance: regular, direction: backside, rotation: '360', name: varial_kickflip }}  | ${'Biggerflip'}
       ${{ stance: regular, direction: frontside, rotation: '180', name: varial_heelflip }} | ${'Bigspin Heelflip'}

components/common/AddAnotherCheckBox.jsx

@@ -0,0 +1,10 @@
+function AddAnotherCheckBox({ checked, onChange }) {
+  return (
+    <label title="Reset the form after creation">
+      <input type="checkbox" checked={checked} onChange={onChange} name="addAnother" className="h-4 w-4 align-middle" />
+      <span className="ml-2 align-middle">Add another</span>
+    </label>
+  );
+}
+
+export default AddAnotherCheckBox;

components/common/Filters.jsx

@@ -0,0 +1,41 @@
+import { shallowEqual } from '../../lib/commonUtils';
+import { ArrowPathIcon } from '@heroicons/react/20/solid';
+import { useEffect, useRef, useState } from 'react';
+import Accordion from '../../lib/accordion';
+
+function Filters({ filters = {}, onReset, children }) {
+  const [defaultFilters, setDefaultFilters] = useState(undefined);
+  const detailsRef = useRef(null);
+
+  useEffect(() => {
+    if (!defaultFilters) setDefaultFilters(filters);
+
+    if (detailsRef.current) {
+      new Accordion(detailsRef.current);
+    }
+  }, []);
+
+  return (
+    <details ref={detailsRef} className="rounded-lg bg-neutral-50 p-4 shadow-md dark:bg-neutral-800">
+      <summary className="cursor-pointer text-xl font-medium">Filters</summary>
+      <div>
+        {/* Mandatory content </div> for the Accordion component to work */}
+        <hr className="my-4 border-neutral-800 dark:border-neutral-400" />
+        <div className="flex flex-wrap items-center gap-4">
+          {children}
+          {!shallowEqual(filters, defaultFilters) && (
+            <button
+              title="Reset filters"
+              className="ml-auto p-2 transition-transform hover:scale-110 hover:duration-100 active:scale-95"
+              onClick={onReset}
+            >
+              <ArrowPathIcon className="h-6 w-6" />
+            </button>
+          )}
+        </div>
+      </div>
+    </details>
+  );
+}
+
+export default Filters;

components/common/IconLink.jsx

@@ -4,8 +4,14 @@ import utilStyles from '../../styles/utils.module.scss';
 
 const IconLink = ({ href = '', onClick, Icon, title, label, ...props }) => {
   return (
-    <Link className={`${utilStyles.link} group flex`} href={href} onClick={onClick} title={title ? title : 'New'} {...props}>
-      {label && <span>{label}</span>}
+    <Link
+      className="underline-hover group flex items-center"
+      href={href}
+      onClick={onClick}
+      title={title ? title : 'New'}
+      {...props}
+    >
+      {label && <span className="text-nowrap">{label}</span>}
       <Icon className="h-6 w-6 transition-transform duration-300 active:scale-95 group-hover:scale-[120%] group-hover:duration-75" />
     </Link>
   );

components/common/LinkWithArrow.jsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import Link from 'next/link';
-import utilStyles from '../../styles/utils.module.scss';
 
 const LinkWithArrow = ({ label, href = '', onClick }) => {
   return (
     <Link
       href={href}
       onClick={onClick}
-      className={`${utilStyles.link} group relative mx-auto mb-6 flex items-center text-4xl`}
+      className="underline-hover group relative mx-auto mb-6 flex items-center text-4xl"
     >
       <h1 className="text-4xl">{label}</h1>
-      <span className="absolute left-full w-6 text-right text-2xl transition-[width] group-hover:w-8">→</span>
+      <span className="absolute w-[calc(100%+2rem)] text-right text-3xl transition-[width] group-hover:w-[calc(100%+2.5rem)]">
+        →
+      </span>
     </Link>
   );
 };

components/common/loader/loader.jsx → components/common/Loader.jsx

@@ -1,4 +1,4 @@
-export default function Loader({ className }) {
+function Loader({ className }) {
   return (
     <svg
       className={`${className} h-16 w-16 animate-spin dark:text-white`}
@@ -11,3 +11,5 @@ export default function Loader({ className }) {
     </svg>
   );
 }
+
+export default Loader;

components/common/RenderSafeDate.jsx

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { formatDate } from '../../lib/commonUtils';
+
+function RenderSafeDate({ date, options = {} }) {
+  const [dateToRender, setDateToRender] = useState(null);
+
+  useEffect(() => {
+    setDateToRender(formatDate(date, options));
+  }, []);
+
+  if (!dateToRender) return null;
+
+  return <time>{dateToRender}</time>;
+}
+
+export default RenderSafeDate;

components/common/Show.jsx

@@ -0,0 +1,9 @@
+function Show({ if: condition, children }) {
+  if (condition) {
+    return children;
+  }
+
+  return null;
+}
+
+export default Show;