Feat/word definition

public/locales/de/definition-page.json

@@ -0,0 +1,6 @@
+{
+	"title": "Alle Definitionen",
+	"addDefinition": "Definition hinzufügen",
+	"emptyDefinitionMessage": "No definitions",
+	"relatedExamples": "Related examples"
+}

public/locales/de/popularity.json

@@ -0,0 +1,6 @@
+{
+	"popularity": "Popularität",
+	"high": "hoch",
+	"medium": "durchschnitt",
+	"low": "niedrig"
+}

public/locales/de/word-profile.json

@@ -8,6 +8,7 @@
 	"allAssociations": "Alle Verbände",
 	"definitions": "Definitionen",
 	"allDefinitions": "Alle Definitionen",
+	"relatedExamples": "Verwandte Beispiele",
 	"examples": "Beispiele",
 	"allExamples": "Alle Beispiele",
 	"forms": "Wortformen",

public/locales/en/definition-page.json

@@ -0,0 +1,6 @@
+{
+	"title": "All Definitions",
+	"addDefinition": "Add Definition",
+	"emptyDefinitionMessage": "No definitions",
+	"relatedExamples": "Related examples"
+}

public/locales/en/popularity.json

@@ -0,0 +1,6 @@
+{
+	"popularity": "Popularity",
+	"high": "high",
+	"medium": "medium",
+	"low": "low"
+}

public/locales/en/word-profile.json

@@ -8,6 +8,7 @@
 	"allAssociations": "All associations",
 	"definitions": "Definitions",
 	"allDefinitions": "All definitions",
+	"relatedExamples": "Related examples",
 	"examples": "Examples",
 	"allExamples": "All examples",
 	"forms": "Word forms",

public/locales/ru/definition-page.json

@@ -0,0 +1,9 @@
+{
+	"title_one": "{{count}} определение",
+	"title_few": "{{count}} определения",
+	"title_many": "{{count}} определений",
+	"title_other": "{{count}} определения",
+	"addDefinition": "Добавить определение",
+	"emptyDefinitionMessage": "Нет определений",
+	"relatedExamples": "связанные примеры"
+}

public/locales/ru/popularity.json

@@ -0,0 +1,6 @@
+{
+	"popularity": "Популярность",
+	"high": "высокая",
+	"medium": "средняя",
+	"low": "низкая"
+}

public/locales/ru/word-profile.json

@@ -8,6 +8,7 @@
 	"allAssociations": "Все ассоциации",
 	"definitions": "Определения",
 	"allDefinitions": "Все определения",
+	"relatedExamples": "Связанные примеры",
 	"examples": "Примеры",
 	"allExamples": "Все примеры",
 	"forms": "Формы слова",

src/0_app/App.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable react-refresh/only-export-components */
 import { Theme } from '@radix-ui/themes';
 import { ThemeProvider, withProviders } from './provider';
-import { Routing } from '../1_pages';
-import { themeSelector } from '../4_entities/theme';
-import { useAppSelector } from '../5_shared/model';
+import { Routing } from '@pages/index';
+import { themeSelector } from '@entities/theme';
+import { useAppSelector } from '@shared/model';
 
+// eslint-disable-next-line react-refresh/only-export-components
 function App() {
 	const { theme } = useAppSelector(themeSelector);
 
@@ -17,4 +17,5 @@ function App() {
 	);
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export default withProviders(<App />);

src/1_pages/Definitions/DefinitionsPage.module.scss

@@ -0,0 +1,21 @@
+@import '@styles/colors';
+@import '@styles/mixins/font';
+
+.container {
+	padding-top: 37px;
+}
+
+h1 {
+	@include font-source-sans(34px, $dark, 400);
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 25px;
+}
+
+.word {
+	margin-bottom: 40px;
+}

src/1_pages/Definitions/DefinitionsPage.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { Button } from '@shared/ui';
+import { wordApi } from '@entities/word/api/wordApi';
+import { TDefinition } from '@entities/word/model/types';
+import { WordPageStatus } from '@entities/word/ui';
+import { DefinitionsList } from '@widgets/Definitions';
+import SVGIconDefinitions from '@shared/assets/icons/sections/definitions.svg?react';
+import SVGIconPlus from '@shared/assets/icons/actions/plus.svg?react';
+import styles from './DefinitionsPage.module.scss';
+
+const DefinitionPage = () => {
+	const { t } = useTranslation('definition-page');
+	const { slugWord: wordId } = useParams();
+	const [definitions, setDefinitions] = useState<TDefinition[] | null>([]);
+
+	useEffect(() => {
+		if (!wordId) return;
+		wordApi.getAllDefinitions(wordId).then((data: TDefinition[]) => setDefinitions(data));
+	}, [wordId]);
+
+	if (!definitions?.length) {
+		return (
+			<WordPageStatus title={t('emptyDefinitionMessage')} icon={<SVGIconDefinitions />}>
+				<Button size="small">
+					<SVGIconPlus />
+					{t('addDefinition')}
+				</Button>
+				<Button size="small">Тренировать</Button>
+			</WordPageStatus>
+		);
+	}
+
+	return (
+		<div className={styles.container}>
+			<WordPageStatus
+				title={t('title', { count: definitions?.length })}
+				icon={<SVGIconDefinitions />}
+			>
+				<Button theme={'transparent'} size="small">
+					<SVGIconPlus />
+					{t('addDefinition')}
+				</Button>
+				<Button size="small">Тренировать</Button>
+			</WordPageStatus>
+
+			{definitions?.length && <DefinitionsList items={definitions} />}
+		</div>
+	);
+};
+
+export default DefinitionPage;

src/1_pages/Definitions/index.ts

@@ -0,0 +1 @@
+export { default } from './DefinitionsPage';

src/1_pages/Word/Word.tsx

@@ -1,16 +1,36 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { IWord } from '@entities/word/model/types';
+import { wordApi } from '@entities/word/api/wordApi';
+import { DefinitionsWidget } from '@widgets/Definitions';
 import WordInfo from '@widgets/WordMainInfo/WordInfo';
-import WordCollection from '@widgets/WordCollection';
-import Associations from '@widgets/Associations';
 import Synonyms from '@widgets/SynonymsAntonyms/Synonyms';
 import Antonyms from '@widgets/SynonymsAntonyms/Antonyms';
+import Associations from '@widgets/Associations';
+import WordCollection from '@widgets/WordCollection';
 import styles from './Word.module.scss';
 
 const Word = () => {
+	const { slugWord: wordId } = useParams();
+	const [word, setWord] = useState<IWord | null>(null);
+
+	useEffect(() => {
+		if (!wordId) return;
+		wordApi
+			.getWordById(wordId)
+			.then((data: IWord) =>
+				setWord((prevState) => (prevState ? { ...prevState, ...data } : data))
+			);
+	}, [wordId]);
+
 	return (
 		<div className={styles.container}>
 			<WordInfo />
 			<WordCollection />
 			<Associations />
+			{word?.definitions && wordId && (
+				<DefinitionsWidget count={'10'} items={word?.definitions} wordId={wordId} />
+			)}
 			<Synonyms />
 			<Antonyms />
 		</div>

src/1_pages/index.tsx

@@ -1,20 +1,22 @@
 import { lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import MainLayout from '@widgets/MainLayout/MainLayout';
 import {
 	ABOUT_ROUTE,
+	ALL_DEFINITIONS,
 	COLLECT_ROUTE,
 	EXERCISES_ROUTE,
 	FAVOR_ROUTE,
 	LANGS_ROUTE,
 	MAIN_ROUTE,
 	VOCAB_ROUTE,
 	WORD_ROUTE,
-} from '../5_shared/lib/routes';
+} from '@shared/lib/routes';
+import MainLayout from '@widgets/MainLayout/MainLayout';
 
 const Vocabulary = lazy(() => import('@pages/Vocabulary'));
 const Word = lazy(() => import('@pages/Word'));
-const NotFoundPage = lazy(() => import('@/1_pages/NotFoundPage/NotFoundPage'));
+const NotFoundPage = lazy(() => import('@pages/NotFoundPage/NotFoundPage'));
+const DefinitionsPage = lazy(() => import('@pages/Definitions'));
 
 export const Routing = () => {
 	return (
@@ -28,6 +30,7 @@ export const Routing = () => {
 					<Route path={LANGS_ROUTE} element={<>Languages</>} />
 					<Route path={EXERCISES_ROUTE} element={<>Exercises</>} />
 					<Route path={WORD_ROUTE} element={<Word />} />
+					<Route path={WORD_ROUTE + ALL_DEFINITIONS} element={<DefinitionsPage />} />
 					<Route path={ABOUT_ROUTE} element={<>About</>} />
 					<Route path="*" element={<NotFoundPage />} />
 				</Route>

src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss

@@ -0,0 +1,42 @@
+@use '@styles/colors';
+@import '@styles/mixins/font';
+
+.definition {
+	margin-bottom: 1.6rem;
+}
+
+.inner {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 2.1rem;
+}
+
+.index {
+	@include font-source-sans(2rem, $neutral-text-middle-color, 500, 1.5);
+	margin: 0;
+}
+
+.content {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 0.7rem;
+	margin: 0;
+	@include font-source-sans(1rem, $neutral-text-main-color, 500, 1.25);
+}
+
+.copy {
+	margin: 0;
+}
+
+.translateTitle {
+	color: $neutrals-600;
+}
+
+.translate {
+	flex-grow: 1;
+	font-size: 1rem;
+	font-weight: 400;
+	line-height: 1.25;
+}

src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx

@@ -0,0 +1,41 @@
+import { Examples } from './elements/Examples';
+import { TDefinition } from '@entities/word/model/types';
+import { CopyText, Popularity, ShadowBlock } from '@shared/ui';
+import styles from './DefinitionItem.module.scss';
+
+type TProps = {
+	item: TDefinition;
+	index: number;
+};
+
+export const DefinitionItem = ({ item, index }: TProps) => {
+	const { text, popularity, translation, examples } = item;
+
+	return (
+		<li className={styles.definition}>
+			<ShadowBlock bgColor="dark">
+				<div className={styles.inner}>
+					<p className={styles.index}>{index}</p>
+					<p className={styles.content}>
+						{text}
+						{popularity && <Popularity popularity={popularity} />}
+					</p>
+					<p className={styles.copy}>
+						<CopyText text={text} />
+					</p>
+				</div>
+				{translation && (
+					<div className={styles.inner}>
+						<p className={styles.translateTitle}>Перевод</p>
+						<p className={styles.translate}>{translation}</p>
+						<p className={styles.copy}>
+							<CopyText text={text} />
+						</p>
+					</div>
+				)}
+
+				{examples && <Examples list={examples} />}
+			</ShadowBlock>
+		</li>
+	);
+};

src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.module.scss

@@ -0,0 +1,34 @@
+@import '@styles/mixins/font';
+
+.list {
+	margin-top: 0.8rem;
+}
+
+.item {
+	display: flex;
+	gap: 2rem;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 0.75rem;
+	font-size: 0.875rem;
+	line-height: 1;
+}
+
+.marginTop {
+	margin-top: 1rem;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin: 0;
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	gap: 0.3rem;
+	@include font-source-sans(0.625rem, $neutrals-900, 400, 0.75);
+	text-transform: uppercase;
+}

src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next';
+import { CopyText, ShadowBlock } from '@shared/ui';
+import SVGIconLink from '@shared/assets/icons/actions/link.svg?react';
+import SVGIconArrow from '@shared/assets/icons/arrows/expand-filled.svg?react';
+import styles from './Examples.module.scss';
+
+type TExamples = {
+	list: string[];
+};
+
+export const Examples = ({ list }: TExamples) => {
+	const { t } = useTranslation('definition-page');
+
+	return (
+		<ShadowBlock addClass={styles.marginTop}>
+			<p className={styles.header}>
+				<SVGIconArrow />
+				<span className={styles.title}>
+					<SVGIconLink /> {t('relatedExamples')}
+				</span>
+			</p>
+			<ul className={styles.list}>
+				{list.map((item) => (
+					<li key={crypto.randomUUID()} className={styles.item}>
+						<span>{item}</span>
+						<CopyText text={item} />
+					</li>
+				))}
+			</ul>
+		</ShadowBlock>
+	);
+};

src/2_widgets/Definitions/DefinitionsList/DefinitionItem/index.ts

@@ -0,0 +1 @@
+export { DefinitionItem } from './DefinitionItem';