refactoring

src/components/ColorSchemeToggle/ColorSchemeToggle.module.css

@@ -0,0 +1,32 @@
+.container {
+  @mixin dark {
+    background-color: var(--mantine-color-dark-7);
+    box-shadow: 0 2px 4px var(--mantine-color-dark-6),
+    0 4px 24px var(--mantine-color-dark-6);
+  }
+  @mixin light {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16),
+    0 4px 24px rgba(0, 0, 0, 0.16);
+  }
+}
+
+.icon {
+  width: rem(18px);
+  height: rem(18px);
+}
+
+.light {
+  display: block;
+}
+
+.dark {
+  display: none;
+}
+
+:global([data-mantine-color-scheme='dark']) .light {
+  display: none;
+}
+
+:global([data-mantine-color-scheme='dark']) .dark {
+  display: block;
+}

src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import classNames from "classnames";
+import {
+    ActionIcon,
+    useComputedColorScheme,
+    useMantineColorScheme,
+} from "@mantine/core";
+import style from "@/components/ColorSchemeToggle/ColorSchemeToggle.module.css";
+
+export function ColorSchemeToggle() {
+    const { setColorScheme } = useMantineColorScheme();
+    const computedColorScheme = useComputedColorScheme(undefined, {
+        getInitialValueInEffect: true,
+    });
+
+    const toggleColorScheme = () => {
+        setColorScheme(computedColorScheme === "light" ? "dark" : "light");
+    };
+
+    return (
+        <ActionIcon
+            onClick={toggleColorScheme}
+            variant="default"
+            size="xl"
+            radius="lg"
+            aria-label="Toggle color scheme"
+            className={style.container}>
+            <IconSun
+                className={classNames(style.icon, style.light)}
+                stroke={1.5}
+            />
+            <IconMoon
+                className={classNames(style.icon, style.dark)}
+                stroke={1.5}
+            />
+        </ActionIcon>
+    );
+}

src/components/Footer/Footer.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import { Group, Text } from "@mantine/core";
+
+const Footer = () => {
+    return (
+        <Group
+            justify={"flex-end"}
+            align={"flex-end"}
+            h={"7vh"}
+            p={"md"}>
+            <Group gap={"xl"}>
+                <Link
+                    href={"#"}
+                    style={{
+                        textDecoration: "none",
+                        color: "inherit",
+                        fontSize: 14,
+                    }}>
+                    Помощь
+                </Link>
+                <Group gap={5}>
+                    <Text style={{ fontSize: 18 }}>©</Text>
+                    <Text style={{ fontSize: 14 }}>2025, LogiDex</Text>
+                </Group>
+            </Group>
+        </Group>
+    );
+};
+
+export default Footer;

src/components/Header/Header.tsx

@@ -0,0 +1,15 @@
+import { Group } from "@mantine/core";
+import { ColorSchemeToggle } from "@/components/ColorSchemeToggle/ColorSchemeToggle";
+
+const Header = () => {
+    return (
+        <Group
+            justify="flex-end"
+            h="7vh"
+            px="md">
+            <ColorSchemeToggle />
+        </Group>
+    );
+};
+
+export default Header;

src/components/LoginForm/LoginForm.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { FC, useState } from "react";
+import { redirect } from "next/navigation";
+import { Button, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import PhoneInput from "@/components/PhoneInput/PhoneInput";
+
+type LoginForm = {
+    phoneNumber: string;
+};
+
+type Props = {
+    isCreatingId?: boolean;
+};
+
+const LoginForm: FC<Props> = ({ isCreatingId = false }) => {
+    const [phoneMask, setPhoneMask] = useState<string>("");
+    const form = useForm<LoginForm>({
+        initialValues: {
+            phoneNumber: "",
+        },
+        validate: {
+            phoneNumber: phoneNumber =>
+                phoneNumber.length !== phoneMask.length &&
+                "Введите корректный номер",
+        },
+    });
+
+    const handleSubmit = (values: LoginForm) => {
+        console.log(values);
+        console.log(phoneMask);
+
+        redirect("/verify-phone");
+    };
+
+    const navigateToCreateId = () => redirect("/create-id");
+
+    const navigateToLogin = () => redirect("/");
+
+    return (
+        <form onSubmit={form.onSubmit(handleSubmit)}>
+            <Stack>
+                <PhoneInput
+                    {...form.getInputProps("phoneNumber")}
+                    setPhoneMask={setPhoneMask}
+                />
+                {isCreatingId ? (
+                    <>
+                        <Button
+                            variant={"filled"}
+                            type={"submit"}>
+                            Создать аккаунт
+                        </Button>
+                        <Button
+                            variant={"outline"}
+                            onClick={() => navigateToLogin()}>
+                            Уже есть LogiDex ID
+                        </Button>
+                    </>
+                ) : (
+                    <>
+                        <Button
+                            variant={"filled"}
+                            type={"submit"}>
+                            Войти
+                        </Button>
+                        <Button
+                            variant={"outline"}
+                            onClick={() => navigateToCreateId()}>
+                            Создать LogiDex ID
+                        </Button>
+                    </>
+                )}
+            </Stack>
+        </form>
+    );
+};
+
+export default LoginForm;

src/components/Logo/Logo.tsx

@@ -0,0 +1,44 @@
+import { Center, Divider, Image, Stack, Title } from "@mantine/core";
+import { myColor } from "@/theme";
+
+type Props = {
+    title?: string;
+};
+
+const Logo = ({ title }: Props) => {
+    return (
+        <Stack
+            align="center"
+            gap={0}>
+            <Image
+                src="/favicon.svg"
+                alt="LogiDex Logo"
+                w={80}
+            />
+            <Title
+                ta={"center"}
+                order={2}
+                mt={"md"}>
+                LogiDex
+            </Title>
+            {title && (
+                <Divider
+                    w={"100%"}
+                    my={"lg"}
+                />
+            )}
+            {title && (
+                <Center>
+                    <Title
+                        order={4}
+                        mb={"lg"}
+                        style={{ color: myColor[6] }}>
+                        {title}
+                    </Title>
+                </Center>
+            )}
+        </Stack>
+    );
+};
+
+export default Logo;

src/components/MotionWrapper/MotionWrapper.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { motion, MotionProps } from 'framer-motion';
+import { ReactNode } from 'react';
+
+interface MotionWrapperProps extends MotionProps {
+  children: ReactNode;
+}
+
+export function MotionWrapper({ children, ...props }: MotionWrapperProps) {
+  return <motion.div {...props}>{children}</motion.div>;
+}

src/components/PageBlock/PageItem.module.css

@@ -0,0 +1,41 @@
+.container {
+    border-radius: rem(40);
+    background-color: white;
+    @mixin dark {
+        background-color: var(--mantine-color-dark-8);
+        box-shadow: 5px 5px 30px 1px var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16);
+    }
+    padding: rem(35);
+}
+
+.container-full-height {
+    min-height: calc(100vh - (rem(20) * 2));
+}
+
+.container-full-height-fixed {
+    height: calc(100vh - (rem(20) * 2));
+}
+
+.container-no-border-radius {
+    border-radius: 0 !important;
+}
+
+.container-full-screen-mobile {
+    @media (max-width: 48em) {
+        min-height: 100vh;
+        height: 100vh;
+        width: 100vw;
+        border-radius: 0 !important;
+        padding: rem(40) rem(20) rem(20);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 100;
+        overflow-y: auto;
+    }
+}

src/components/PageBlock/PageItem.tsx

@@ -0,0 +1,46 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import classNames from "classnames";
+import { MotionWrapper } from "@/components/MotionWrapper/MotionWrapper";
+import styles from "./PageItem.module.css";
+
+type Props = {
+    children: ReactNode;
+    style?: CSSProperties;
+    fullHeight?: boolean;
+    fullHeightFixed?: boolean;
+    noBorderRadius?: boolean;
+    fullScreenMobile?: boolean;
+};
+
+const PageItem: FC<Props> = ({
+    children,
+    style,
+    fullHeight = false,
+    fullHeightFixed = false,
+    noBorderRadius = false,
+    fullScreenMobile = false,
+}) => {
+    const pageItemBody = (
+        <div
+            style={style}
+            className={classNames(
+                styles.container,
+                fullHeight && styles["container-full-height"],
+                fullHeightFixed && styles["container-full-height-fixed"],
+                noBorderRadius && styles["container-no-border-radius"],
+                fullScreenMobile && styles["container-full-screen-mobile"]
+            )}>
+            {children}
+        </div>
+    );
+
+    return (
+        <MotionWrapper
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.6 }}>
+            {pageItemBody}
+        </MotionWrapper>
+    );
+};
+export default PageItem;

src/components/PageContainer/PageContainer.module.css

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: rem(10);
+    min-height: 86vh;
+    background-color: transparent;
+}

src/components/PageContainer/PageContainer.tsx

@@ -0,0 +1,24 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import styles from "./PageContainer.module.css";
+
+type Props = {
+    children: ReactNode;
+    style?: CSSProperties;
+    center?: boolean;
+};
+
+const PageContainer: FC<Props> = ({ children, style, center }) => {
+    return (
+        <div
+            className={styles.container}
+            style={{
+                ...style,
+                alignItems: center ? "center" : "",
+                justifyContent: center ? "center" : "",
+            }}>
+            {children}
+        </div>
+    );
+};
+
+export default PageContainer;

src/components/PhoneInput/PhoneInput.module.css

@@ -0,0 +1,16 @@
+.country-select {
+    font-size: medium;
+    @mixin light {
+        color: black;
+    }
+    @mixin dark {
+        color: white;
+    }
+}
+
+.country-search input {
+    @mixin dark {
+        background-color: var(--mantine-color-dark-6);
+    }
+    border-radius: 15px;
+}

src/components/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { IMaskInput } from "react-imask";
+import {
+    InputBase,
+    type InputBaseProps,
+    type PolymorphicComponentProps,
+} from "@mantine/core";
+import CountrySelect from "@/components/PhoneInput/components/CountrySelect";
+import { Country } from "@/components/PhoneInput/types";
+import getInitialDataFromValue from "@/components/PhoneInput/utils/getInitialDataFromValue";
+import getPhoneMask from "@/components/PhoneInput/utils/getPhoneMask";
+
+type AdditionalProps = {
+    onChange: (value: string | null) => void;
+    setPhoneMask: (mask: string) => void;
+    initialCountryCode?: string;
+};
+
+type InputProps = Omit<
+    PolymorphicComponentProps<typeof IMaskInput, InputBaseProps>,
+    "onChange" | "defaultValue"
+>;
+
+export type Props = AdditionalProps & InputProps;
+
+const PhoneInput = ({
+    initialCountryCode = "RU",
+    value: _value,
+    onChange: _onChange,
+    setPhoneMask: _setPhoneMask,
+    ...props
+}: Props) => {
+    const [mask, setMask] = useState<string>("");
+    const initialData = useRef(getInitialDataFromValue(initialCountryCode));
+    const [country, setCountry] = useState<Country>(
+        initialData.current.country
+    );
+    const [value, setValue] = useState<string>("");
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [dropdownWidth, setDropdownWidth] = useState<number>(300);
+
+    const lastNotifiedValue = useRef<string | null>(value ?? "");
+
+    const onChange = (numberWithoutCode: string) => {
+        setValue(numberWithoutCode);
+        _onChange(`+${country.callingCode} ${numberWithoutCode}`);
+    };
+
+    const setPhoneMask = (phoneMask: string, country: Country) => {
+        setMask(phoneMask);
+        _setPhoneMask(`+${country.callingCode} ${phoneMask}`);
+    };
+
+    useEffect(() => {
+        setPhoneMask(initialData.current.format, country);
+    }, [initialData.current.format]);
+
+    useEffect(() => {
+        const localValue = value.trim();
+        if (localValue !== lastNotifiedValue.current) {
+            lastNotifiedValue.current = localValue;
+            onChange(localValue);
+        }
+    }, [country.code, value]);
+
+    const { readOnly, disabled } = props;
+    const leftSectionWidth = 90;
+
+    useEffect(() => {
+        if (!inputRef.current?.offsetWidth) return;
+        setDropdownWidth(inputRef.current?.offsetWidth);
+    }, [inputRef.current?.offsetWidth]);
+
+    return (
+        <InputBase
+            {...props}
+            component={IMaskInput}
+            inputRef={inputRef}
+            leftSection={
+                <CountrySelect
+                    disabled={disabled || readOnly}
+                    country={country}
+                    setCountry={country => {
+                        setCountry(country);
+                        setPhoneMask(getPhoneMask(country.code), country);
+                        setValue("");
+                        if (inputRef.current) {
+                            inputRef.current.focus();
+                        }
+                    }}
+                    leftSectionWidth={leftSectionWidth}
+                    inputWidth={dropdownWidth}
+                />
+            }
+            leftSectionWidth={leftSectionWidth}
+            styles={{
+                input: {
+                    fontSize: 17,
+                    paddingLeft: `calc(${leftSectionWidth}px + var(--mantine-spacing-sm))`,
+                },
+                section: {
+                    borderRight:
+                        "1px solid var(--mantine-color-default-border)",
+                },
+            }}
+            inputMode={"numeric"}
+            mask={mask}
+            value={value}
+            onAccept={value => setValue(value)}
+        />
+    );
+};
+
+export default PhoneInput;

src/components/PhoneInput/components/CountrySelect.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState } from "react";
+import {
+    ActionIcon,
+    Box,
+    CheckIcon,
+    Combobox,
+    Flex,
+    Group,
+    ScrollArea,
+    Text,
+    useCombobox,
+} from "@mantine/core";
+import style from "@/components/PhoneInput/PhoneInput.module.css";
+import { Country } from "@/components/PhoneInput/types";
+import countryOptionsDataMap from "@/components/PhoneInput/utils/countryOptionsDataMap";
+
+const countryOptionsData = Object.values(countryOptionsDataMap);
+
+type Props = {
+    country: Country;
+    setCountry: (country: Country) => void;
+    disabled: boolean | undefined;
+    leftSectionWidth: number;
+    inputWidth?: number;
+};
+
+const CountrySelect = ({
+    country,
+    setCountry,
+    disabled,
+    leftSectionWidth,
+    inputWidth,
+}: Props) => {
+    const [search, setSearch] = useState("");
+
+    const selectedRef = useRef<HTMLDivElement>(null);
+
+    const combobox = useCombobox({
+        onDropdownClose: () => {
+            combobox.resetSelectedOption();
+            setSearch("");
+        },
+
+        onDropdownOpen: () => {
+            combobox.focusSearchInput();
+            setTimeout(() => {
+                selectedRef.current?.scrollIntoView({
+                    behavior: "instant",
+                    block: "center",
+                });
+            }, 0);
+        },
+    });
+
+    const options = countryOptionsData
+        .filter(item =>
+            item.name.toLowerCase().includes(search.toLowerCase().trim())
+        )
+        .map(item => (
+            <Combobox.Option
+                ref={item.code === country.code ? selectedRef : undefined}
+                value={item.code}
+                key={item.code}>
+                <Group
+                    justify={"space-between"}
+                    wrap={"nowrap"}
+                    align={"center"}>
+                    <Text>
+                        {item.emoji} +{item.callingCode} | {item.name}
+                    </Text>
+                    {item.code === country.code && (
+                        <Box>
+                            <CheckIcon size={14} />
+                        </Box>
+                    )}
+                </Group>
+            </Combobox.Option>
+        ));
+
+    useEffect(() => {
+        if (search) {
+            combobox.selectFirstOption();
+        }
+    }, [search]);
+
+    return (
+        <Combobox
+            store={combobox}
+            position={"bottom-start"}
+            transitionProps={{ duration: 200, transition: "fade-down" }}
+            styles={{
+                dropdown: {
+                    borderRadius: "15px",
+                    minWidth: `${inputWidth}px`,
+                },
+            }}
+            onOptionSubmit={val => {
+                setCountry(countryOptionsDataMap[val]);
+                combobox.closeDropdown();
+            }}>
+            <Combobox.Target withAriaAttributes={false}>
+                <ActionIcon
+                    variant={"transparent"}
+                    onClick={() => combobox.toggleDropdown()}
+                    size={"lg"}
+                    tabIndex={-1}
+                    disabled={disabled}
+                    w={leftSectionWidth}>
+                    <Flex
+                        align={"center"}
+                        ml={15}
+                        w={"100%"}
+                        className={style["country-select"]}>
+                        <span>
+                            {country.emoji} +{country.callingCode}
+                        </span>
+                    </Flex>
+                </ActionIcon>
+            </Combobox.Target>
+
+            <Combobox.Dropdown>
+                <Combobox.Search
+                    value={search}
+                    onChange={event => setSearch(event.currentTarget.value)}
+                    placeholder="Поиск..."
+                    className={style["country-search"]}
+                    size={"md"}
+                />
+                <Combobox.Options>
+                    <ScrollArea.Autosize
+                        mah={250}
+                        type="scroll">
+                        {options.length > 0 ? (
+                            options
+                        ) : (
+                            <Combobox.Empty>Нет данных</Combobox.Empty>
+                        )}
+                    </ScrollArea.Autosize>
+                </Combobox.Options>
+            </Combobox.Dropdown>
+        </Combobox>
+    );
+};
+
+export default CountrySelect;

src/components/PhoneInput/types.ts

@@ -0,0 +1,8 @@
+import type { CountryCallingCode, CountryCode } from "libphonenumber-js";
+
+export type Country = {
+    code: CountryCode;
+    name: string;
+    emoji: string;
+    callingCode: CountryCallingCode;
+};

src/components/PhoneInput/utils/countryOptionsDataMap.ts

@@ -0,0 +1,33 @@
+import countries from "i18n-iso-countries";
+import ru from "i18n-iso-countries/langs/ru.json";
+import { type CountryCode, getCountries } from "libphonenumber-js";
+import getFlagEmoji from "@/components/PhoneInput/utils/getFlagEmoji";
+import { getCountryCallingCode } from "libphonenumber-js/max";
+import { Country } from "@/components/PhoneInput/types";
+
+countries.registerLocale(ru);
+
+const libIsoCountries = countries.getNames("ru", { select: "official" });
+const libPhoneNumberCountries = getCountries();
+
+const countryOptionsDataMap = Object.fromEntries(
+    libPhoneNumberCountries
+        .map(code => {
+            const name = libIsoCountries[code];
+            const emoji = getFlagEmoji(code);
+            if (!name || !emoji) return null;
+            const callingCode = getCountryCallingCode(code);
+            return [
+                code,
+                {
+                    code,
+                    name,
+                    emoji,
+                    callingCode,
+                },
+            ] as [CountryCode, Country];
+        })
+        .filter(o => !!o)
+);
+
+export default countryOptionsDataMap;

src/components/PhoneInput/utils/getFlagEmoji.ts

@@ -0,0 +1,8 @@
+export default function getFlagEmoji(countryCode: string) {
+    const FLAG_CODE_OFFSET = 127397;
+    const codePoints = countryCode
+        .toUpperCase()
+        .split("")
+        .map(char => FLAG_CODE_OFFSET + char.charCodeAt(0));
+    return String.fromCodePoint(...codePoints);
+}

src/components/PhoneInput/utils/getInitialDataFromValue.ts

@@ -0,0 +1,20 @@
+import { CountryCode } from "libphonenumber-js";
+import { Country } from "@/components/PhoneInput/types";
+import countryOptionsDataMap from "@/components/PhoneInput/utils/countryOptionsDataMap";
+import getPhoneMask from "@/components/PhoneInput/utils/getPhoneMask";
+
+type InitialDataFromValue = {
+    country: Country;
+    format: ReturnType<typeof getPhoneMask>;
+};
+
+const getInitialDataFromValue = (
+    initialCountryCode: string
+): InitialDataFromValue => {
+    return {
+        country: countryOptionsDataMap[initialCountryCode],
+        format: getPhoneMask(initialCountryCode as CountryCode),
+    };
+};
+
+export default getInitialDataFromValue;

src/components/PhoneInput/utils/getPhoneMask.ts

@@ -0,0 +1,14 @@
+import { CountryCode, getExampleNumber } from "libphonenumber-js";
+import examples from "libphonenumber-js/examples.mobile.json";
+import { getCountryCallingCode } from "libphonenumber-js/max";
+
+export default function getPhoneMask(countryCode: CountryCode) {
+    let example = getExampleNumber(
+        countryCode,
+        examples
+    )!.formatInternational();
+    const callingCode = getCountryCallingCode(countryCode);
+    const callingCodeLen = callingCode.length + 1;
+    example = example.slice(callingCodeLen).trim();
+    return example.replace(/\d/g, "0");
+}

src/components/TitleWithLines/TitleWithLines.tsx

@@ -0,0 +1,19 @@
+import { Divider, Flex, Text } from "@mantine/core";
+
+type Props = {
+    title: string;
+}
+
+const TitleWithLines = ({ title }: Props) => {
+    return (
+        <Flex
+            align="center"
+            gap="xs">
+            <Divider style={{ flex: 1 }} />
+            <Text>{title}</Text>
+            <Divider style={{ flex: 1 }} />
+        </Flex>
+    );
+};
+
+export default TitleWithLines;