Bbuddy
/
bbuddy-ui
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add app localization

This commit is contained in:
SD 2024-04-04 02:18:18 +04:00
parent 2b814a09f2
commit b74c86789f
71 changed files with 1026 additions and 763 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
messages/en.json
View File

@ -1,14 +1,4 @@
{ {
"Header": {
"registration": "Registration",
"enter": "Enter",
"account": "My Account",
"menu": {
"bb-client": "Start grow with BB",
"bb-expert": "Become BB Expert",
"blog": "Blog&News"
}
},
"Main": { "Main": {
"title": "Bbuddy - Main", "title": "Bbuddy - Main",
"description": "Bbuddy desc", "description": "Bbuddy desc",
@ -29,15 +19,6 @@
"header-desc": "B Buddy is an application for active people interested in growth on all fronts — personal, professional and business. Right now they are looking for you." "header-desc": "B Buddy is an application for active people interested in growth on all fronts — personal, professional and business. Right now they are looking for you."
}, },
"Account": { "Account": {
"menu": {
"sessions": "Upcoming Sessions",
"notifications": "Notification",
"support": "Help & Support",
"information": "Legal Information",
"settings": "Profile Settings",
"messages": "Messages",
"work-with-us": "Work With Us"
},
"WorkWithUs": { "WorkWithUs": {
"title": "Become a BBuddy Expert", "title": "Become a BBuddy Expert",
"insert-info": "Insert your personal information to start your journey as a BBuddy Expert", "insert-info": "Insert your personal information to start your journey as a BBuddy Expert",

47
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@ant-design/cssinjs": "^1.18.1", "@ant-design/cssinjs": "^1.18.1",
"@ant-design/icons": "^5.2.6", "@ant-design/icons": "^5.2.6",
"@ant-design/nextjs-registry": "^1.0.0",
"antd": "^5.12.1", "antd": "^5.12.1",
"antd-img-crop": "^4.21.0", "antd-img-crop": "^4.21.0",
"axios": "^1.6.5", "axios": "^1.6.5",
@ -56,15 +57,15 @@
} }
}, },
"node_modules/@ant-design/cssinjs": { "node_modules/@ant-design/cssinjs": {
"version": "1.18.1", "version": "1.18.5",
"resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.1.tgz", "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.5.tgz",
"integrity": "sha512-1JURAPrsjK1GwpqByTq3bJ7nF7lbMKDZpehqeR2n8/IR5O58/W1U4VcOeaw5ZyTHri3tEMcom7dyP2tvxpW54g==", "integrity": "sha512-Ub4n3d+MAX/qtE5S9PM8iOn5ocU7GUAIC4Adc2X8UCMXnsRRfpJBHsBdtQ1qoAuaQ7lU2M1BTCuJ+fkv4fOWiw==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.11.1", "@babel/runtime": "^7.11.1",
"@emotion/hash": "^0.8.0", "@emotion/hash": "^0.8.0",
"@emotion/unitless": "^0.7.5", "@emotion/unitless": "^0.7.5",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"csstype": "3.1.2", "csstype": "^3.1.3",
"rc-util": "^5.35.0", "rc-util": "^5.35.0",
"stylis": "^4.0.13" "stylis": "^4.0.13"
}, },
@ -97,6 +98,18 @@
"resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz", "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
"integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==" "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
}, },
"node_modules/@ant-design/nextjs-registry": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@ant-design/nextjs-registry/-/nextjs-registry-1.0.0.tgz",
"integrity": "sha512-kU1K1UOhwrF6DPv73MhuL5a6U4e6/TiFapeLUt/c/kch9h5qFwEaJPb4RSJKNw0PRBfqCAPS011wVm4wYcrqbQ==",
"peerDependencies": {
"@ant-design/cssinjs": "^1.18.2",
"antd": "^5.0.0",
"next": "^14.0.0",
"react": ">=16.0.0",
"react-dom": ">=16.0.0"
}
},
"node_modules/@ant-design/react-slick": { "node_modules/@ant-design/react-slick": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.2.tgz", "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.2.tgz",
@ -1524,9 +1537,9 @@
} }
}, },
"node_modules/csstype": { "node_modules/csstype": {
"version": "3.1.2", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
}, },
"node_modules/damerau-levenshtein": { "node_modules/damerau-levenshtein": {
"version": "1.0.8", "version": "1.0.8",
@ -5355,15 +5368,15 @@
} }
}, },
"@ant-design/cssinjs": { "@ant-design/cssinjs": {
"version": "1.18.1", "version": "1.18.5",
"resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.1.tgz", "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.5.tgz",
"integrity": "sha512-1JURAPrsjK1GwpqByTq3bJ7nF7lbMKDZpehqeR2n8/IR5O58/W1U4VcOeaw5ZyTHri3tEMcom7dyP2tvxpW54g==", "integrity": "sha512-Ub4n3d+MAX/qtE5S9PM8iOn5ocU7GUAIC4Adc2X8UCMXnsRRfpJBHsBdtQ1qoAuaQ7lU2M1BTCuJ+fkv4fOWiw==",
"requires": { "requires": {
"@babel/runtime": "^7.11.1", "@babel/runtime": "^7.11.1",
"@emotion/hash": "^0.8.0", "@emotion/hash": "^0.8.0",
"@emotion/unitless": "^0.7.5", "@emotion/unitless": "^0.7.5",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"csstype": "3.1.2", "csstype": "^3.1.3",
"rc-util": "^5.35.0", "rc-util": "^5.35.0",
"stylis": "^4.0.13" "stylis": "^4.0.13"
} }
@ -5385,6 +5398,12 @@
"resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz", "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
"integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==" "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
}, },
"@ant-design/nextjs-registry": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@ant-design/nextjs-registry/-/nextjs-registry-1.0.0.tgz",
"integrity": "sha512-kU1K1UOhwrF6DPv73MhuL5a6U4e6/TiFapeLUt/c/kch9h5qFwEaJPb4RSJKNw0PRBfqCAPS011wVm4wYcrqbQ==",
"requires": {}
},
"@ant-design/react-slick": { "@ant-design/react-slick": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.2.tgz", "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.2.tgz",
@ -6413,9 +6432,9 @@
} }
}, },
"csstype": { "csstype": {
"version": "3.1.2", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
}, },
"damerau-levenshtein": { "damerau-levenshtein": {
"version": "1.0.8", "version": "1.0.8",

1
package.json
View File

@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@ant-design/cssinjs": "^1.18.1", "@ant-design/cssinjs": "^1.18.1",
"@ant-design/icons": "^5.2.6", "@ant-design/icons": "^5.2.6",
"@ant-design/nextjs-registry": "^1.0.0",
"antd": "^5.12.1", "antd": "^5.12.1",
"antd-img-crop": "^4.21.0", "antd-img-crop": "^4.21.0",
"axios": "^1.6.5", "axios": "^1.6.5",

36
src/app/[locale]/(main)/@directions/page.tsx
View File

@ -9,13 +9,13 @@ export default function Directions() {
<div className="main-popular__coll"> <div className="main-popular__coll">
<div className="b-popular"> <div className="b-popular">
<div className="b-popular__image"> <div className="b-popular__image">
<img className="" src="/images/popular1.png" alt=""/> <img src="/images/popular1.png" alt=""/>
</div> </div>
<div className="b-popular__inner"> <div className="b-popular__inner">
<div className="b-popular__title">Work Life Balance</div> <div className="b-popular__title">Work Life Balance</div>
<div className="b-popular__wrap-link"> <div className="b-popular__wrap-link">
<a className="b-popular__link" href="">23 experts</a> | <a className="b-popular__link" href="#">23 experts</a> |
<a className="b-popular__link" href="">245 offers</a> <a className="b-popular__link" href="#">245 offers</a>
</div> </div>
</div> </div>
</div> </div>
@ -23,13 +23,13 @@ export default function Directions() {
<div className="main-popular__coll"> <div className="main-popular__coll">
<div className="b-popular"> <div className="b-popular">
<div className="b-popular__image"> <div className="b-popular__image">
<img className="" src="/images/popular2.png" alt=""/> <img src="/images/popular2.png" alt=""/>
</div> </div>
<div className="b-popular__inner"> <div className="b-popular__inner">
<div className="b-popular__title">Strategic Session</div> <div className="b-popular__title">Strategic Session</div>
<div className="b-popular__wrap-link"> <div className="b-popular__wrap-link">
<a className="b-popular__link" href="">23 experts</a> | <a className="b-popular__link" href="#">23 experts</a> |
<a className="b-popular__link" href="">245 offers</a> <a className="b-popular__link" href="#">245 offers</a>
</div> </div>
</div> </div>
</div> </div>
@ -37,13 +37,13 @@ export default function Directions() {
<div className="main-popular__coll d-none d-md-block"> <div className="main-popular__coll d-none d-md-block">
<div className="b-popular"> <div className="b-popular">
<div className="b-popular__image"> <div className="b-popular__image">
<img className="" src="/images/popular3.png" alt=""/> <img src="/images/popular3.png" alt=""/>
</div> </div>
<div className="b-popular__inner"> <div className="b-popular__inner">
<div className="b-popular__title">Personal Growth</div> <div className="b-popular__title">Personal Growth</div>
<div className="b-popular__wrap-link"> <div className="b-popular__wrap-link">
<a className="b-popular__link" href="">23 experts</a> | <a className="b-popular__link" href="#">23 experts</a> |
<a className="b-popular__link" href="">245 offers</a> <a className="b-popular__link" href="#">245 offers</a>
</div> </div>
</div> </div>
</div> </div>
@ -51,13 +51,13 @@ export default function Directions() {
<div className="main-popular__coll d-none d-lg-block"> <div className="main-popular__coll d-none d-lg-block">
<div className="b-popular"> <div className="b-popular">
<div className="b-popular__image"> <div className="b-popular__image">
<img className="" src="/images/popular4.png" alt=""/> <img src="/images/popular4.png" alt=""/>
</div> </div>
<div className="b-popular__inner"> <div className="b-popular__inner">
<div className="b-popular__title">Career Planning</div> <div className="b-popular__title">Career Planning</div>
<div className="b-popular__wrap-link"> <div className="b-popular__wrap-link">
<a className="b-popular__link" href="">23 experts</a> | <a className="b-popular__link" href="#">23 experts</a> |
<a className="b-popular__link" href="">245 offers</a> <a className="b-popular__link" href="#">245 offers</a>
</div> </div>
</div> </div>
</div> </div>
@ -65,13 +65,13 @@ export default function Directions() {
<div className="main-popular__coll d-none d-lg-block"> <div className="main-popular__coll d-none d-lg-block">
<div className="b-popular"> <div className="b-popular">
<div className="b-popular__image"> <div className="b-popular__image">
<img className="" src="/images/popular5.png" alt=""/> <img src="/images/popular5.png" alt=""/>
</div> </div>
<div className="b-popular__inner"> <div className="b-popular__inner">
<div className="b-popular__title">Executive Coaching</div> <div className="b-popular__title">Executive Coaching</div>
<div className="b-popular__wrap-link"> <div className="b-popular__wrap-link">
<a className="b-popular__link" href="">23 experts</a> | <a className="b-popular__link" href="#">23 experts</a> |
<a className="b-popular__link" href="">245 offers</a> <a className="b-popular__link" href="#">245 offers</a>
</div> </div>
</div> </div>
</div> </div>
@ -79,13 +79,13 @@ export default function Directions() {
<div className="main-popular__coll d-none d-xl-block"> <div className="main-popular__coll d-none d-xl-block">
<div className="b-popular"> <div className="b-popular">
<div className="b-popular__image"> <div className="b-popular__image">
<img className="" src="/images/popular6.png" alt=""/> <img src="/images/popular6.png" alt=""/>
</div> </div>
<div className="b-popular__inner"> <div className="b-popular__inner">
<div className="b-popular__title">Career Development</div> <div className="b-popular__title">Career Development</div>
<div className="b-popular__wrap-link"> <div className="b-popular__wrap-link">
<a className="b-popular__link" href="">23 experts</a> | <a className="b-popular__link" href="#">23 experts</a> |
<a className="b-popular__link" href="">245 offers</a> <a className="b-popular__link" href="#">245 offers</a>
</div> </div>
</div> </div>
</div> </div>

5
src/app/[locale]/account/(account)/information/page.tsx
View File

@ -1,19 +1,20 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { i18nText } from '../../../../../i18nKeys';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Bbuddy - Account - Information', title: 'Bbuddy - Account - Information',
description: 'Bbuddy desc information' description: 'Bbuddy desc information'
}; };
export default function Information() { export default function Information({ params: { locale } }: { params: { locale: string } }) {
const t = useTranslations('Account.LegalInformation'); const t = useTranslations('Account.LegalInformation');
return ( return (
<> <>
<ol className="breadcrumb"> <ol className="breadcrumb">
<li className="breadcrumb-item active" aria-current="page">{t('title')}</li> <li className="breadcrumb-item active" aria-current="page">{i18nText('accountMenu.information', locale)}</li>
</ol> </ol>
<div className="base-text"> <div className="base-text">
Welcome to the B BUDDY LTD’s privacy policy. <br /> Welcome to the B BUDDY LTD’s privacy policy. <br />

2
src/app/[locale]/account/(account)/layout.tsx
View File

@ -29,7 +29,7 @@ export default function AccountInnerLayout({ children, params: { locale } }: Acc
<div className="b-inner"> <div className="b-inner">
<div className="row"> <div className="row">
<div className="col-xl-3 col-lg-4 d-none d-lg-block"> <div className="col-xl-3 col-lg-4 d-none d-lg-block">
<AccountMenu menu={getMenuConfig()} /> <AccountMenu menu={getMenuConfig()} locale={locale} />
</div> </div>
<div className="col-xl-9 col-lg-8 "> <div className="col-xl-9 col-lg-8 ">
<div className="page-account__inner"> <div className="page-account__inner">

5
src/app/[locale]/account/(account)/messages/[textId]/page.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { Link } from '../../../../../../navigation'; import { Link } from '../../../../../../navigation';
import { i18nText } from '../../../../../../i18nKeys';
export function generateStaticParams({ export function generateStaticParams({
params: { locale }, params: { locale },
@ -15,7 +16,7 @@ export function generateStaticParams({
return result; return result;
} }
export default function Message({ params }: { params: { textId: string } }) { export default function Message({ params }: { params: { locale: string, textId: string } }) {
const t = useTranslations('Account.Messages'); const t = useTranslations('Account.Messages');
return ( return (
@ -23,7 +24,7 @@ export default function Message({ params }: { params: { textId: string } }) {
<ol className="breadcrumb"> <ol className="breadcrumb">
<li className="breadcrumb-item"> <li className="breadcrumb-item">
<Link href={'/account/messages' as any}> <Link href={'/account/messages' as any}>
{t('title')} {i18nText('accountMenu.messages', params.locale)}
</Link> </Link>
</li> </li>
<li className="breadcrumb-item active" aria-current="page">{`Person ${params.textId}`}</li> <li className="breadcrumb-item active" aria-current="page">{`Person ${params.textId}`}</li>

57
src/app/[locale]/account/(account)/messages/page.tsx
View File

@ -2,23 +2,24 @@ import React, { Suspense } from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { Link } from '../../../../../navigation'; import { Link } from '../../../../../navigation';
import { CustomInput } from '../../../../../components/view'; import { CustomInput } from '../../../../../components/view/CustomInput';
import { i18nText } from '../../../../../i18nKeys';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Bbuddy - Account - Messages', title: 'Bbuddy - Account - Messages',
description: 'Bbuddy desc messages' description: 'Bbuddy desc messages'
}; };
export default function Messages() { export default function Messages({ params: { locale } }: { params: { locale: string } }) {
const t = useTranslations('Account.Messages'); const t = useTranslations('Account.Messages');
return ( return (
<> <>
<ol className="breadcrumb"> <ol className="breadcrumb">
<li className="breadcrumb-item active" aria-current="page">{t('title')}</li> <li className="breadcrumb-item active" aria-current="page">{i18nText('accountMenu.messages', locale)}</li>
</ol> </ol>
<Suspense> <Suspense>
<CustomInput placeholder="Name" /> <CustomInput placeholder={i18nText('name', locale)} />
</Suspense> </Suspense>
<div className="messages-session"> <div className="messages-session">
<Link <Link
@ -30,15 +31,17 @@ export default function Messages() {
<img src="/images/person.png" className="" alt="" /> <img src="/images/person.png" className="" alt="" />
</div> </div>
<div className="card-profile__header__inner"> <div className="card-profile__header__inner">
<div className="card-profile__header__name"> <div style={{ width: '100%' }}>
David <div className="card-profile__header__name">
<span className="count">14</span> David
</div> <span className="count">14</span>
<div className="card-profile__header__title"> </div>
Lorem ipsum dolor sit at, consecte... <div className="card-profile__header__title">
</div> Lorem ipsum dolor sit at, consecte...
<div className="card-profile__header__date "> </div>
25 may <div className="card-profile__header__date ">
25 may
</div>
</div> </div>
</div> </div>
</div> </div>
@ -52,12 +55,14 @@ export default function Messages() {
<img src="/images/person.png" className="" alt="" /> <img src="/images/person.png" className="" alt="" />
</div> </div>
<div className="card-profile__header__inner"> <div className="card-profile__header__inner">
<div className="card-profile__header__name">David</div> <div style={{ width: '100%' }}>
<div className="card-profile__header__title"> <div className="card-profile__header__name">David</div>
Lorem ipsum dolor sit at, consecte... <div className="card-profile__header__title">
</div> Lorem ipsum dolor sit at, consecte...
<div className="card-profile__header__date "> </div>
25 may <div className="card-profile__header__date ">
25 may
</div>
</div> </div>
</div> </div>
</div> </div>
@ -71,12 +76,14 @@ export default function Messages() {
<img src="/images/person.png" className="" alt="" /> <img src="/images/person.png" className="" alt="" />
</div> </div>
<div className="card-profile__header__inner"> <div className="card-profile__header__inner">
<div className="card-profile__header__name">David</div> <div style={{ width: '100%' }}>
<div className="card-profile__header__title"> <div className="card-profile__header__name">David</div>
Lorem ipsum dolor sit at, consecte... <div className="card-profile__header__title">
</div> Lorem ipsum dolor sit at, consecte...
<div className="card-profile__header__date "> </div>
25 may <div className="card-profile__header__date ">
25 may
</div>
</div> </div>
</div> </div>
</div> </div>

27
src/app/[locale]/account/(account)/notifications/page.tsx
View File

@ -1,19 +1,26 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { useTranslations } from 'next-intl'; import dayjs from 'dayjs';
import 'dayjs/locale/ru';
import 'dayjs/locale/en';
import 'dayjs/locale/de';
import 'dayjs/locale/it';
import 'dayjs/locale/fr';
import 'dayjs/locale/es';
import { i18nText } from '../../../../../i18nKeys';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Bbuddy - Account - Notifications', title: 'Bbuddy - Account - Notifications',
description: 'Bbuddy desc notifications' description: 'Bbuddy desc notifications'
}; };
export default function Notifications() { export default function Notifications({ params: { locale } }: { params: { locale: string } }) {
const t = useTranslations('Account.Notifications'); const date = dayjs('2022-05-22').locale(locale);
return ( return (
<> <>
<ol className="breadcrumb"> <ol className="breadcrumb">
<li className="breadcrumb-item active" aria-current="page">{t('title')}</li> <li className="breadcrumb-item active" aria-current="page">{i18nText('accountMenu.notifications', locale)}</li>
</ol> </ol>
<div className="list-notifications "> <div className="list-notifications ">
<div className="b-notifications primary"> <div className="b-notifications primary">
@ -21,9 +28,9 @@ export default function Notifications() {
<div className="b-notifications__text"> <div className="b-notifications__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor leo eu justo molestie Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor leo eu justo molestie
</div> </div>
<div className="b-notifications__date">25 may 2022</div> <div className="b-notifications__date">{date.format('D MMMM YYYY')}</div>
<div className="b-notifications__inner"> <div className="b-notifications__inner">
<a href="#" className="b-notifications__delete">{t('delete')}</a> <a href="#" className="b-notifications__delete">{i18nText('delete', locale)}</a>
</div> </div>
</div> </div>
<div className="b-notifications primary"> <div className="b-notifications primary">
@ -31,9 +38,9 @@ export default function Notifications() {
<div className="b-notifications__text"> <div className="b-notifications__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor leo eu justo molestie Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor leo eu justo molestie
</div> </div>
<div className="b-notifications__date">25 may 2022</div> <div className="b-notifications__date">{date.format('D MMMM YYYY')}</div>
<div className="b-notifications__inner"> <div className="b-notifications__inner">
<a href="#" className="b-notifications__delete">{t('delete')}</a> <a href="#" className="b-notifications__delete">{i18nText('delete', locale)}</a>
</div> </div>
</div> </div>
<div className="b-notifications danger"> <div className="b-notifications danger">
@ -41,9 +48,9 @@ export default function Notifications() {
<div className="b-notifications__text"> <div className="b-notifications__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor leo eu justo molestie Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor leo eu justo molestie
</div> </div>
<div className="b-notifications__date">25 may 2022</div> <div className="b-notifications__date">{date.format('D MMMM YYYY')}</div>
<div className="b-notifications__inner"> <div className="b-notifications__inner">
<a href="#" className="b-notifications__delete">{t('delete')}</a> <a href="#" className="b-notifications__delete">{i18nText('delete', locale)}</a>
</div> </div>
</div> </div>
</div> </div>

7
src/app/[locale]/account/(account)/sessions/page.tsx
View File

@ -15,13 +15,6 @@ export default function Sessions({ params: { locale } }: { params: { locale: str
<Suspense fallback={<p>Loading...</p>}> <Suspense fallback={<p>Loading...</p>}>
<SessionsTabs <SessionsTabs
locale={locale} locale={locale}
intlConfig={{
upcoming: t('upcoming-sessions'),
requested: t('sessions-requested'),
recent: t('recent-sessions'),
selectTopicLabel: t('topic'),
dateLabel: t('day-start')
}}
/> />
</Suspense> </Suspense>
); );

20
src/app/[locale]/account/(account)/settings/change-password/page.tsx
View File

@ -1,31 +1,29 @@
import React from 'react'; import React from 'react';
import { useTranslations } from 'next-intl';
import { Link } from '../../../../../../navigation'; import { Link } from '../../../../../../navigation';
import { i18nText } from '../../../../../../i18nKeys/';
export default function ChangePassword({ params }: { params: { userId: string } }) { export default function ChangePassword({ params: { locale } }: { params: { locale: string } }) {
const t = useTranslations('Account.Settings');
return ( return (
<> <>
<ol className="breadcrumb"> <ol className="breadcrumb">
<li className="breadcrumb-item"> <li className="breadcrumb-item">
<Link href={`/${params.userId}/settings` as any}> <Link href={'/account/settings' as any}>
{t('title')} {i18nText('accountMenu.settings', locale)}
</Link> </Link>
</li> </li>
<li className="breadcrumb-item active" aria-current="page">{t('change-password')}</li> <li className="breadcrumb-item active" aria-current="page">{i18nText('changePass', locale)}</li>
</ol> </ol>
<form className="form-settings" action=""> <form className="form-settings" action="">
<div className="form-field password-hide"> <div className="form-field password-hide">
<input type="text" placeholder={t('old-password')} className="base-input" id="" value="" /> <input type="text" placeholder={i18nText('oldPass', locale)} className="base-input" id="" value="" />
</div> </div>
<div className="form-field password-hide"> <div className="form-field password-hide">
<input type="text" placeholder={t('new-password')} className="base-input" id="" value="" /> <input type="text" placeholder={i18nText('newPass', locale)} className="base-input" id="" value="" />
</div> </div>
<div className="form-field password-show"> <div className="form-field password-show">
<input className="base-input" type="text" placeholder={t('confirm-password')} id="" value="" /> <input className="base-input" type="text" placeholder={i18nText('confirmPass', locale)} id="" value="" />
</div> </div>
<button className="btn-apply">{t('save')}</button> <button className="btn-apply">{i18nText('save', locale)}</button>
</form> </form>
</> </>
); );

14
src/app/[locale]/account/(account)/settings/page.tsx
View File

@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { ProfileSettings } from '../../../../../components/Account'; import { ProfileSettings } from '../../../../../components/Account';
import { i18nText } from '../../../../../i18nKeys';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Bbuddy - Account - Profile Settings', title: 'Bbuddy - Account - Profile Settings',
@ -14,19 +15,10 @@ export default function Settings({ params: { locale } }: { params: { locale: str
return ( return (
<> <>
<ol className="breadcrumb"> <ol className="breadcrumb">
<li className="breadcrumb-item active" aria-current="page">{t('title')}</li> <li className="breadcrumb-item active" aria-current="page">{i18nText('accountMenu.settings', locale)}</li>
</ol> </ol>
<Suspense> <Suspense>
<ProfileSettings <ProfileSettings locale={locale} />
locale={locale}
photoDesc={t('photo-desc')}
placeholderName={t('name')}
placeholderSurname={t('surname')}
placeholderBirthday={t('birthday')}
placeholderEmail={t('email')}
changePasswordLink={t('change-password')}
saveButton={t('save')}
/>
</Suspense> </Suspense>
</> </>
); );

8
src/app/[locale]/account/(account)/support/page.tsx
View File

@ -1,19 +1,17 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { useTranslations } from 'next-intl'; import { i18nText } from '../../../../../i18nKeys';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Bbuddy - Account - Help & Support', title: 'Bbuddy - Account - Help & Support',
description: 'Bbuddy desc help & support' description: 'Bbuddy desc help & support'
}; };
export default function Support() { export default function Support({ params: { locale } }: { params: { locale: string } }) {
const t = useTranslations('Account.Support');
return ( return (
<> <>
<ol className="breadcrumb"> <ol className="breadcrumb">
<li className="breadcrumb-item active" aria-current="page">{t('title')}</li> <li className="breadcrumb-item active" aria-current="page">{i18nText('accountMenu.support', locale)}</li>
</ol> </ol>
<div className="base-text"> <div className="base-text">
some text some text

2
src/app/[locale]/account/(account)/work-with-us/coaching/add-offer/page.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Link } from '../../../../../../../navigation'; import { Link } from '../../../../../../../navigation';
import { CustomSelect } from '../../../../../../../components/view'; import { CustomSelect } from '../../../../../../../components/view/CustomSelect';
export default function AddOffer() { export default function AddOffer() {
return ( return (

2
src/app/[locale]/account/(account)/work-with-us/new-topic/page.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Link } from '../../../../../../navigation'; import { Link } from '../../../../../../navigation';
import { CustomSelect } from '../../../../../../components/view'; import { CustomSelect } from '../../../../../../components/view/CustomSelect';
export default function NewTopic() { export default function NewTopic() {
return ( return (

11
src/app/[locale]/account/(account)/work-with-us/page.tsx
View File

@ -1,27 +1,28 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { i18nText } from '../../../../../i18nKeys';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Bbuddy - Account - Work with us', title: 'Bbuddy - Account - Work with us',
description: 'Bbuddy desc work with us' description: 'Bbuddy desc work with us'
}; };
export default function WorkWithUs() { export default function WorkWithUs({ params: { locale } }: { params: { locale: string } }) {
const t = useTranslations('Account.WorkWithUs'); const t = useTranslations('Account.WorkWithUs');
return ( return (
<> <>
<ol className="breadcrumb"> <ol className="breadcrumb">
<li className="breadcrumb-item active" aria-current="page">{t('title')}</li> <li className="breadcrumb-item active" aria-current="page">{i18nText('accountMenu.work-with-us', locale)}</li>
</ol> </ol>
<div className="b-info"> <div className="b-info">
<div className="image-info"> <div className="image-info">
<img className="" src="/images/info.png" alt="" /> <img className="" src="/images/info.png" alt="" />
</div> </div>
<div className="b-info__title">{t('insert-info')}</div> <div className="b-info__title">{i18nText('insertInfo', locale)}</div>
<button className="btn-apply">{t('start')}</button> <button className="btn-apply">{i18nText('getStarted', locale)}</button>
<div className="base-text">{t('base-text')}</div> <div className="base-text">{i18nText('changeUserData', locale)}</div>
</div> </div>
</> </>
); );

2
src/app/[locale]/experts/[expertId]/page.tsx
View File

@ -9,7 +9,7 @@ import {
ExpertPractice ExpertPractice
} from '../../../../components/Experts/ExpertDetails'; } from '../../../../components/Experts/ExpertDetails';
import { Details } from '../../../../types/experts'; import { Details } from '../../../../types/experts';
import { BackButton } from '../../../../components/view'; import { BackButton } from '../../../../components/view/BackButton';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Bbuddy - Experts item', title: 'Bbuddy - Experts item',

25
src/app/[locale]/layout.tsx
View File

@ -3,10 +3,9 @@ import { Metadata } from 'next';
import { unstable_setRequestLocale } from 'next-intl/server'; import { unstable_setRequestLocale } from 'next-intl/server';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { ConfigProvider } from 'antd'; import { ConfigProvider } from 'antd';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import theme from '../../constants/theme'; import theme from '../../constants/theme';
import { ALLOWED_LOCALES } from '../../constants/locale'; import { ALLOWED_LOCALES } from '../../constants/locale';
import StyledComponentsRegistry from '../../lib/AntdRegistry';
import StyledRegistry from '../../lib/StyleRegistry';
import { Header, Footer } from '../../components/Page'; import { Header, Footer } from '../../components/Page';
type LayoutProps = { type LayoutProps = {
@ -28,18 +27,16 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
unstable_setRequestLocale(locale); unstable_setRequestLocale(locale);
return ( return (
<StyledRegistry> <AntdRegistry>
<StyledComponentsRegistry> <ConfigProvider theme={theme}>
<ConfigProvider theme={theme}> <div className="b-wrapper">
<div className="b-wrapper"> <div className="b-content">
<div className="b-content"> <Header locale={locale} />
<Header locale={locale} /> {children}
{children}
</div>
<Footer />
</div> </div>
</ConfigProvider> <Footer locale={locale} />
</StyledComponentsRegistry> </div>
</StyledRegistry> </ConfigProvider>
</AntdRegistry>
); );
}; };

10
src/app/global-error.tsx
View File

@ -3,9 +3,9 @@
import React from 'react'; import React from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { Button, ConfigProvider } from 'antd'; import { Button, ConfigProvider } from 'antd';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import { comfortaa, inter } from './fonts'; import { comfortaa, inter } from './fonts';
import StyledRegistry from '../lib/StyleRegistry'; import StyledRegistry from '../lib/StyleRegistry';
import StyledComponentsRegistry from '../lib/AntdRegistry';
import theme from '../constants/theme'; import theme from '../constants/theme';
export default function GlobalError({ export default function GlobalError({
@ -18,8 +18,8 @@ export default function GlobalError({
return ( return (
<html className={`${comfortaa.variable} ${inter.variable}`}> <html className={`${comfortaa.variable} ${inter.variable}`}>
<body> <body>
<StyledRegistry> <AntdRegistry>
<StyledComponentsRegistry> <StyledRegistry>
<ConfigProvider theme={theme}> <ConfigProvider theme={theme}>
<div className="b-wrapper"> <div className="b-wrapper">
<div className="b-content"> <div className="b-content">
@ -57,8 +57,8 @@ export default function GlobalError({
</footer> </footer>
</div> </div>
</ConfigProvider> </ConfigProvider>
</StyledComponentsRegistry> </StyledRegistry>
</StyledRegistry> </AntdRegistry>
</body> </body>
</html> </html>
); );

12
src/app/not-found.tsx
View File

@ -1,18 +1,18 @@
import React from 'react'; import React from 'react';
import { ConfigProvider } from 'antd'; import { ConfigProvider } from 'antd';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import Link from 'next/link'; import Link from 'next/link';
import { comfortaa, inter } from './fonts'; import { comfortaa, inter } from './fonts';
import StyledComponentsRegistry from '../lib/AntdRegistry';
import StyledRegistry from '../lib/StyleRegistry'; import StyledRegistry from '../lib/StyleRegistry';
import theme from '../constants/theme'; import theme from '../constants/theme';
import { BackButton } from '../components/view'; import { BackButton } from '../components/view/BackButton';
export default function NotFound() { export default function NotFound() {
return ( return (
<html className={`${comfortaa.variable} ${inter.variable}`}> <html className={`${comfortaa.variable} ${inter.variable}`}>
<body> <body>
<StyledRegistry> <AntdRegistry>
<StyledComponentsRegistry> <StyledRegistry>
<ConfigProvider theme={theme}> <ConfigProvider theme={theme}>
<div className="b-wrapper"> <div className="b-wrapper">
<div className="b-content"> <div className="b-content">
@ -51,8 +51,8 @@ export default function NotFound() {
</footer> </footer>
</div> </div>
</ConfigProvider> </ConfigProvider>
</StyledComponentsRegistry> </StyledRegistry>
</StyledRegistry> </AntdRegistry>
</body> </body>
</html> </html>
); );

7
src/components/Account/AccountMenu.tsx
View File

@ -7,6 +7,7 @@ import { useSelectedLayoutSegment, usePathname } from 'next/navigation';
import { Link } from '../../navigation'; import { Link } from '../../navigation';
import { AUTH_TOKEN_KEY, AUTH_USER } from '../../constants/common'; import { AUTH_TOKEN_KEY, AUTH_USER } from '../../constants/common';
import { deleteStorageKey } from '../../hooks/useLocalStorage'; import { deleteStorageKey } from '../../hooks/useLocalStorage';
import { i18nText } from '../../i18nKeys';
const Logout = styled(Button)` const Logout = styled(Button)`
width: 100%; width: 100%;
@ -19,7 +20,7 @@ const Logout = styled(Button)`
text-align: left !important; text-align: left !important;
`; `;
export const AccountMenu = ({ menu }: { menu: { path: string, title: string, count?: number }[] }) => { export const AccountMenu = ({ menu, locale }: { menu: { path: string, title: string, count?: number }[], locale: string }) => {
const selectedLayoutSegment = useSelectedLayoutSegment(); const selectedLayoutSegment = useSelectedLayoutSegment();
const pathname = selectedLayoutSegment || ''; const pathname = selectedLayoutSegment || '';
const paths = usePathname(); const paths = usePathname();
@ -51,7 +52,7 @@ export const AccountMenu = ({ menu }: { menu: { path: string, title: string, cou
type="link" type="link"
onClick={onLogout} onClick={onLogout}
> >
Log Out {i18nText('logout', locale)}
</Logout> </Logout>
</li> </li>
<li className="list-sidebar__item"> <li className="list-sidebar__item">
@ -59,7 +60,7 @@ export const AccountMenu = ({ menu }: { menu: { path: string, title: string, cou
type="link" type="link"
onClick={onDeleteAccount} onClick={onDeleteAccount}
> >
Delete account {i18nText('deleteAcc', locale)}
</Logout> </Logout>
</li> </li>
</ul> </ul>

41
src/components/Account/ProfileSettings.tsx
View File

@ -6,33 +6,18 @@ import type { UploadFile, UploadProps } from 'antd';
import ImgCrop from 'antd-img-crop'; import ImgCrop from 'antd-img-crop';
import { CameraOutlined } from '@ant-design/icons'; import { CameraOutlined } from '@ant-design/icons';
import { Link } from '../../navigation'; import { Link } from '../../navigation';
import { CustomInput } from '../view'; import { CustomInput } from '../view/CustomInput';
import { Profile } from '../../types/profile'; import { Profile } from '../../types/profile';
import { useProfileSettings } from '../../actions/hooks/useProfileSettings'; import { useProfileSettings } from '../../actions/hooks/useProfileSettings';
import { i18nText } from '../../i18nKeys';
type ProfileSettingsProps = { type ProfileSettingsProps = {
locale: string; locale: string;
photoDesc?: string;
placeholderName?: string;
placeholderSurname?: string;
placeholderBirthday?: string;
placeholderEmail?: string;
changePasswordLink?: string;
saveButton?: string;
}; };
// type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0]; // type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
export const ProfileSettings: FC<ProfileSettingsProps> = ({ export const ProfileSettings: FC<ProfileSettingsProps> = ({ locale }) => {
locale,
photoDesc,
placeholderName,
placeholderSurname,
placeholderBirthday,
placeholderEmail,
changePasswordLink,
saveButton
}) => {
const [form] = Form.useForm<Profile>(); const [form] = Form.useForm<Profile>();
const { profileSettings } = useProfileSettings(locale); const { profileSettings } = useProfileSettings(locale);
@ -66,13 +51,13 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({
return ( return (
<Form form={form} className="form-settings"> <Form form={form} className="form-settings">
<div className="user-avatar"> <div className="user-avatar">
<div className="user-avatar__edit"> <div className="user-avatar__edit" style={profileSettings?.faceImageUrl ? { backgroundImage: `url(${profileSettings.faceImageUrl})` } : undefined}>
<input className="" type="file" id="input-file" /> <input className="" type="file" id="input-file" />
<label htmlFor="input-file" className="form-label" /> <label htmlFor="input-file" className="form-label" />
</div> </div>
<div className="user-avatar__text">{photoDesc}</div> <div className="user-avatar__text">{i18nText('photoDesc', locale)}</div>
</div> </div>
<ImgCrop rotationSlider> {/* <ImgCrop rotationSlider>
<Upload <Upload
action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188" action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
fileList={fileList} fileList={fileList}
@ -81,33 +66,33 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({
> >
<Button icon={<CameraOutlined />}>Click to Upload</Button> <Button icon={<CameraOutlined />}>Click to Upload</Button>
</Upload> </Upload>
</ImgCrop> </ImgCrop> */}
<div className="form-field"> <div className="form-field">
<Form.Item name="username"> <Form.Item name="username">
<CustomInput placeholder={placeholderName} /> <CustomInput placeholder={i18nText('name', locale)} />
</Form.Item> </Form.Item>
</div> </div>
<div className="form-field"> <div className="form-field">
<Form.Item name="surname"> <Form.Item name="surname">
<CustomInput placeholder={placeholderSurname} /> <CustomInput placeholder={i18nText('surname', locale)} />
</Form.Item> </Form.Item>
</div> </div>
{/* <div className="form-field"> {/* <div className="form-field">
<Form.Item name="birthday"> <Form.Item name="birthday">
<CustomInput placeholder={placeholderBirthday} /> <CustomInput placeholder={i18nText('birthday', locale)} />
</Form.Item> </Form.Item>
</div> */} </div> */}
<div className="form-field"> <div className="form-field">
<Form.Item name="login"> <Form.Item name="login">
<CustomInput type="email" placeholder={placeholderEmail} /> <CustomInput type="email" placeholder="E-mail" />
</Form.Item> </Form.Item>
</div> </div>
<div className="form-link"> <div className="form-link">
<Link href={'change-password' as any}> <Link href={'change-password' as any}>
{changePasswordLink} {i18nText('changePass', locale)}
</Link> </Link>
</div> </div>
<button className="btn-apply">{saveButton}</button> <button className="btn-apply">{i18nText('save', locale)}</button>
</Form> </Form>
); );
}; };

27
src/components/Account/SessionsTabs.tsx
View File

@ -1,7 +1,7 @@
'use client'; 'use client';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import styled from 'styled-components'; import { Empty, Space } from 'antd';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import 'dayjs/locale/ru'; import 'dayjs/locale/ru';
import 'dayjs/locale/en'; import 'dayjs/locale/en';
@ -9,15 +9,14 @@ import 'dayjs/locale/de';
import 'dayjs/locale/it'; import 'dayjs/locale/it';
import 'dayjs/locale/fr'; import 'dayjs/locale/fr';
import 'dayjs/locale/es'; import 'dayjs/locale/es';
import { CustomSelect, Loader } from '../view'; import { Loader } from '../view/Loader';
import { useLocalStorage } from '../../hooks/useLocalStorage'; import { useLocalStorage } from '../../hooks/useLocalStorage';
import { AUTH_TOKEN_KEY, AUTH_USER } from '../../constants/common'; import { AUTH_TOKEN_KEY, AUTH_USER } from '../../constants/common';
import { getRecentSessions, getRequestedSessions, getUpcomingSessions } from '../../actions/profile'; import { getRecentSessions, getRequestedSessions, getUpcomingSessions } from '../../actions/profile';
import { Session, Sessions, SessionType } from '../../types/sessions'; import { Session, Sessions, SessionType } from '../../types/sessions';
import { i18nText } from '../../i18nKeys';
const Tab = styled.div``; export const SessionsTabs = ({ locale }: { locale: string }) => {
export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string, string>, locale: string }) => {
const [activeTab, setActiveTab] = useState<number>(0); const [activeTab, setActiveTab] = useState<number>(0);
const [sort, setSort] = useState<string>(); const [sort, setSort] = useState<string>();
const [sessions, setSessions] = useState<Sessions>(); const [sessions, setSessions] = useState<Sessions>();
@ -59,7 +58,7 @@ export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string
const getChildren = (list?: Session[]) => ( const getChildren = (list?: Session[]) => (
<> <>
<div className="filter-session"> {/* <div className="filter-session">
<div className="filter-session__item"> <div className="filter-session__item">
<CustomSelect <CustomSelect
label="Topic" label="Topic"
@ -73,7 +72,7 @@ export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string
]} ]}
/> />
</div> </div>
</div> </div> */}
<div className="list-session"> <div className="list-session">
{list && list?.length > 0 ? list?.map(({ id, scheduledStartAtUtc, scheduledEndAtUtc, title, coach, clients }) => { {list && list?.length > 0 ? list?.map(({ id, scheduledStartAtUtc, scheduledEndAtUtc, title, coach, clients }) => {
const client = clients?.length ? clients[0] : null; const client = clients?.length ? clients[0] : null;
@ -94,7 +93,7 @@ export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string
<div className="card-profile__header__title">{title}</div> <div className="card-profile__header__title">{title}</div>
<div className={`card-profile__header__date${today ? ' chosen': ''}`}> <div className={`card-profile__header__date${today ? ' chosen': ''}`}>
{today {today
? `Today ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}` ? `${i18nText('today', locale)} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`
: `${startDate.format('D MMMM')} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`} : `${startDate.format('D MMMM')} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`}
</div> </div>
</div> </div>
@ -103,7 +102,7 @@ export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string
</div> </div>
) )
}) : ( }) : (
<div>not found</div> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
)} )}
</div> </div>
</> </>
@ -114,7 +113,7 @@ export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string
key: SessionType.UPCOMING, key: SessionType.UPCOMING,
label: ( label: (
<> <>
{intlConfig?.upcoming || 'Tab 1'} {i18nText('session.upcoming', locale)}
{sessions?.upcoming && sessions?.upcoming?.length > 0 ? (<span className="count">{sessions?.upcoming.length}</span>) : null} {sessions?.upcoming && sessions?.upcoming?.length > 0 ? (<span className="count">{sessions?.upcoming.length}</span>) : null}
</> </>
), ),
@ -124,7 +123,7 @@ export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string
key: SessionType.REQUESTED, key: SessionType.REQUESTED,
label: ( label: (
<> <>
{intlConfig?.requested || 'Tab 2'} {i18nText('session.requested', locale)}
{sessions?.requested && sessions?.requested?.length > 0 ? (<span className="count">{sessions?.requested.length}</span>) : null} {sessions?.requested && sessions?.requested?.length > 0 ? (<span className="count">{sessions?.requested.length}</span>) : null}
</> </>
), ),
@ -132,7 +131,7 @@ export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string
}, },
{ {
key: SessionType.RECENT, key: SessionType.RECENT,
label: intlConfig?.recent || 'Tab 3', label: i18nText('session.recent', locale),
children: getChildren(sessions?.recent) children: getChildren(sessions?.recent)
} }
]; ];
@ -145,13 +144,13 @@ export const SessionsTabs = ({ intlConfig, locale }: { intlConfig: Record<string
> >
<div className="tabs-session"> <div className="tabs-session">
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<Tab <Space
key={index} key={index}
className={`tabs-session__item ${index === activeTab ? 'active' : ''}`} className={`tabs-session__item ${index === activeTab ? 'active' : ''}`}
onClick={() => setActiveTab(index)} onClick={() => setActiveTab(index)}
> >
{tab.label} {tab.label}
</Tab> </Space>
))} ))}
</div> </div>
{tabs[activeTab].children} {tabs[activeTab].children}

2
src/components/Account/index.ts
View File

@ -1,3 +1,5 @@
'use client'
export { AccountMenu } from './AccountMenu'; export { AccountMenu } from './AccountMenu';
export { SessionsTabs } from './SessionsTabs'; export { SessionsTabs } from './SessionsTabs';
export { ProfileSettings } from './ProfileSettings'; export { ProfileSettings } from './ProfileSettings';

18
src/components/Experts/AdditionalFilter.tsx
View File

@ -6,18 +6,18 @@ import debounce from 'lodash/debounce';
import { useRouter } from '../../navigation'; import { useRouter } from '../../navigation';
import { AdditionalFilter } from '../../types/experts'; import { AdditionalFilter } from '../../types/experts';
import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter'; import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter';
import { CustomInput, CustomSelect } from '../view'; import { CustomInput } from '../view/CustomInput';
import { CustomSelect } from '../view/CustomSelect';
import { i18nText } from '../../i18nKeys';
type ExpertAdditionalFilterProps = { type ExpertAdditionalFilterProps = {
searchPlaceholder: string;
sortLabel: string;
basePath: string; basePath: string;
locale: string;
}; };
export const ExpertsAdditionalFilter = ({ export const ExpertsAdditionalFilter = ({
searchPlaceholder,
sortLabel,
basePath, basePath,
locale
}: ExpertAdditionalFilterProps) => { }: ExpertAdditionalFilterProps) => {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter(); const router = useRouter();
@ -65,7 +65,7 @@ export const ExpertsAdditionalFilter = ({
<div className="main-find__search"> <div className="main-find__search">
<div className="main-find__search__input"> <div className="main-find__search__input">
<CustomInput <CustomInput
placeholder={searchPlaceholder} placeholder={i18nText('searchExpert', locale)}
defaultValue={filter?.text} defaultValue={filter?.text}
onChange={onChangeInput} onChange={onChangeInput}
allowClear allowClear
@ -73,13 +73,13 @@ export const ExpertsAdditionalFilter = ({
</div> </div>
<div className="main-find__search__sort"> <div className="main-find__search__sort">
<CustomSelect <CustomSelect
label={sortLabel} label={i18nText('sort', locale)}
value={filter?.coachSort} value={filter?.coachSort}
onChange={onChangeSort} onChange={onChangeSort}
options={[ options={[
// { value: 'byTop', label: 'By top views' }, // { value: 'byTop', label: 'By top views' },
{ value: 'byPriceAscending', label: 'By price ascending' }, { value: 'byPriceAscending', label: i18nText('sortPriceAsc', locale) },
{ value: 'byPriceDescending', label: 'By price descending' } { value: 'byPriceDescending', label: i18nText('sortPriceDesc', locale) }
// { value: 'byRating', label: 'By rating' } // { value: 'byRating', label: 'By rating' }
]} ]}
/> />

19
src/components/Experts/Experts.tsx
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import { getTranslations } from 'next-intl/server';
import { DEFAULT_PAGE_SIZE } from '../../constants/common'; import { DEFAULT_PAGE_SIZE } from '../../constants/common';
import { getFilter } from '../../utils/filter'; import { getFilter } from '../../utils/filter';
import { getTagList, getLanguages } from '../../actions/tags'; import { getTagList, getLanguages } from '../../actions/tags';
@ -7,6 +6,7 @@ import { getExpertsList } from '../../actions/experts';
import { ExpertsFilter } from './Filter'; import { ExpertsFilter } from './Filter';
import { ExpertsAdditionalFilter } from './AdditionalFilter'; import { ExpertsAdditionalFilter } from './AdditionalFilter';
import { ExpertsList } from './ExpertsList'; import { ExpertsList } from './ExpertsList';
import { i18nText } from '../../i18nKeys';
type ExpertsProps = { type ExpertsProps = {
basePath?: string; basePath?: string;
@ -15,11 +15,14 @@ type ExpertsProps = {
}; };
export const Experts = async ({ basePath = '/', locale, pageSize = DEFAULT_PAGE_SIZE }: ExpertsProps) => { export const Experts = async ({ basePath = '/', locale, pageSize = DEFAULT_PAGE_SIZE }: ExpertsProps) => {
const t = await getTranslations('Experts');
const searchData = await getTagList(locale); const searchData = await getTagList(locale);
const languages = await getLanguages(locale); const languages = await getLanguages(locale);
const filter = getFilter({ pageSize }); const filter = getFilter({ pageSize });
const experts = await getExpertsList(filter, locale); const experts = await getExpertsList(filter, locale);
const durFrom = `${searchData?.sessionCostMin || 0}${locale === 'ru' ? 'мин' : 'min'}`;
const durTo = `${searchData?.sessionDurationMax || 0}${locale === 'ru' ? 'мин' : 'min'}`;
const priceFrom = `${searchData?.sessionCostMin || 0}€`;
const priceTo = `${searchData?.sessionCostMax || 0}€`;
return ( return (
<div className="row"> <div className="row">
@ -28,15 +31,14 @@ export const Experts = async ({ basePath = '/', locale, pageSize = DEFAULT_PAGE_
searchData={searchData} searchData={searchData}
languages={languages} languages={languages}
basePath={basePath} basePath={basePath}
priceTitle={t('filter.price', { from: searchData?.sessionCostMin || 0, to: searchData?.sessionCostMax || 0 })} locale={locale}
durationTitle={t('filter.duration', { from: searchData?.sessionDurationMin || 0, to: searchData?.sessionDurationMax || 0 })} priceTitle={i18nText('fromTo', locale).replace('$', priceFrom).replace('$', priceTo)}
buttonApply={t('filter.apply')} durationTitle={i18nText('fromTo', locale).replace('$', durFrom).replace('$', durTo)}
/> />
</div> </div>
<div className="col-xl-9 col-lg-8 "> <div className="col-xl-9 col-lg-8 ">
<ExpertsAdditionalFilter <ExpertsAdditionalFilter
searchPlaceholder={t('filter.search')} locale={locale}
sortLabel={t('filter.sort')}
basePath={basePath} basePath={basePath}
/> />
<ExpertsList <ExpertsList
@ -44,9 +46,6 @@ export const Experts = async ({ basePath = '/', locale, pageSize = DEFAULT_PAGE_
data={experts} data={experts}
basePath={basePath} basePath={basePath}
baseFilter={filter} baseFilter={filter}
priceTitle={t('list.price')}
durationTitle={t('list.duration')}
detailButton={t('list.details')}
pageSize={pageSize} pageSize={pageSize}
/> />
</div> </div>

17
src/components/Experts/ExpertsList.tsx
View File

@ -10,13 +10,12 @@ import { Link, useRouter } from '../../navigation';
import { ExpertsData, Filter, GeneralFilter } from '../../types/experts'; import { ExpertsData, Filter, GeneralFilter } from '../../types/experts';
import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter'; import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter';
import { getExpertsList } from '../../actions/experts'; import { getExpertsList } from '../../actions/experts';
import { CustomPagination, CustomSpin } from '../view'; import { CustomPagination } from '../view/CustomPagination';
import { CustomSpin } from '../view/CustomSpin';
import { i18nText } from '../../i18nKeys';
type ExpertListProps = { type ExpertListProps = {
data?: ExpertsData; data?: ExpertsData;
priceTitle: string;
durationTitle: string;
detailButton: string;
locale: string; locale: string;
baseFilter: Filter; baseFilter: Filter;
pageSize: number; pageSize: number;
@ -25,9 +24,6 @@ type ExpertListProps = {
export const ExpertsList = ({ export const ExpertsList = ({
data, data,
priceTitle,
durationTitle,
detailButton,
locale, locale,
baseFilter, baseFilter,
pageSize, pageSize,
@ -35,7 +31,8 @@ export const ExpertsList = ({
}: ExpertListProps) => { }: ExpertListProps) => {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter(); const router = useRouter();
const getTitle = (str: string, value?: any): string => (value ? str.replace('0', value) : str); const getDuration = (value?: any): string => `${value || 0}${locale === 'ru' ? 'мин' : 'min'}`;
const getPrice = (value?: any): string => `${value || 0}€`;
const [experts, setExperts] = useState<ExpertsData | undefined>(); const [experts, setExperts] = useState<ExpertsData | undefined>();
const [loading, setLoading] = useState<boolean>(true); const [loading, setLoading] = useState<boolean>(true);
@ -105,7 +102,7 @@ export const ExpertsList = ({
<div className="card-profile__header__name">{`${item.name} ${item?.surname || ''}`}</div> <div className="card-profile__header__name">{`${item.name} ${item?.surname || ''}`}</div>
</Link> </Link>
<div className="card-profile__header__price"> <div className="card-profile__header__price">
{getTitle(priceTitle, item?.sessionCost)} <span>/ {getTitle(durationTitle, item?.sessionDuration)}</span> {getPrice(item?.sessionCost)} <span>/ {getDuration(item?.sessionDuration)}</span>
</div> </div>
</div> </div>
<div className="card-profile__header__lang"> <div className="card-profile__header__lang">
@ -134,7 +131,7 @@ export const ExpertsList = ({
<div className="card-profile__desc">{item?.description}</div> <div className="card-profile__desc">{item?.description}</div>
<div className="card-profile__footer"> <div className="card-profile__footer">
<Link href={`/experts/${item?.id}` as any}> <Link href={`/experts/${item?.id}` as any}>
{detailButton} {i18nText('details', locale)}
<RightOutlined style={{ fontSize: '10px', padding: '0 7px' }}/> <RightOutlined style={{ fontSize: '10px', padding: '0 7px' }}/>
</Link> </Link>
</div> </div>

25
src/components/Experts/Filter.tsx
View File

@ -8,7 +8,10 @@ import { useRouter } from '../../navigation';
import { Filter } from '../../types/experts'; import { Filter } from '../../types/experts';
import { Languages, SearchData, Tag } from '../../types/tags'; import { Languages, SearchData, Tag } from '../../types/tags';
import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter'; import { getObjectByFilter, getObjectByAdditionalFilter } from '../../utils/filter';
import { CustomSwitch, CustomSlider, CustomInput } from '../view'; import { CustomSwitch } from '../view/CustomSwitch';
import { CustomSlider } from '../view/CustomSlider';
import { CustomInput } from '../view/CustomInput';
import { i18nText } from '../../i18nKeys';
type ExpertsFilterProps = { type ExpertsFilterProps = {
searchData?: SearchData; searchData?: SearchData;
@ -16,7 +19,7 @@ type ExpertsFilterProps = {
basePath: string; basePath: string;
priceTitle: string; priceTitle: string;
durationTitle: string; durationTitle: string;
buttonApply: string; locale: string;
}; };
export const ExpertsFilter = ({ export const ExpertsFilter = ({
@ -25,7 +28,7 @@ export const ExpertsFilter = ({
basePath, basePath,
priceTitle, priceTitle,
durationTitle, durationTitle,
buttonApply locale
}: ExpertsFilterProps) => { }: ExpertsFilterProps) => {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter(); const router = useRouter();
@ -161,7 +164,9 @@ export const ExpertsFilter = ({
const getLangList = () => { const getLangList = () => {
const reg = searchLang ? new RegExp(searchLang, 'ig') : ''; const reg = searchLang ? new RegExp(searchLang, 'ig') : '';
const langList = reg ? (languages || []).filter(({ code, nativeSpelling }) => reg.test(code) || reg.test(nativeSpelling)) : languages; const langList = reg ? (languages || []).filter(({ code, nativeSpelling }) => reg.test(code) || reg.test(nativeSpelling)) : languages;
return langList?.length && getList('userLanguages', langList.map(({ code, nativeSpelling }) => ({ id: code, name: nativeSpelling }))) return langList?.length
? getList('userLanguages', langList.map(({ code, nativeSpelling }) => ({ id: code, name: nativeSpelling })))
: null;
}; };
const getTagsList = () => { const getTagsList = () => {
@ -185,7 +190,7 @@ export const ExpertsFilter = ({
key: 'userLanguages', key: 'userLanguages',
label: ( label: (
<> <>
<div className="b-filter__collapsed__title">Session Language</div> <div className="b-filter__collapsed__title">{i18nText('sessionLang', locale)}</div>
{!openedTabs.includes('userLanguages') && filter?.userLanguages?.length > 0 && ( {!openedTabs.includes('userLanguages') && filter?.userLanguages?.length > 0 && (
<div className="b-filter__collapsed__desc">{getSelectedLanguage()}</div> <div className="b-filter__collapsed__desc">{getSelectedLanguage()}</div>
)} )}
@ -194,7 +199,7 @@ export const ExpertsFilter = ({
children: ( children: (
<> <>
<CustomInput <CustomInput
placeholder="Search" placeholder={i18nText('search', locale)}
value={searchLang} value={searchLang}
onChange={(e) => setSearchLang(e.target?.value)} onChange={(e) => setSearchLang(e.target?.value)}
allowClear allowClear
@ -218,7 +223,7 @@ export const ExpertsFilter = ({
children: ( children: (
<> <>
<CustomInput <CustomInput
placeholder="Search" placeholder={i18nText('search', locale)}
value={searchTags} value={searchTags}
onChange={(e) => setSearchTags(e.target?.value)} onChange={(e) => setSearchTags(e.target?.value)}
allowClear allowClear
@ -246,7 +251,7 @@ export const ExpertsFilter = ({
onChange={onChangeTab} onChange={onChangeTab}
/> />
<div className="b-filter__block"> <div className="b-filter__block">
<h3 className="title-h3">Price</h3> <h3 className="title-h3">{i18nText('price', locale)}</h3>
<div className="b-filter__slider"> <div className="b-filter__slider">
<CustomSlider <CustomSlider
range range
@ -260,7 +265,7 @@ export const ExpertsFilter = ({
<div className="b-filter__description">{priceTitle}</div> <div className="b-filter__description">{priceTitle}</div>
</div> </div>
<div className="b-filter__block"> <div className="b-filter__block">
<h3 className="title-h3">Duration</h3> <h3 className="title-h3">{i18nText('duration', locale)}</h3>
<div className="b-filter__slider"> <div className="b-filter__slider">
<CustomSlider <CustomSlider
range range
@ -277,7 +282,7 @@ export const ExpertsFilter = ({
className="btn-apply" className="btn-apply"
onClick={goToFilterPage} onClick={goToFilterPage}
> >
{buttonApply} {i18nText('apply', locale)}
</Button> </Button>
</div> </div>
); );

6
src/components/Modals/authModalContent/EnterContent.tsx
View File

@ -4,7 +4,11 @@ import Image from 'next/image';
import { AUTH_USER } from '../../../constants/common'; import { AUTH_USER } from '../../../constants/common';
import { getAuth } from '../../../actions/auth'; import { getAuth } from '../../../actions/auth';
import { getPersonalData } from '../../../actions/profile'; import { getPersonalData } from '../../../actions/profile';
import { CustomInput, CustomInputPassword, FilledButton, OutlinedButton, LinkButton } from '../../view'; import { CustomInput } from '../../view/CustomInput';
import { CustomInputPassword } from '../../view/CustomInputPassword';
import { FilledButton } from '../../view/FilledButton';
import { OutlinedButton } from '../../view/OutlinedButton';
import { LinkButton } from '../../view/LinkButton';
type EnterProps = { type EnterProps = {
form: FormInstance; form: FormInstance;

2
src/components/Modals/authModalContent/FinishContent.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { FilledButton } from '../../view'; import { FilledButton } from '../../view/FilledButton';
export const FinishContent = () => ( export const FinishContent = () => (
<> <>

5
src/components/Modals/authModalContent/RegisterContent.tsx
View File

@ -3,7 +3,10 @@ import { Form, FormInstance, notification } from 'antd';
import { AUTH_USER } from '../../../constants/common'; import { AUTH_USER } from '../../../constants/common';
import { getRegister } from '../../../actions/auth'; import { getRegister } from '../../../actions/auth';
import { setPersonData } from '../../../actions/profile'; import { setPersonData } from '../../../actions/profile';
import { CustomInput, CustomInputPassword, FilledButton, OutlinedButton } from '../../view'; import { CustomInput } from '../../view/CustomInput';
import { CustomInputPassword } from '../../view/CustomInputPassword';
import { FilledButton } from '../../view/FilledButton';
import { OutlinedButton } from '../../view/OutlinedButton';
type RegisterProps = { type RegisterProps = {
form: FormInstance; form: FormInstance;

4
src/components/Modals/authModalContent/ResetContent.tsx
View File

@ -1,6 +1,8 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { Form, FormInstance } from 'antd'; import { Form, FormInstance } from 'antd';
import { CustomInput, FilledButton, LinkButton } from '../../view'; import { CustomInput } from '../../view/CustomInput';
import { FilledButton } from '../../view/FilledButton';
import { LinkButton } from '../../view/LinkButton';
type ResetProps = { type ResetProps = {
form: FormInstance; form: FormInstance;

35
src/components/Page/Footer/index.tsx
View File

@ -2,8 +2,9 @@ import React from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { Link as IntlLink } from '../../../navigation'; import { Link as IntlLink } from '../../../navigation';
import { i18nText } from '../../../i18nKeys';
export const Footer = () => { export const Footer = ({ locale }: { locale: string }) => {
const t = useTranslations('Footer'); const t = useTranslations('Footer');
return ( return (
@ -11,22 +12,22 @@ export const Footer = () => {
<div className="b-inner"> <div className="b-inner">
<div className="row"> <div className="row">
<div className="col"> <div className="col">
<a href="/" className="b-footer__logo"> <IntlLink href={'/' as any} className="b-footer__logo">
<img className="" src="/images/footer-logo.svg" alt=""/> <img className="" src="/images/footer-logo.svg" alt=""/>
</a> </IntlLink>
</div> </div>
<div className="col-md-auto"> <div className="col-md-auto">
<div className="b-footer__row"> <div className="b-footer__row">
<div className="b-footer__coll"> <div className="b-footer__coll">
<div className="b-footer__coll__item"> <div className="b-footer__coll__item">
<a href={`mailto:${t('email')}`} className="b-footer__link"> <Link href={`mailto:${t('email')}`} className="b-footer__link">
<img className="" src="/images/mail-outline.svg" alt=""/> <img className="" src="/images/mail-outline.svg" alt=""/>
{t('email')} {t('email')}
</a> </Link>
<a href="#" className="b-footer__link"> <Link href="#" className="b-footer__link">
<img className="" src="/images/call-outline.svg" alt=""/> <img className="" src="/images/call-outline.svg" alt=""/>
{t('phone')} {t('phone')}
</a> </Link>
</div> </div>
<span className="b-footer__text"> <span className="b-footer__text">
<img className="" src="/images/location-outline.svg" alt=""/> <img className="" src="/images/location-outline.svg" alt=""/>
@ -35,19 +36,23 @@ export const Footer = () => {
</div> </div>
<div className="b-footer__coll-2"> <div className="b-footer__coll-2">
<div className="b-footer__coll-2__item"> <div className="b-footer__coll-2__item">
<IntlLink href={'/faq' as any} className="b-footer__link">{t('menu.faq')}</IntlLink> <IntlLink href={'/faq' as any} className="b-footer__link">
<Link href={'/docs/BBUDDY_privacy_policy_fin.docx' as any} className="b-footer__link">{t(`menu.privacy-policy`)}</Link> {i18nText('footer.faq', locale)}
</IntlLink>
<Link href={'/docs/BBUDDY_privacy_policy_fin.docx' as any} className="b-footer__link">
{i18nText('footer.policy', locale)}
</Link>
</div> </div>
<div className="b-footer__social"> <div className="b-footer__social">
<a href="#" className="b-footer__link"> <Link href="#" className="b-footer__link">
<img className="" src="/images/logo-facebook.svg" alt=""/> <img className="" src="/images/logo-facebook.svg" alt=""/>
</a> </Link>
<a href="#" className="b-footer__link"> <Link href="#" className="b-footer__link">
<img className="" src="/images/logo-instagram.svg" alt=""/> <img className="" src="/images/logo-instagram.svg" alt=""/>
</a> </Link>
<a href="#" className="b-footer__link"> <Link href="#" className="b-footer__link">
<img className="" src="/images/logo-linkedin.svg" alt=""/> <img className="" src="/images/logo-linkedin.svg" alt=""/>
</a> </Link>
</div> </div>
</div> </div>
</div> </div>

40
src/components/Page/Header/HeaderAuthLinks.tsx
View File

@ -1,35 +1,21 @@
'use client'; 'use client'
import React, { FC, useState, useEffect } from 'react'; import React, { FC, useState, useEffect } from 'react';
import { Button } from 'antd'; import { Button } from 'antd';
import { useSelectedLayoutSegment } from 'next/navigation'; import { useSelectedLayoutSegment } from 'next/navigation';
import { styled } from 'styled-components';
import { Link } from '../../../navigation'; import { Link } from '../../../navigation';
import { AUTH_TOKEN_KEY } from '../../../constants/common'; import { AUTH_TOKEN_KEY } from '../../../constants/common';
import { useLocalStorage } from '../../../hooks/useLocalStorage'; import { useLocalStorage } from '../../../hooks/useLocalStorage';
import { AuthModal } from '../../Modals/AuthModal'; import { AuthModal } from '../../Modals/AuthModal';
import { i18nText } from '../../../i18nKeys';
type HeaderAuthLinksProps = { type HeaderAuthLinksProps = {
enterTitle: string; locale: string;
registerTitle: string;
accountTitle: string;
separatorClass?: string; separatorClass?: string;
}; };
const LinkButton = styled(Button)`
color: #66A5AD !important;
font-size: 16px !important;
height: auto !important;
padding: 0 !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: normal !important;
`;
export const HeaderAuthLinks: FC<HeaderAuthLinksProps> = ({ export const HeaderAuthLinks: FC<HeaderAuthLinksProps> = ({
enterTitle, locale,
registerTitle,
accountTitle,
separatorClass = 'b-header__nav__list__line' separatorClass = 'b-header__nav__list__line'
}) => { }) => {
const [isOpenModal, setIsOpenModal] = useState<boolean>(false); const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
@ -52,29 +38,33 @@ export const HeaderAuthLinks: FC<HeaderAuthLinksProps> = ({
return token return token
? ( ? (
<li> <li>
<Link href={'/account/sessions' as any} className={pathname === 'account' ? 'active' : ''}>{accountTitle}</Link> <Link href={'/account/sessions' as any} className={pathname === 'account' ? 'active' : ''}>
{i18nText('account', locale)}
</Link>
</li> </li>
) )
: ( : (
<> <>
<li> <li>
<LinkButton <Button
className="b-header__auth"
type="link" type="link"
onClick={() => onOpen('register')} onClick={() => onOpen('register')}
> >
{registerTitle} {i18nText('registration', locale)}
</LinkButton> </Button>
</li> </li>
<li> <li>
<span className={separatorClass}>|</span> <span className={separatorClass}>|</span>
</li> </li>
<li> <li>
<LinkButton <Button
className="b-header__auth"
type="link" type="link"
onClick={() => onOpen('enter')} onClick={() => onOpen('enter')}
> >
{enterTitle} {i18nText('enter', locale)}
</LinkButton> </Button>
</li> </li>
<AuthModal <AuthModal
open={isOpenModal} open={isOpenModal}

12
src/components/Page/Header/HeaderMenu.tsx
View File

@ -6,16 +6,12 @@ import { Link } from '../../../navigation';
import { HeaderAuthLinks } from './HeaderAuthLinks'; import { HeaderAuthLinks } from './HeaderAuthLinks';
type HeaderMenuProps = { type HeaderMenuProps = {
enterTitle: string; locale: string;
registerTitle: string;
accountTitle: string;
linkConfig: { path: string, title: string }[]; linkConfig: { path: string, title: string }[];
}; };
export const HeaderMenu = ({ export const HeaderMenu = ({
enterTitle, locale,
registerTitle,
accountTitle,
linkConfig linkConfig
}: HeaderMenuProps) => { }: HeaderMenuProps) => {
const selectedLayoutSegment = useSelectedLayoutSegment(); const selectedLayoutSegment = useSelectedLayoutSegment();
@ -24,13 +20,13 @@ export const HeaderMenu = ({
return ( return (
<div className="b-header__nav"> <div className="b-header__nav">
<nav> <nav>
<ul className="b-header__nav__list "> <ul className="b-header__nav__list">
{linkConfig.map(({ path, title }) => ( {linkConfig.map(({ path, title }) => (
<li key={path}> <li key={path}>
<Link href={`/${path}` as any} className={pathname === path ? 'active' : ''}>{title}</Link> <Link href={`/${path}` as any} className={pathname === path ? 'active' : ''}>{title}</Link>
</li> </li>
))} ))}
<HeaderAuthLinks enterTitle={enterTitle} registerTitle={registerTitle} accountTitle={accountTitle} /> <HeaderAuthLinks locale={locale} />
</ul> </ul>
</nav> </nav>
</div> </div>

14
src/components/Page/Header/HeaderMobileMenu.tsx
View File

@ -6,17 +6,13 @@ import { HeaderAuthLinks } from './HeaderAuthLinks';
import { Link } from '../../../navigation'; import { Link } from '../../../navigation';
type HeaderMenuMobileProps = { type HeaderMenuMobileProps = {
locale: string;
linkConfig: { path: string, title: string }[]; linkConfig: { path: string, title: string }[];
enterTitle: string;
registerTitle: string;
accountTitle: string;
}; };
export const HeaderMobileMenu: FC<HeaderMenuMobileProps> = ({ export const HeaderMobileMenu: FC<HeaderMenuMobileProps> = ({
linkConfig, locale,
enterTitle, linkConfig
registerTitle,
accountTitle
}) => { }) => {
const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false); const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
const selectedLayoutSegment = useSelectedLayoutSegment(); const selectedLayoutSegment = useSelectedLayoutSegment();
@ -41,9 +37,7 @@ export const HeaderMobileMenu: FC<HeaderMenuMobileProps> = ({
<ul className="menu-mobile__header__nav"> <ul className="menu-mobile__header__nav">
<HeaderAuthLinks <HeaderAuthLinks
separatorClass="menu-mobile__header__nav__line" separatorClass="menu-mobile__header__nav__line"
enterTitle={enterTitle} locale={locale}
registerTitle={registerTitle}
accountTitle={accountTitle}
/> />
</ul> </ul>
</div> </div>

34
src/components/Page/Header/index.tsx
View File

@ -1,21 +1,19 @@
import React, { FC } from 'react'; import React, { FC, Suspense } from 'react';
import { useTranslations } from 'next-intl';
import { HeaderMenu } from './HeaderMenu'; import { HeaderMenu } from './HeaderMenu';
import { LanguageSwitcher } from './LanguageSwitcher'; import { LanguageSwitcher } from './LanguageSwitcher';
import { HeaderMobileMenu } from './HeaderMobileMenu'; import { HeaderMobileMenu } from './HeaderMobileMenu';
import { HEAD_ROUTES } from '../../../constants/routes'; import { HEAD_ROUTES } from '../../../constants/routes';
import { Link } from '../../../navigation'; import { Link } from '../../../navigation';
import { i18nText } from '../../../i18nKeys';
type HeaderProps = { type HeaderProps = {
locale: string; locale: string;
}; };
export const Header: FC<HeaderProps> = ({ locale }) => { export const Header: FC<HeaderProps> = ({ locale }) => {
const t = useTranslations('Header');
const routes: { path: string, title: string }[] = HEAD_ROUTES.map((item) => ({ const routes: { path: string, title: string }[] = HEAD_ROUTES.map((item) => ({
path: item, path: item,
title: t(`menu.${item}`) title: i18nText(`menu.${item}`, locale)
})); }));
return ( return (
@ -29,21 +27,21 @@ export const Header: FC<HeaderProps> = ({ locale }) => {
alt="" alt=""
/> />
</Link> </Link>
<HeaderMenu <Suspense>
enterTitle={t('enter')} <HeaderMenu
registerTitle={t('registration')} locale={locale}
accountTitle={t('account')} linkConfig={routes}
linkConfig={routes} />
/> <LanguageSwitcher locale={locale} />
<LanguageSwitcher locale={locale} /> </Suspense>
</div> </div>
</header> </header>
<HeaderMobileMenu <Suspense>
enterTitle={t('enter')} <HeaderMobileMenu
registerTitle={t('registration')} locale={locale}
accountTitle={t('account')} linkConfig={routes}
linkConfig={routes} />
/> </Suspense>
</> </>
); );
}; };

34
src/components/view/CustomInput.tsx
View File

@ -1,34 +1,4 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import { Input } from 'antd';
import { Input as AntdInput } from 'antd';
const Input = styled(AntdInput)` export const CustomInput = (props: any) => <Input rootClassName="b-input" {...props} />;
padding: 15px 16px !important;
background: #F8F8F7 !important;
border: 1px solid #F8F8F7 !important;
border-radius: 8px !important;
color: #000 !important;
align-items: center;
input {
background-color: transparent !important;
}
&:focus, &:hover, &:focus-within {
border-color: #66A5AD !important;
box-shadow: none !important;
}
&::placeholder {
color: #000 !important;
opacity: .4 !important;
}
&.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless) {
border-color: #ff4d4f !important;
}
`;
export const CustomInput = (props: any) => (
<Input {...props} />
);

33
src/components/view/CustomInputPassword.tsx
View File

@ -1,37 +1,10 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import { Input } from 'antd';
import { Input as AntdInput } from 'antd';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'; import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
const Input = styled(AntdInput.Password)`
padding: 15px 16px !important;
background: #F8F8F7 !important;
border: 1px solid #F8F8F7 !important;
border-radius: 8px !important;
color: #000 !important;
box-shadow: none !important;
input {
background: transparent !important;
}
&:focus, &:hover, &.ant-input-affix-wrapper-focused {
border-color: #66A5AD !important;
box-shadow: none !important;
}
input::placeholder {
color: #000 !important;
opacity: .4 !important;
}
&.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless) {
border-color: #ff4d4f !important;
}
`;
export const CustomInputPassword = (props: any) => ( export const CustomInputPassword = (props: any) => (
<Input <Input.Password
rootClassName="b-input-password"
iconRender={(visible) => (visible iconRender={(visible) => (visible
? <EyeOutlined style={{ color: '#2C7873', fontSize: 20, opacity: .3 }} /> ? <EyeOutlined style={{ color: '#2C7873', fontSize: 20, opacity: .3 }} />
: <EyeInvisibleOutlined style={{ color: '#2C7873', fontSize: 20 }} /> : <EyeInvisibleOutlined style={{ color: '#2C7873', fontSize: 20 }} />

73
src/components/view/CustomMultiSelect.tsx
View File

@ -1,71 +1,11 @@
'use client'
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import styled from 'styled-components'; import { Select, Tag } from 'antd';
import { Select as AntdSelect, Tag } from 'antd';
import type { SelectProps } from 'antd'; import type { SelectProps } from 'antd';
type TagRender = SelectProps['tagRender']; type TagRender = SelectProps['tagRender'];
const Select = styled(AntdSelect)`
width: 100% !important;
height: 54px !important;
.ant-select-selector {
background-color: #F8F8F7 !important;
border-color: #F8F8F7 !important;
border-radius: 8px !important;
padding: 22px 16px 8px !important;
box-shadow: none !important;
.ant-select-selection-item {
font-size: 15px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #313131 !important;
}
}
.ant-select-selection-overflow-item {
margin-right: 4px;
}
.ant-select-arrow {
color: #2c7873 !important;
}
&.ant-select-focused, &:hover {
.ant-select-selector {
border-color: #2c7873 !important;
box-shadow: none !important;
}
}
`;
const SelectWrap = styled.div`
position: relative;
width: 100%;
`;
const SelectLabel = styled.div`
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 24px;
color: #000;
opacity: .3;
position: absolute;
left: 16px;
top: 15px;
z-index: 1;
transition: all .1s ease;
.b-multiselect__active & {
font-size: 12px;
font-weight: 300;
line-height: 14px;
top: 8px;
}
`;
const tagRender: TagRender = (props) => { const tagRender: TagRender = (props) => {
const { label } = props; const { label } = props;
@ -89,9 +29,10 @@ export const CustomMultiSelect = (props: any) => {
}, [value]); }, [value]);
return ( return (
<SelectWrap className={isActiveLabel ? 'b-multiselect__active' : ''}> <div className={`b-multiselect-wrap ${isActiveLabel ? 'b-multiselect__active' : ''}`}>
<SelectLabel>{label}</SelectLabel> <div className="b-multiselect-label">{label}</div>
<Select <Select
className="b-multiselect"
mode="multiple" mode="multiple"
value={value} value={value}
showSearch={false} showSearch={false}
@ -101,6 +42,6 @@ export const CustomMultiSelect = (props: any) => {
onBlur={() => setIsActiveLabel(!!value?.length)} onBlur={() => setIsActiveLabel(!!value?.length)}
{...other} {...other}
/> />
</SelectWrap> </div>
); );
}; };

47
src/components/view/CustomPagination.tsx
View File

@ -1,49 +1,5 @@
'use client';
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import { Pagination, PaginationProps } from 'antd';
import { Pagination as AntdPagination, PaginationProps } from 'antd';
const Pagination = styled(AntdPagination)`
display: flex;
gap: 8px;
.ant-pagination-item {
margin-inline-end: 0 !important;
height: 40px !important;
width: 40px !important;
border-radius: 8px !important;
line-height: 38px !important;
font-family: var(--font-inter) !important;
font-weight: 400 !important;
border-color: #2c7873 !important;
font-size: 16px !important;
a {
color: #2c7873 !important;
}
}
.ant-pagination-jump-next {
margin-inline-end: 0 !important;
height: 40px !important;
width: 40px !important;
line-height: 38px !important;
}
.ant-pagination-item-active {
background: #2c7873 !important;
a {
color: #fff !important;
}
}
.ant-pagination-item:not(.ant-pagination-item-active):active,
.ant-pagination-item:not(.ant-pagination-item-active):hover {
background-color: rgba(44, 120, 115, 0.06) !important;
}
`;
const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => { const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
if (type === 'prev' || type === 'next') { if (type === 'prev' || type === 'next') {
@ -55,6 +11,7 @@ const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) =>
export const CustomPagination = (props: PaginationProps) => ( export const CustomPagination = (props: PaginationProps) => (
<Pagination <Pagination
rootClassName="b-pagination"
itemRender={itemRender} itemRender={itemRender}
defaultCurrent={1} defaultCurrent={1}
showTitle={false} showTitle={false}

25
src/components/view/CustomRate.tsx
View File

@ -1,25 +1,4 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import { Rate } from 'antd';
import { Rate as AntdRate } from 'antd';
const Rate = styled(AntdRate)` export const CustomRate = (props: any) => <Rate rootClassName="b-rate" {...props} />;
display: inline-flex !important;
gap: 4px;
li {
margin-inline-end: 0 !important;
padding: 5px 0 0 !important;
&.ant-rate-star-full span {
color: #ffbd00 !important;
}
&.ant-rate-star-zero span {
color: #c4dfe6 !important;
}
}
`;
export const CustomRate = (props: any) => (
<Rate {...props} />
);

69
src/components/view/CustomSelect.tsx
View File

@ -1,63 +1,7 @@
'use client'
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import styled from 'styled-components'; import { Select } from 'antd';
import { Select as AntdSelect} from 'antd';
const Select = styled(AntdSelect)`
width: 100% !important;
height: 54px !important;
.ant-select-selector {
background-color: #F8F8F7 !important;
border-color: #F8F8F7 !important;
border-radius: 8px !important;
padding: 22px 16px 8px !important;
box-shadow: none !important;
.ant-select-selection-item {
font-size: 15px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #313131 !important;
}
}
.ant-select-arrow {
color: #2c7873 !important;
}
&.ant-select-focused, &:hover {
.ant-select-selector {
border-color: #2c7873 !important;
box-shadow: none !important;
}
}
`;
const SelectWrap = styled.div`
position: relative;
width: 100%;
`;
const SelectLabel = styled.div`
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 24px;
color: #000;
opacity: .3;
position: absolute;
left: 16px;
top: 15px;
z-index: 1;
transition: all .1s ease;
.b-select__active & {
font-size: 12px;
font-weight: 300;
line-height: 14px;
top: 8px;
}
`;
export const CustomSelect = (props: any) => { export const CustomSelect = (props: any) => {
const { label, value, ...other } = props; const { label, value, ...other } = props;
@ -72,14 +16,15 @@ export const CustomSelect = (props: any) => {
}, [value]); }, [value]);
return ( return (
<SelectWrap className={isActiveLabel ? 'b-select__active' : ''}> <div className={`b-select-wrap ${isActiveLabel ? 'b-select__active' : ''}`}>
<SelectLabel>{label}</SelectLabel> <div className="b-select-label">{label}</div>
<Select <Select
className="b-select"
value={value} value={value}
onFocus={!isActiveLabel ? () => setIsActiveLabel(true) : undefined} onFocus={!isActiveLabel ? () => setIsActiveLabel(true) : undefined}
onBlur={() => setIsActiveLabel(!!value)} onBlur={() => setIsActiveLabel(!!value)}
{...other} {...other}
/> />
</SelectWrap> </div>
); );
}; };

49
src/components/view/CustomSlider.tsx
View File

@ -1,49 +1,4 @@
'use client';
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import { Slider } from 'antd';
import { Slider as AntdSlider } from 'antd';
const Slider = styled(AntdSlider)` export const CustomSlider = (props: any) => <Slider className="b-slider" {...props} />;
padding-block: 7px !important;
height: 16px !important;
.ant-slider-rail {
background-color: #E5E5E5 !important;
}
.ant-slider-track {
background-color: #66A5AD !important;
}
.ant-slider-handle {
width: 16px !important;
height: 16px !important;
&::before {
width: 16px !important;
height: 16px !important;
inset-inline-start: 0 !important;
inset-block-start: 0 !important;
}
&::after {
width: 16px !important;
height: 16px !important;
background-color: #66A5AD !important;
inset-inline-start: 0 !important;
inset-block-start: 0 !important;
box-shadow: none !important;
}
&:focus, &:hover {
&::after {
box-shadow: 0 0 0 12px rgba(102, 165, 173, .2) !important;
}
}
}
`;
export const CustomSlider = (props: any) => (
<Slider {...props} />
);

12
src/components/view/CustomSpin.tsx
View File

@ -1,12 +1,4 @@
import React from 'react'; import React from 'react';
import { Spin as AntdSpin } from 'antd'; import { Spin } from 'antd';
import { styled } from 'styled-components';
const Spin = styled(AntdSpin)` export const CustomSpin = (props: any) => <Spin className="b-spin" {...props} />;
width: 100%;
margin: 24px 0;
`;
export const CustomSpin = (props: any) => (
<Spin {...props} />
);

34
src/components/view/CustomSwitch.tsx
View File

@ -1,34 +1,4 @@
'use client';
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import { Switch } from 'antd';
import { Switch as AntdSwitch } from 'antd';
const Switch = styled(AntdSwitch)` export const CustomSwitch = (props: any) => <Switch className="b-switch" {...props} />;
height: 24px !important;
background: #F8F8F7 !important;
.ant-switch-handle {
height: 24px !important;
width: 24px !important;
top: 0 !important;
&::before {
box-shadow: none !important;
background: #C4DFE6 !important;
border-radius: 50% !important;
}
}
&.ant-switch-checked {
background: #F8F8F7 !important;
.ant-switch-handle::before {
background: #66A5AD !important;
}
}
`;
export const CustomSwitch = (props: any) => (
<Switch {...props} />
);

13
src/components/view/FilledButton.tsx
View File

@ -1,17 +1,8 @@
import React from 'react'; import React from 'react';
import { styled } from 'styled-components'; import { Button } from 'antd';
import { Button as AntdButton } from 'antd';
const Button = styled(AntdButton)`
background: #66A5AD !important;
font-size: 15px !important;
border-radius: 8px !important;
height: 54px !important;
box-shadow: 0px 2px 4px 0px rgba(102, 165, 173, 0.32) !important;
`;
export const FilledButton = (props: any) => ( export const FilledButton = (props: any) => (
<Button {...props}> <Button className="b-button__filled" {...props}>
{props.children} {props.children}
</Button> </Button>
); );

12
src/components/view/LinkButton.tsx
View File

@ -1,16 +1,8 @@
import React from 'react'; import React from 'react';
import { styled } from 'styled-components'; import { Button } from 'antd';
import { Button as AntdButton } from 'antd';
const Button = styled(AntdButton)`
color: #66A5AD !important;
font-size: 15px !important;
height: auto !important;
padding: 0 !important;
`;
export const LinkButton = (props: any) => ( export const LinkButton = (props: any) => (
<Button {...props}> <Button className="b-button__link" {...props}>
{props.children} {props.children}
</Button> </Button>
); );

22
src/components/view/OutlinedButton.tsx
View File

@ -1,26 +1,8 @@
import React from 'react'; import React from 'react';
import { styled } from 'styled-components'; import { Button } from 'antd';
import { Button as AntdButton } from 'antd';
const Button = styled(AntdButton)`
display: inline-flex !important;
justify-content: center;
align-items: center;
gap: 16px;
border-color: #66A5AD !important;
color: #66A5AD !important;
font-size: 15px !important;
border-radius: 8px !important;
height: 54px !important;
span {
margin-inline-end: 0 !important;
line-height: 15px !important;
}
`;
export const OutlinedButton = (props: any) => ( export const OutlinedButton = (props: any) => (
<Button {...props}> <Button className="b-button__outlined" {...props}>
{props.children} {props.children}
</Button> </Button>
); );

17
src/components/view/index.ts
View File

@ -1,17 +0,0 @@
'use client';
export * from './CustomSwitch';
export * from './CustomSlider';
export * from './CustomPagination';
export * from './CustomRate';
export * from './CustomInput';
export * from './CustomInputPassword';
export * from './CustomSelect';
export * from './CustomMultiSelect';
export * from './CustomSpin';
export * from './FilledButton';
export * from './OutlinedButton';
export * from './LinkButton';
export * from './BackButton';
export * from './WithError';
export * from './Loader';

58
src/i18nKeys/de.ts Normal file
View File

@ -0,0 +1,58 @@
export default {
accountMenu: {
sessions: 'Kommende & letzte Sitzungen',
notifications: 'Benachrichtigung',
support: 'Hilfe & Support',
information: 'Rechtliche Informationen',
settings: 'Profileinstellungen',
messages: 'Nachrichten',
'work-with-us': 'Arbeite mit uns'
},
menu: {
'bb-client': 'Mit BB wachsen',
'bb-expert': 'Werde BB-Experte',
blog: 'Blog&News'
},
registration: 'Registrieren',
enter: 'Anmelden',
account: 'Mein Konto',
logout: 'Abmelden',
deleteAcc: 'Konto löschen',
footer: {
faq: 'FAQ',
policy: 'Datenschutzrichtlinie'
},
session: {
upcoming: 'Kommende Sitzungen',
requested: 'Angefragte Sitzungen',
recent: 'Letzte Sitzungen'
},
photoDesc: 'Füge ein echtes Foto hinzu, mit Gesicht wirkt es immer glaubwürdiger.',
dayStart: 'Tagesbeginn',
topic: 'Thema',
name: 'Name',
surname: 'Nachname',
birthday: 'Geburtsdatum',
oldPass: 'Altes Passwort',
newPass: 'Neues Passwort',
confirmPass: 'Passwort bestätigen',
becomeExpert: '',
insertInfo: 'Füge deine persönlichen Informationen ein, um deine Reise als BBuddy-Experte zu beginnen',
changeUserData: 'Du kannst deine Angaben jederzeit ergänzen oder ändern\n',
price: 'Preis',
duration: 'Dauer',
search: 'Suche',
searchExpert: 'Nach einem Experten suchen',
sort: 'Sortieren',
sortPriceAsc: 'Nach Preis aufsteigend',
sortPriceDesc: 'Nach Preis absteigend',
details: 'Details',
sessionLang: 'Sitzungssprache',
fromTo: 'von $ bis $',
apply: 'Anwenden',
save: 'Speichern',
changePass: 'Passwort ändern',
getStarted: 'Loslegen',
delete: 'Löschen',
today: 'Heute'
}

49
src/i18nKeys/en.ts
View File

@ -7,5 +7,52 @@ export default {
settings: 'Profile Settings', settings: 'Profile Settings',
messages: 'Messages', messages: 'Messages',
'work-with-us': 'Work With Us' 'work-with-us': 'Work With Us'
} },
menu: {
'bb-client': 'Start grow with BB',
'bb-expert': 'Become BB Expert',
blog: 'Blog&News'
},
registration: 'Registration',
enter: 'Enter',
account: 'My Account',
logout: 'Log out',
deleteAcc: 'Delete account',
footer: {
faq: 'FAQ',
policy: 'Privacy Policy'
},
session: {
upcoming: 'Upcoming Sessions',
requested: 'Sessions Requested',
recent: 'Recent Sessions'
},
photoDesc: 'Add a real photo, as a person\'s face is always more credible.',
dayStart: 'Day start',
topic: 'Topic',
name: 'Name',
surname: 'Surname',
birthday: 'Date of Birth',
oldPass: 'Old Password',
newPass: 'New Password',
confirmPass: 'Confirm Password',
becomeExpert: '',
insertInfo: 'Insert your personal information to start your journey as a BBuddy Expert',
changeUserData: 'Your info can either be added or amended at anytime',
price: 'Price',
duration: 'Duration',
search: 'Search',
searchExpert: 'Search for an Expert',
sort: 'Sort',
sortPriceAsc: 'By price ascending',
sortPriceDesc: 'By price descending',
details: 'Details',
sessionLang: 'Session Language',
fromTo: 'from $ to $',
apply: 'Apply',
save: 'Save',
changePass: 'Change password',
getStarted: 'Get started',
delete: 'Delete',
today: 'Today'
} }

58
src/i18nKeys/es.ts Normal file
View File

@ -0,0 +1,58 @@
export default {
accountMenu: {
sessions: 'Próximas y recientes sesiones',
notifications: 'Notificación',
support: 'Ayuda y asistencia',
information: 'Información jurídica',
settings: 'Ajustes del perfil',
messages: 'Mensajes',
'work-with-us': 'Trabaja con nosotros'
},
menu: {
'bb-client': 'Empieza a crecer con BB',
'bb-expert': 'Conviértete en un experto en BB',
blog: 'Blog y noticias'
},
registration: 'Registro',
enter: 'Entrar',
account: 'Mi cuenta',
logout: 'Cerrar sesión',
deleteAcc: 'Eliminar cuenta',
footer: {
faq: 'Preguntas frecuentes',
policy: 'Política de privacidad'
},
session: {
upcoming: 'Próximas sesiones',
requested: 'Sesiones solicitadas',
recent: 'Sesiones recientes'
},
photoDesc: 'Añade una foto real, ya que la cara de una persona siempre es más creíble.',
dayStart: 'Inicio del día',
topic: 'Tema',
name: 'Nombre',
surname: 'Apellido',
birthday: 'Fecha de nacimiento',
oldPass: 'Contraseña antigua',
newPass: 'Nueva contraseña',
confirmPass: 'Confirmar contraseña',
becomeExpert: '',
insertInfo: 'Introduce tu información personal para comenzar tu viaje como experto en BBuddy',
changeUserData: 'Tus datos pueden añadirse o modificarse en cualquier momento',
price: 'Precio',
duration: 'Duración',
search: 'Buscar',
searchExpert: 'Buscar un experto',
sort: 'Ordenar',
sortPriceAsc: 'Por precio ascendente',
sortPriceDesc: 'Por precio descendiente',
details: 'Detalles',
sessionLang: 'Idioma de la sesión',
fromTo: 'de $ a $',
apply: 'Solicitar',
save: 'Guardar',
changePass: 'Cambiar contraseña',
getStarted: 'Empieza',
delete: 'Eliminar',
today: 'Hoy día'
}

58
src/i18nKeys/fr.ts Normal file
View File

@ -0,0 +1,58 @@
export default {
accountMenu: {
sessions: 'Sessions futures et récentes',
notifications: 'Notification',
support: 'Aide et support',
information: 'Informations légales',
settings: 'Paramètres du profil',
messages: 'Messages',
'work-with-us': 'Travaillez avec nous'
},
menu: {
'bb-client': 'Commencez à vous développer avec BB',
'bb-expert': 'Devenez Expert BB',
blog: 'Blog et actus'
},
registration: 'Inscription',
enter: 'Saisir',
account: 'Mon compte',
logout: 'Déconnexion',
deleteAcc: 'Supprimer le compte',
footer: {
faq: 'FAQ',
policy: 'Politique de confidentialité'
},
session: {
upcoming: 'Prochaines sessions',
requested: 'Sessions demandées',
recent: 'Sessions récentes'
},
photoDesc: 'Ajoutez une photo réelle, le visage d\'une personne est toujours plus crédible.',
dayStart: 'Début de la journée',
topic: 'Sujet',
name: 'Prénom',
surname: 'Nom de famille',
birthday: 'Date de naissance',
oldPass: 'Ancien mot de passe',
newPass: 'Nouveau mot de passe',
confirmPass: 'Confirmer le mot de passe',
becomeExpert: '',
insertInfo: 'Insérez vos informations personnelles pour commencer votre voyage en tant qu\'expert BBuddy',
changeUserData: 'Vos informations peuvent être ajoutées ou modifiées à tout moment',
price: 'Prix',
duration: 'Durée',
search: 'Recherche',
searchExpert: 'Rechercher un expert',
sort: 'Trier',
sortPriceAsc: 'Par prix croissant',
sortPriceDesc: 'Par prix décroissant',
details: 'Détails',
sessionLang: 'Langue de la session',
fromTo: 'de $ à $',
apply: 'Appliquer',
save: 'Sauvegarder',
changePass: 'Modifier le mot de passe',
getStarted: 'Commencer',
delete: 'Supprimer',
today: 'Ce jour'
}

12
src/i18nKeys/index.ts
View File

@ -1,14 +1,18 @@
import { Locale } from '../types/locale'; import { Locale } from '../types/locale';
import en from './en'; import en from './en';
import ru from './ru'; import ru from './ru';
import fr from './fr';
import de from './de';
import it from './it';
import es from './es';
const MESSAGES = { const MESSAGES = {
[Locale.en]: en, [Locale.en]: en,
[Locale.ru]: ru, [Locale.ru]: ru,
[Locale.de]: en, [Locale.de]: de,
[Locale.fr]: en, [Locale.fr]: fr,
[Locale.it]: en, [Locale.it]: it,
[Locale.es]: en [Locale.es]: es
}; };
const getValue = (keys: string[], dictionary: any) => { const getValue = (keys: string[], dictionary: any) => {

58
src/i18nKeys/it.ts Normal file
View File

@ -0,0 +1,58 @@
export default {
accountMenu: {
sessions: 'Prossime e recenti sessioni',
notifications: 'Notifica',
support: 'Assistenza e supporto',
information: 'Informazioni legali',
settings: 'Impostazioni profilo',
messages: 'Messaggi',
'work-with-us': 'Lavora con noi'
},
menu: {
'bb-client': 'Inizia a crescere con BB',
'bb-expert': 'Diventa esperto BB',
blog: 'Blog&Notizie'
},
registration: 'Registrazione',
enter: 'Inserisci',
account: 'Il mio account',
logout: 'Disconnetti',
deleteAcc: 'Elimina account',
footer: {
faq: 'Domande frequenti',
policy: 'Informativa sulla privacy'
},
session: {
upcoming: 'Prossime sessioni',
requested: 'Sessioni richieste',
recent: 'Sessioni recenti'
},
photoDesc: 'Aggiungi una foto vera: il volto di una persona è sempre più credibile.',
dayStart: 'Inizio del giorno',
topic: 'Argomento',
name: 'Nome',
surname: 'Cognome',
birthday: 'Data di nascita',
oldPass: 'Vecchia password',
newPass: 'Nuova password',
confirmPass: 'Conferma password',
becomeExpert: '',
insertInfo: 'Inserisci i tuoi dati personali per iniziare il tuo viaggio come esperto BBuddy',
changeUserData: 'I tuoi dati possono essere aggiunti o modificati in qualsiasi momento',
price: 'Prezzo',
duration: 'Durata',
search: 'Ricerca',
searchExpert: 'Cerca un Esperto',
sort: 'Ordina',
sortPriceAsc: 'Per prezzo crescente',
sortPriceDesc: 'Per prezzo decrescente',
details: 'Dettagli',
sessionLang: 'Lingua sessione',
fromTo: 'da $ a $',
apply: 'Applica',
save: 'Salva',
changePass: 'Cambia password',
getStarted: 'Inizia',
delete: 'Elimina',
today: 'Oggi'
}

63
src/i18nKeys/ru.ts
View File

@ -1,11 +1,58 @@
export default { export default {
accountMenu: { accountMenu: {
sessions: 'Upcoming & Recent Sessions', sessions: 'Предстоящие и недавние сессии',
notifications: 'Notification', notifications: 'Уведомления',
support: 'Help & Support', support: 'Служба поддержки',
information: 'Legal Information', information: 'Юридическая информация',
settings: 'Profile Settings', settings: 'Настройки профиля',
messages: 'Messages', messages: 'Сообщения',
'work-with-us': 'Work With Us' 'work-with-us': 'Сотрудничество'
} },
menu: {
'bb-client': 'Начните свой рост с BB',
'bb-expert': 'Станьте экспертом BB',
blog: 'Блог и новости'
},
registration: 'Регистрация',
enter: 'Войти',
account: 'Учетная запись',
logout: 'Выйти',
deleteAcc: 'Удалить учетную запись',
footer: {
faq: 'Частые вопросы',
policy: 'Политика конфиденциальности'
},
session: {
upcoming: 'Предстоящие сессии',
requested: 'Запрошенные сессии',
recent: 'Недавние сессии'
},
photoDesc: 'Добавьте реальную фотографию, ведь лицо человека всегда вызывает больше доверия.',
dayStart: 'День начала',
topic: 'Тема',
name: 'Имя',
surname: 'Фамилия',
birthday: 'Дата рождения',
oldPass: 'Старый пароль',
newPass: 'Новый пароль',
confirmPass: 'Подтвердите пароль',
becomeExpert: '',
insertInfo: 'Введите личные данные и начните свой путь эксперта BBuddy',
changeUserData: 'Добавить и изменить информацию о себе можно в любое время',
price: 'Цена',
duration: 'Длительность',
search: 'Поиск',
searchExpert: 'Поиск эксперта',
sort: 'Сортировать',
sortPriceAsc: 'Цена по возрастанию',
sortPriceDesc: 'Цена по убыванию',
details: 'Информация',
sessionLang: 'Язык сессии',
fromTo: 'от $ до $',
apply: 'Применить',
save: 'Сохранить',
changePass: 'Изменить пароль',
getStarted: 'Начать работу',
delete: 'Удалить',
today: 'Сегодня'
} }

22
src/lib/AntdRegistry.tsx
View File

@ -1,22 +0,0 @@
'use client';
import React from 'react';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import type Entity from '@ant-design/cssinjs/es/Cache';
import { useServerInsertedHTML } from 'next/navigation';
const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
const cache = React.useMemo<Entity>(() => createCache(), []);
const isServerInserted = React.useRef<boolean>(false);
useServerInsertedHTML(() => {
// avoid duplicate css insert
if (isServerInserted.current) {
return;
}
isServerInserted.current = true;
return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />;
});
return <StyleProvider cache={cache}>{children}</StyleProvider>;
};
export default StyledComponentsRegistry;

2
src/styles/_default.scss
View File

@ -320,7 +320,7 @@ a {
margin-bottom: 16px; margin-bottom: 16px;
} }
.ant-collapse-item { .ant-collapse-ghost >.ant-collapse-item, .ant-collapse-item {
border-bottom: 1px solid #C4DFE6; border-bottom: 1px solid #C4DFE6;
border-radius: 0 !important; border-radius: 0 !important;
} }

1
src/styles/_form.scss
View File

@ -109,6 +109,7 @@ textarea {
background-image: url(/images/user-avatar.png); background-image: url(/images/user-avatar.png);
background-position: 50%; background-position: 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover;
input { input {
width: 0.1px; width: 0.1px;

10
src/styles/_header.scss
View File

@ -41,6 +41,16 @@
} }
} }
&__auth {
color: #66A5AD !important;
font-size: 16px !important;
height: auto !important;
padding: 0 !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: normal !important;
}
&__nav { &__nav {
display: flex; display: flex;
align-items: center; align-items: center;

4
src/styles/style.scss
View File

@ -15,4 +15,8 @@
@import "_message.scss"; @import "_message.scss";
@import "_auth-modal.scss"; @import "_auth-modal.scss";
@import "./view/style.scss";

33
src/styles/view/_buttons.scss Normal file
View File

@ -0,0 +1,33 @@
.b-button {
&__filled {
background: #66A5AD !important;
font-size: 15px !important;
border-radius: 8px !important;
height: 54px !important;
box-shadow: 0px 2px 4px 0px rgba(102, 165, 173, 0.32) !important;
}
&__link {
color: #66A5AD !important;
font-size: 15px !important;
height: auto !important;
padding: 0 !important;
}
&__outlined {
display: inline-flex !important;
justify-content: center;
align-items: center;
gap: 16px;
border-color: #66A5AD !important;
color: #66A5AD !important;
font-size: 15px !important;
border-radius: 8px !important;
height: 54px !important;
span {
margin-inline-end: 0 !important;
line-height: 15px !important;
}
}
}

53
src/styles/view/_input.scss Normal file
View File

@ -0,0 +1,53 @@
.b-input {
padding: 15px 16px !important;
background: #F8F8F7 !important;
border: 1px solid #F8F8F7 !important;
border-radius: 8px !important;
color: #000 !important;
align-items: center;
input {
background-color: transparent !important;
}
&:focus, &:hover, &:focus-within {
border-color: #66A5AD !important;
box-shadow: none !important;
}
&::placeholder {
color: #000 !important;
opacity: .4 !important;
}
&.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless) {
border-color: #ff4d4f !important;
}
&-password {
padding: 15px 16px !important;
background: #F8F8F7 !important;
border: 1px solid #F8F8F7 !important;
border-radius: 8px !important;
color: #000 !important;
box-shadow: none !important;
input {
background: transparent !important;
}
&:focus, &:hover, &.ant-input-affix-wrapper-focused {
border-color: #66A5AD !important;
box-shadow: none !important;
}
input::placeholder {
color: #000 !important;
opacity: .4 !important;
}
&.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless) {
border-color: #ff4d4f !important;
}
}
}

40
src/styles/view/_pagination.scss Normal file
View File

@ -0,0 +1,40 @@
.b-pagination {
display: flex;
gap: 8px;
.ant-pagination-item {
margin-inline-end: 0 !important;
height: 40px !important;
width: 40px !important;
border-radius: 8px !important;
line-height: 38px !important;
font-family: var(--font-inter) !important;
font-weight: 400 !important;
border-color: #2c7873 !important;
font-size: 16px !important;
a {
color: #2c7873 !important;
}
}
.ant-pagination-jump-next {
margin-inline-end: 0 !important;
height: 40px !important;
width: 40px !important;
line-height: 38px !important;
}
.ant-pagination-item-active {
background: #2c7873 !important;
a {
color: #fff !important;
}
}
.ant-pagination-item:not(.ant-pagination-item-active):active,
.ant-pagination-item:not(.ant-pagination-item-active):hover {
background-color: rgba(44, 120, 115, 0.06) !important;
}
}

17
src/styles/view/_rate.scss Normal file
View File

@ -0,0 +1,17 @@
.b-rate {
display: inline-flex !important;
gap: 4px;
li {
margin-inline-end: 0 !important;
padding: 5px 0 0 !important;
&.ant-rate-star-full span {
color: #ffbd00 !important;
}
&.ant-rate-star-zero span {
color: #c4dfe6 !important;
}
}
}

116
src/styles/view/_select.scss Normal file
View File

@ -0,0 +1,116 @@
.b-multiselect {
width: 100% !important;
height: 54px !important;
.ant-select-selector {
background-color: #F8F8F7 !important;
border-color: #F8F8F7 !important;
border-radius: 8px !important;
padding: 22px 16px 8px !important;
box-shadow: none !important;
.ant-select-selection-item {
font-size: 15px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #313131 !important;
}
}
.ant-select-selection-overflow-item {
margin-right: 4px;
}
.ant-select-arrow {
color: #2c7873 !important;
}
&.ant-select-focused, &:hover {
.ant-select-selector {
border-color: #2c7873 !important;
box-shadow: none !important;
}
}
&-wrap {
position: relative;
width: 100%;
&.b-multiselect__active .b-multiselect-label {
font-size: 12px;
font-weight: 300;
line-height: 14px;
top: 8px;
}
}
&-label {
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 24px;
color: #000;
opacity: .3;
position: absolute;
left: 16px;
top: 15px;
z-index: 1;
transition: all .1s ease;
}
}
.b-select {
width: 100% !important;
height: 54px !important;
.ant-select-selector {
background-color: #F8F8F7 !important;
border-color: #F8F8F7 !important;
border-radius: 8px !important;
padding: 22px 16px 8px !important;
box-shadow: none !important;
.ant-select-selection-item {
font-size: 15px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #313131 !important;
}
}
.ant-select-arrow {
color: #2c7873 !important;
}
&.ant-select-focused, &:hover {
.ant-select-selector {
border-color: #2c7873 !important;
box-shadow: none !important;
}
}
&-wrap {
position: relative;
width: 100%;
&.b-select__active .b-select-label {
font-size: 12px;
font-weight: 300;
line-height: 14px;
top: 8px;
}
}
&-label {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
color: #000;
opacity: .3;
position: absolute;
left: 16px;
top: 15px;
z-index: 1;
transition: all .1s ease;
}
}

39
src/styles/view/_slider.scss Normal file
View File

@ -0,0 +1,39 @@
.b-slider {
padding-block: 7px !important;
height: 16px !important;
.ant-slider-rail {
background-color: #E5E5E5 !important;
}
.ant-slider-track {
background-color: #66A5AD !important;
}
.ant-slider-handle {
width: 16px !important;
height: 16px !important;
&::before {
width: 16px !important;
height: 16px !important;
inset-inline-start: 0 !important;
inset-block-start: 0 !important;
}
&::after {
width: 16px !important;
height: 16px !important;
background-color: #66A5AD !important;
inset-inline-start: 0 !important;
inset-block-start: 0 !important;
box-shadow: none !important;
}
&:focus, &:hover {
&::after {
box-shadow: 0 0 0 12px rgba(102, 165, 173, .2) !important;
}
}
}
}

4
src/styles/view/_spin.scss Normal file
View File

@ -0,0 +1,4 @@
.b-spin {
width: 100%;
margin: 24px 0;
}

24
src/styles/view/_switch.scss Normal file
View File

@ -0,0 +1,24 @@
.b-switch {
height: 24px !important;
background: #F8F8F7 !important;
.ant-switch-handle {
height: 24px !important;
width: 24px !important;
top: 0 !important;
&::before {
box-shadow: none !important;
background: #C4DFE6 !important;
border-radius: 50% !important;
}
}
&.ant-switch-checked {
background: #F8F8F7 !important;
.ant-switch-handle::before {
background: #66A5AD !important;
}
}
}

8
src/styles/view/style.scss Normal file
View File

@ -0,0 +1,8 @@
@import "_input.scss";
@import "_select.scss";
@import "_pagination.scss";
@import "_rate.scss";
@import "_slider.scss";
@import "_spin.scss";
@import "_switch.scss";
@import "_buttons.scss";