ReflectsLight/al-quran.reflectslight.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Head.tsx

Browse source
This commit is contained in:
0x1eef 2024-03-25 01:12:31 -03:00
parent be2bfefdfb
commit cfd59c97fa
6 changed files with 56 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/css/_layout.scss
View file

@ -87,6 +87,9 @@ body .root .content.en {
/* Arabic-specific rules */
body .root .content.theme.ar {
header {
h1 {
font-size: xx-large;
}
nav, div {
direction: ltr;
.react-select.language {

35
src/js/components/Head.tsx Normal file
View file

@ -0,0 +1,35 @@
import React from "react";
import type { ReactNode } from "react";
import { ThemeSelect } from "~/components/ThemeSelect";
import { LanguageSelect } from "~/components/LanguageSelect";
import * as Quran from "~/lib/Quran";
import classNames from "classnames";
import { Theme } from "~/hooks/useTheme";
type Props = {
locale: Quran.Locale;
theme: string;
setTheme: (t: Theme) => void;
children: ReactNode
};
export function Head({locale, theme, setTheme, children}: Props) {
return (
<header
className={classNames("flex flex-col", {
"h-20": locale !== "ar",
"h-24": locale === "ar",
})}
>
<h1 className="flex justify-center p-0 m-0 mt-2">
<a className="no-underline" href={`/${locale}/`}>
{children}
</a>
</h1>
<nav className="flex flex-row justify-between">
<LanguageSelect locale={locale} />
<ThemeSelect theme={theme} setTheme={setTheme} />
</nav>
</header>
)
}

20
src/js/components/LanguageSelect.tsx
View file

@ -1,28 +1,24 @@
import React from "react";
import { Select } from "~/components/Select";
interface Props {
type Props = {
locale: string;
path?: string;
}
export function LanguageSelect({ locale, path = "" }: Props) {
export function LanguageSelect({ locale }: Props) {
return (
<Select
value={locale}
className="language"
onChange={(el: JSX.Element) => {
const locale = el.props.value;
const newPath = (() => {
if (path.endsWith("/") || path.length === 0) {
return path;
} else {
return `${path}/`;
}
})();
const newLocale = el.props.value;
const content = document.querySelector(".content.theme");
const path = location.pathname.replace(
new RegExp(`^/${locale}/`),
`/${newLocale}/`
);
content.classList.add("invisible");
location.replace(`/${locale}/${newPath}`);
location.replace(path);
}}
>
<option value="ar">

2
src/js/components/Stream.tsx
View file

@ -30,7 +30,7 @@ export function Stream({
<ul
lang={locale}
className={classNames(
"body stream scroll-y list-none p-0 h-5/6",
"body stream scroll-y list-none p-0 m-0 mt-1 h-5/6",
...className,
)}
ref={ref}

24
src/js/components/SurahIndex.tsx
View file

@ -1,10 +1,9 @@
import React, { useRef, useState, useEffect } from "react";
import * as Quran from "~/lib/Quran";
import { useTheme } from "~/hooks/useTheme";
import { ThemeSelect } from "~/components/ThemeSelect";
import { LanguageSelect } from "~/components/LanguageSelect";
import { formatNumber, TFunction } from "~/lib/i18n";
import { RightArrow } from "~/components/Icon";
import { Head } from "~/components/Head";
import { SurahIndexFilter } from "~/components/SurahIndexFilter";
import classNames from "classnames";
@ -35,23 +34,10 @@ export function SurahIndex({ locale, surahs, t }: Props) {
locale,
)}
>
<header
className={classNames("flex flex-col", {
"h-20": locale !== "ar",
"h-22": locale === "ar",
})}
>
<h1 className="flex justify-center p-0 mt-2">
<a className="no-underline" href={`/${locale}/`}>
{t(locale, "TheNobleQuran")}
</a>
</h1>
<nav className="flex flex-row justify-between">
<LanguageSelect locale={locale} />
<ThemeSelect theme={theme} setTheme={setTheme} />
</nav>
</header>
<ul className="body index scroll-y list-none p-0 h-5/6">
<Head locale={locale} theme={theme} setTheme={setTheme} >
{t(locale, "TheNobleQuran")}
</Head>
<ul className="body index scroll-y list-none p-0 m-0 h-5/6">
{index.map((surah, key) => (
<li className="surah" key={key}>
<a

30
src/js/components/SurahStream.tsx
View file

@ -4,9 +4,8 @@ import * as Quran from "~/lib/Quran";
import { useTheme } from "~/hooks/useTheme";
import { Timer } from "~/components/Timer";
import { Stream } from "~/components/Stream";
import { ThemeSelect } from "~/components/ThemeSelect";
import { LanguageSelect } from "~/components/LanguageSelect";
import { AudioControl } from "~/components/AudioControl";
import { Head } from "~/components/Head";
import {
PlayIcon,
PauseIcon,
@ -73,30 +72,9 @@ export function SurahStream({ node, recitations, locale, paused, t }: Props) {
)}
>
{readyToRender && (
<header
className={classNames("flex flex-col", {
"h-24": locale !== "ar",
"h-26": locale === "ar",
})}
>
<h1 className="flex justify-center p-0 mt-2">
<a className="no-underline color-primary" href={`/${locale}/`}>
{t(locale, "TheNobleQuran")}
</a>
</h1>
<nav className="flex flex-row justify-between">
<LanguageSelect locale={locale} path={surah.slug} />
<ThemeSelect theme={theme} setTheme={setTheme} />
</nav>
<div className="flex justify-between surah-name">
<span className="localized-name" lang={locale}>
{surah.localizedName}
</span>
<span className="transliterated-name" lang="en">
{surah.transliteratedName}
</span>
</div>
</header>
<Head locale={locale} theme={theme} setTheme={setTheme}>
{t(locale, "TheNobleQuran")}
</Head>
)}
{readyToRender && (
<Stream