prettier: maxwidth = 90

.prettierrc

@@ -3,6 +3,6 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": false,
-  "printWidth": 80,
+  "printWidth": 90,
   "arrowParens": "avoid"
 }

src/js/components/Select.tsx

@@ -27,10 +27,7 @@ const findOption = (value: string, children: JSX.Element[]) => {
   }
 };
 
-const createOption = (
-  e: ChangeEvent,
-  children: JSX.Element[],
-): SelectOption => {
+const createOption = (e: ChangeEvent, children: JSX.Element[]): SelectOption => {
   const { target } = e;
   const value = target.getAttribute("data-value")!;
   return {
@@ -70,11 +67,7 @@ export function Select({ value, children, onChange, className }: Props) {
       <ul hidden={!open}>
         {children.map((option: JSX.Element, key: number) => {
           return (
-            <li
-              key={key}
-              data-value={option.props.value}
-              onClick={selectOption}
-            >
+            <li key={key} data-value={option.props.value} onClick={selectOption}>
               {option.props.children}
             </li>
           );

src/js/components/Stream.tsx

@@ -31,8 +31,7 @@ export function Stream({
       <li key={ayah.id} className="ayah fade">
         <span className="surah-id ayah-id">
           {t(locale, "surah")} {formatNumber(surah.id, locale)}
-          {t(locale, "comma")} {t(locale, "ayah")}{" "}
-          {formatNumber(ayah.id, locale)}
+          {t(locale, "comma")} {t(locale, "ayah")} {formatNumber(ayah.id, locale)}
         </span>
         <p>{ayah.text}</p>
       </li>

src/js/pages/surah/index.tsx

@@ -61,7 +61,5 @@ function SurahIndex({ locale, surahs, t }: Props) {
     },
   );
 
-  ReactDOM.createRoot(root).render(
-    <SurahIndex locale={locale} surahs={surahs} t={t} />,
-  );
+  ReactDOM.createRoot(root).render(<SurahIndex locale={locale} surahs={surahs} t={t} />);
 })();

src/js/pages/surah/stream.tsx

@@ -136,12 +136,7 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) {
           t={t}
         />
       )}
-      <div
-        className={classNames(
-          { "justify-end": readyToRender && endOfStream },
-          "row",
-        )}
-      >
+      <div className={classNames({ "justify-end": readyToRender && endOfStream }, "row")}>
         {readyToRender && isPaused && !endOfStream && (
           <PlayShape onClick={() => setIsPaused(false)} />
         )}
@@ -165,9 +160,7 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) {
             isStalled={isStalled}
           />
         )}
-        {readyToRender && endOfStream && (
-          <RefreshShape onClick={() => setStream([])} />
-        )}
+        {readyToRender && endOfStream && <RefreshShape onClick={() => setStream([])} />}
       </div>
       <audio src={src} ref={audioRef} />
     </div>

src/js/pages/surah/stream/loader.ts

@@ -6,8 +6,7 @@ import * as Quran from "lib/Quran";
   const progressBar: HTMLProgressElement = parent.querySelector("progress")!;
   const progressNumber: HTMLSpanElement = parent.querySelector(".percentage")!;
   const inlineStyle: HTMLStyleElement = document.querySelector(".css.postman")!;
-  const { locale, surahId } =
-    document.querySelector<HTMLElement>(".root")!.dataset;
+  const { locale, surahId } = document.querySelector<HTMLElement>(".root")!.dataset;
   const reciters = JSON.parse(
     document.querySelector<HTMLElement>(".json.reciters")!.innerText,
   );