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

feat: add account pages, add static export

This commit is contained in:
Сюткина Дарья Александровна (4047910) 2024-01-03 17:56:57 +04:00
parent b44357f2a5
commit b0fcf64057
27 changed files with 1129 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -14,7 +14,7 @@
/out/
# production
/build
/dist
# ide
/.idea

9
messages/de.json
View File

@ -21,6 +21,15 @@
"settings": "Profile Settings",
"messages": "Messages",
"work-with-us": "Work With Us"
},
"WorkWithUs": {
"title": "Become a BBuddy Expert",
"insert-info": "Insert your personal information to start your journey as a BBuddy Expert",
"start": "Get Started",
"base-text": "Your info can either be added or amended at anytime"
},
"Messages": {
"title": "Messages"
}
},
"Footer": {

9
messages/en.json
View File

@ -22,6 +22,15 @@
"settings": "Profile Settings",
"messages": "Messages",
"work-with-us": "Work With Us"
},
"WorkWithUs": {
"title": "Become a BBuddy Expert",
"insert-info": "Insert your personal information to start your journey as a BBuddy Expert",
"start": "Get Started",
"base-text": "Your info can either be added or amended at anytime"
},
"Messages": {
"title": "Messages"
}
},
"Footer": {

9
messages/es.json
View File

@ -21,6 +21,15 @@
"settings": "Profile Settings",
"messages": "Messages",
"work-with-us": "Work With Us"
},
"WorkWithUs": {
"title": "Become a BBuddy Expert",
"insert-info": "Insert your personal information to start your journey as a BBuddy Expert",
"start": "Get Started",
"base-text": "Your info can either be added or amended at anytime"
},
"Messages": {
"title": "Messages"
}
},
"Footer": {

9
messages/fr.json
View File

@ -21,6 +21,15 @@
"settings": "Profile Settings",
"messages": "Messages",
"work-with-us": "Work With Us"
},
"WorkWithUs": {
"title": "Become a BBuddy Expert",
"insert-info": "Insert your personal information to start your journey as a BBuddy Expert",
"start": "Get Started",
"base-text": "Your info can either be added or amended at anytime"
},
"Messages": {
"title": "Messages"
}
},
"Footer": {

9
messages/it.json
View File

@ -21,6 +21,15 @@
"settings": "Profile Settings",
"messages": "Messages",
"work-with-us": "Work With Us"
},
"WorkWithUs": {
"title": "Become a BBuddy Expert",
"insert-info": "Insert your personal information to start your journey as a BBuddy Expert",
"start": "Get Started",
"base-text": "Your info can either be added or amended at anytime"
},
"Messages": {
"title": "Messages"
}
},
"Footer": {

9
messages/ru.json
View File

@ -21,6 +21,15 @@
"settings": "Настройки профиля",
"messages": "Сообщения",
"work-with-us": "Работать с нами"
},
"WorkWithUs": {
"title": "Become a BBuddy Expert",
"insert-info": "Insert your personal information to start your journey as a BBuddy Expert",
"start": "Get Started",
"base-text": "Your info can either be added or amended at anytime"
},
"Messages": {
"title": "Сообщения"
}
},
"Footer": {

5
next.config.js
View File

@ -13,7 +13,10 @@ const nextConfig = {
},
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
}
},
output: 'export',
cleanDistDir: true,
distDir: 'dist'
};
module.exports = withNextIntl(nextConfig);

14
src/app/[locale]/(main)/layout.tsx
View File

@ -1,6 +1,5 @@
import React, { ReactNode } from 'react';
import { getTranslations } from 'next-intl/server';
import { Header, Footer } from '../../../components/Page';
export async function generateMetadata({
params: { locale }
@ -13,23 +12,18 @@ export async function generateMetadata({
};
}
export default function MainLayout({ children, news, directions, experts, params: { locale } }: {
export default function MainLayout({ children, news, directions, experts }: {
children: ReactNode,
news: ReactNode,
directions: ReactNode,
experts: ReactNode,
params: { locale: string }
experts: ReactNode
}) {
return (
<div className="b-wrapper">
<div className="b-content">
<Header locale={locale} />
<>
{children}
{news}
{directions}
{experts}
</div>
<Footer />
</div>
</>
);
};

71
src/app/[locale]/[userId]/layout.tsx
View File

@ -1,15 +1,64 @@
import React from 'react';
import React, { ReactNode } from 'react';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { AccountMenu } from '../../../components/Account';
export default function Layout({ children }: { children: React.ReactNode }) {
type AccountLayoutProps = {
children: ReactNode;
params: Record<string, string>;
};
export const metadata: Metadata = {
title: 'Bbuddy User Account'
};
export function generateStaticParams({
params: { locale },
}: { params: { locale: string } }) {
const result: { locale: string, userId: string }[] = [];
const users = [{ userId: '1' }, { userId: '2' }];
users.forEach(({ userId }) => {
result.push({ locale, userId });
});
return result;
}
const ROUTES = ['sessions', 'notifications', 'support', 'information', 'settings', 'messages', 'work-with-us'];
const COUNTS: Record<string, number> = {
sessions: 12,
notifications: 5,
messages: 113
};
export default function AccountLayout({ children, params }: AccountLayoutProps) {
if (!params?.userId || isNaN(Number(params?.userId))) notFound();
const t = useTranslations('Account');
const getMenuConfig = () => ROUTES.map((path) => ({
path,
title: t(`menu.${path}`),
count: COUNTS[path] || undefined
}));
return (
<section>
<aside>
<AccountMenu />
<span>Log Out</span>
</aside>
<section>{children}</section>
</section>
)
}
<div className="page-account">
<div className="b-inner">
<div className="row">
<div className="col-xl-3 col-lg-4 d-none d-lg-block">
<AccountMenu userId={params.userId} menu={getMenuConfig()} />
</div>
<div className="col-xl-9 col-lg-8 ">
<div className="page-account__inner">
{children}
</div>
</div>
</div>
</div>
</div>
);
};

69
src/app/[locale]/[userId]/messages/[textId]/page.tsx Normal file
View File

@ -0,0 +1,69 @@
import React from 'react';
import { useTranslations } from 'next-intl';
import { Link } from '../../../../../navigation';
export function generateStaticParams({
params: { locale, userId },
}: { params: { locale: string, userId: string } }) {
const result: { locale: string, userId: string, textId: string }[] = [];
const chats = [{ textId: '1' }, { textId: '2' }, { textId: '3' }];
chats.forEach(({ textId }) => {
result.push({ locale, userId, textId });
});
return result;
}
export default function Message({ params }: { params: { userId: string, textId: string } }) {
const t = useTranslations('Account.Messages');
return (
<>
<ol className="breadcrumb">
<li className="breadcrumb-item">
<Link href={`/${params.userId}/messages` as any}>
{t('title')}
</Link>
</li>
<li className="breadcrumb-item active" aria-current="page">{`Person ${params.textId}`}</li>
</ol>
<div className="b-message">
<div className="b-message__inner">
<div className="b-message__list b-message__list--me">
<div className="b-message__item ">
<div className="b-message__avatar">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="b-message__text">
🤩 It all for you!
<span className="date">07.09.2022</span>
</div>
</div>
</div>
<div className="b-message__list">
<div className="b-message__item">
<div className="b-message__avatar">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="b-message__text">
🤩 It all for you!
<span className="date">07.09.2022</span>
</div>
</div>
</div>
</div>
<form className="b-message__form" action="">
<textarea placeholder="Type your message here" name="" id="" />
<label className="b-message__upload-file">
<input type="file" required />
</label>
<div className="b-message__microphone" />
<button className="b-message__btn" type="submit" />
</form>
</div>
</>
);
};

83
src/app/[locale]/[userId]/messages/page.tsx Normal file
View File

@ -0,0 +1,83 @@
import React from 'react';
import type { Metadata } from 'next';
import { useTranslations } from 'next-intl';
import { Link } from '../../../../navigation';
export const metadata: Metadata = {
title: 'Bbuddy - Account - Messages',
description: 'Bbuddy desc messages'
};
export default function Messages({ params }: { params: { userId: string } }) {
const t = useTranslations('Account.Messages');
return (
<>
<ol className="breadcrumb">
<li className="breadcrumb-item active" aria-current="page">{t('title')}</li>
</ol>
<div className="messages-session">
<Link
className="card-profile"
href={`/${params.userId}/messages/1` as any}
>
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">
David
<span className="count">14</span>
</div>
<div className="card-profile__header__title">
Lorem ipsum dolor sit at, consecte...
</div>
<div className="card-profile__header__date ">
25 may
</div>
</div>
</div>
</Link>
<Link
className="card-profile"
href={`/${params.userId}/messages/2` as any}
>
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">David</div>
<div className="card-profile__header__title">
Lorem ipsum dolor sit at, consecte...
</div>
<div className="card-profile__header__date ">
25 may
</div>
</div>
</div>
</Link>
<Link
className="card-profile"
href={`/${params.userId}/messages/3` as any}
>
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">David</div>
<div className="card-profile__header__title">
Lorem ipsum dolor sit at, consecte...
</div>
<div className="card-profile__header__date ">
25 may
</div>
</div>
</div>
</Link>
</div>
</>
);
};

15
src/app/[locale]/[userId]/notifications/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Bbuddy - Account - Information',
description: 'Bbuddy desc information'
};
export default function Information() {
return (
<div>
Страница Информации о пользователе
</div>
);
}

5
src/app/[locale]/[userId]/page.tsx Normal file
View File

@ -0,0 +1,5 @@
import { redirect } from 'next/navigation';
export default function AccountMainPage({ params }: { params: { userId: string } }) {
redirect(`/${params.userId}/sessions`);
};

15
src/app/[locale]/[userId]/sessions/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Bbuddy - Account - Information',
description: 'Bbuddy desc information'
};
export default function Sessions() {
return (
<div>
Страница Информации о пользователе
</div>
);
}

15
src/app/[locale]/[userId]/settings/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Bbuddy - Account - Information',
description: 'Bbuddy desc information'
};
export default function Information() {
return (
<div>
Страница Информации о пользователе
</div>
);
}

15
src/app/[locale]/[userId]/support/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Bbuddy - Account - Information',
description: 'Bbuddy desc information'
};
export default function Information() {
return (
<div>
Страница Информации о пользователе
</div>
);
}

29
src/app/[locale]/[userId]/work-with-us/page.tsx Normal file
View File

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

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

@ -1,13 +1,196 @@
import React from 'react';
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { Link } from '../../../../navigation';
export const metadata: Metadata = {
title: 'Bbuddy - Experts item',
description: 'Bbuddy desc experts'
};
export default function Expert({ params }: { params: { expertId: string | number } }) {
return (
<div>Current expert: {params.expertId}</div>
);
export function generateStaticParams() {
return [{ expertId: '1' }, { expertId: '2' }];
}
export default function ExpertItem({ params }: { params: { expertId: string } }) {
if (!params?.expertId) notFound();
return (
<div className="b-page">
<div className="b-inner">
<div className="b-page__back">
<Link href={'/experts' as any} className="btn-back">
<img src="/images/arrow-back.svg" className="" alt="" />
Back to experts list
</Link>
</div>
<div className="expert-card">
<div className="expert-card__wrap">
<div className="expert-card__avatar">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="expert-card__inner">
<h1 className="expert-card__title">{`Matthew Weeks | id ${params.expertId}`}</h1>
<div className="expert-card__info">
<span>12 Practice hours</span>
<i>|</i>
<span>15 Supervision per year</span>
</div>
<div className="expert-card__rating">
<img src="/images/stars.svg" className="" alt="" />
<span>4/5 (out of 345)</span>
</div>
</div>
</div>
<div className="expert-card__wrap-btn">
<a href="#" className="btn-apply">
<img src="/images/calendar-outline.svg" className="" alt="" />
Schedule
</a>
<a href="#" className="btn-video">
<img src="/images/videocam-outline.svg" className="" alt="" />
Video
</a>
</div>
</div>
<h2 className="title-h2">Current Offer</h2>
<div className="skills__list">
<div className="skills__list__item">Engineering &amp; Data</div>
<div className="skills__list__item">Communication</div>
<div className="skills__list__item">Communication</div>
</div>
<p className="base-text">
Hello, my name is Marcelo. I am a Senior UX Designer with more than 6 years of experience working
with the largest companies in the world such as Disney, Globant and currently IBM.
During my career, I have helped organizations solve complex problems using aesthetically pleasing
designs with design while building teams and mentoring other designers.
I can help you: <br />
Prepare for interviews, prepare your resume or CV and work on your LinkedIn profile <br />
Get ready for whiteboard challenges and take-home exercises <br />
Create a great portfolio and case study presentation. <br />
Provide industry information. <br />
Professional orientation <br />
Strategic thinking <br /><br />
Oh, and I also speak Spanish!
</p>
<div className="wrap-btn-prise">
<a href="#" className="btn-apply">
Sign Up Now
</a>
<div className="wrap-btn-prise__text">
45$ <span> / 45min</span>
</div>
</div>
<h2 className="title-h2">Expert Background</h2>
<p className="base-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
malesuada, ligula sem tempor risus, non posuere urna diam a libero.
</p>
<h3 className="title-h3">Education</h3>
<p className="base-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
malesuada, ligula sem tempor risus, non posuere urna diam a libero.
</p>
<div className="sertific">
<img src="/images/sertific.png" className="" alt="" />
</div>
<h3 className="title-h3">Professional Certification</h3>
<p className="base-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
malesuada, ligula sem tempor risus, non posuere urna diam a libero.
</p>
<h3 className="title-h3">Trainings | Seminars | Courses</h3>
<p className="base-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
malesuada, ligula sem tempor risus, non posuere urna diam a libero.
</p>
<h3 className="title-h3">MBA Information</h3>
<p className="base-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
malesuada, ligula sem tempor risus, non posuere urna diam a libero.
</p>
<h3 className="title-h3">Managerial Experience</h3>
<p className="base-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
malesuada, ligula sem tempor risus, non posuere urna diam a libero.
</p>
<h3 className="title-h3">Entrepreneurial Experience</h3>
<p className="base-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
malesuada, ligula sem tempor risus, non posuere urna diam a libero.
</p>
<h3 className="title-h3">Successful Cases From Practice</h3>
<div className="case-list">
<div className="skills__list">
<div className="skills__list__item">Engineering &amp; Data</div>
<div className="skills__list__item">Communication</div>
<div className="skills__list__item">Communication</div>
</div>
<p className="base-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
malesuada, ligula sem tempor risus, non posuere urna diam a libero.
</p>
</div>
<div className="case-list">
<div className="skills__list">
<div className="skills__list__item">Engineering &amp; Data</div>
<div className="skills__list__item">Communication</div>
<div className="skills__list__item">Communication</div>
</div>
<p className="base-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
malesuada, ligula sem tempor risus, non posuere urna diam a libero.
</p>
</div>
<h2 className="title-h2">All Offers by this Expert</h2>
<div className="offers-list">
<div className="card-profile">
<div className="card-profile__skills">
<div className="skills__list">
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">Senior Software Engineer</div>
<div className="card-profile__subtitle">Auth0</div>
<div className="card-profile__desc">
I have worked across a variety of organizations, lead teams, and delivered quality software
for 8 years. In that time I've worked as an independent consultant, at agencies as a team
lead, and as a senior engineer at Auth0. I also host a podcast
https://anchor.fm/work-in-programming where I break down how …
</div>
<div className="card-profile__footer">
<a href="#">Details
<img className="" src="/images/chevron-forward.svg" alt="" />
</a>
</div>
</div>
<div className="card-profile">
<div className="card-profile__skills">
<div className="skills__list">
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">Senior Software Engineer</div>
<div className="card-profile__subtitle">Auth0</div>
<div className="card-profile__desc">
I have worked across a variety of organizations, lead teams, and delivered quality software
for 8 years. In that time I've worked as an independent consultant, at agencies as a team
lead, and as a senior engineer at Auth0. I also host a podcast
https://anchor.fm/work-in-programming where I break down how …
</div>
<div className="card-profile__footer">
<a href="#">Details
<img className="" src="/images/chevron-forward.svg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
);
};

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

@ -1,15 +1,182 @@
import React from 'react';
import type { Metadata } from 'next';
import { ExpertsFilter, ExpertsAdditionalFilter } from '../../../components/Experts';
export const metadata: Metadata = {
title: 'Bbuddy - Experts',
description: 'Bbuddy desc experts'
};
export default function Experts() {
export default function Experts({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) {
console.log('search params', searchParams);
return (
<div>
Страница экспертов
<div className="page-search">
<div className="main-find">
<div className="b-inner">
<div className="main-find__top">
<h2 className="title-h2">Find a expert</h2>
<div className="open-filter">
<img src="/images/options-outline.svg" className="" alt="" />
</div>
</div>
<div className="row">
<div className="col-xl-3 col-lg-4 d-none d-lg-block">
<ExpertsFilter />
</div>
<div className="col-xl-9 col-lg-8 ">
<ExpertsAdditionalFilter />
<div className="search-result">
<div className="card-profile">
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">Matthew Weeks</div>
<div className="card-profile__header__price">
45$ <span>/ 45min</span>
</div>
</div>
</div>
<div className="card-profile__skills">
<div className="skills__list">
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">Senior Software Engineer</div>
<div className="card-profile__subtitle">Auth0</div>
<div className="card-profile__desc">
I have worked across a variety of organizations, lead teams, and delivered
quality software for 8 years. In that time I've worked as an independent
consultant, at agencies as a team lead, and as a senior engineer at Auth0. I
also host a podcast https://anchor.fm/work-in-programming where I break down how
…
</div>
<div className="card-profile__footer">
<a href="#">Details
<img className="" src="/images/chevron-forward.svg" alt="" />
</a>
</div>
</div>
<div className="card-profile">
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">Matthew Weeks</div>
<div className="card-profile__header__price">
45$ <span>/ 45min</span>
</div>
</div>
</div>
<div className="card-profile__skills">
<div className="skills__list">
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">Senior Software Engineer</div>
<div className="card-profile__subtitle">Auth0</div>
<div className="card-profile__desc">
I have worked across a variety of organizations, lead teams, and delivered
quality software for 8 years. In that time I've worked as an independent
consultant, at agencies as a team lead, and as a senior engineer at Auth0. I
also host a podcast https://anchor.fm/work-in-programming where I break down how
…
</div>
<div className="card-profile__footer">
<a href="#">Details
<img className="" src="/images/chevron-forward.svg" alt="" />
</a>
</div>
</div>
<div className="card-profile">
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">Matthew Weeks</div>
<div className="card-profile__header__price">
45$ <span>/ 45min</span>
</div>
</div>
</div>
<div className="card-profile__skills">
<div className="skills__list">
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">Senior Software Engineer</div>
<div className="card-profile__subtitle">Auth0</div>
<div className="card-profile__desc">
I have worked across a variety of organizations, lead teams, and delivered
quality software for 8 years. In that time I've worked as an independent
consultant, at agencies as a team lead, and as a senior engineer at Auth0. I
also host a podcast https://anchor.fm/work-in-programming where I break down how
…
</div>
<div className="card-profile__footer">
<a href="#">Details
<img className="" src="/images/chevron-forward.svg" alt="" />
</a>
</div>
</div>
<div className="card-profile">
<div className="card-profile__header">
<div className="card-profile__header__portrait">
<img src="/images/person.png" className="" alt="" />
</div>
<div className="card-profile__header__inner">
<div className="card-profile__header__name">Matthew Weeks</div>
<div className="card-profile__header__price">
45$ <span>/ 45min</span>
</div>
</div>
</div>
<div className="card-profile__skills">
<div className="skills__list">
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__item">Engineering & Data</div>
<div className="skills__list__more">+6</div>
</div>
</div>
<div className="card-profile__title">Senior Software Engineer</div>
<div className="card-profile__subtitle">Auth0</div>
<div className="card-profile__desc">
I have worked across a variety of organizations, lead teams, and delivered
quality software for 8 years. In that time I've worked as an independent
consultant, at agencies as a team lead, and as a senior engineer at Auth0. I
also host a podcast https://anchor.fm/work-in-programming where I break down how
…
</div>
<div className="card-profile__footer">
<a href="#">Details
<img className="" src="/images/chevron-forward.svg" alt="" />
</a>
</div>
</div>
</div>
<ul className="pagination">
<li className="page-item"><a className="page-link" href="#">1</a></li>
<li className="page-item active" aria-current="page">
<a className="page-link" href="#">2</a>
</li>
<li className="page-item"><a className="page-link" href="#">3</a></li>
<li className="page-item"><a className="page-link" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
);
}
};

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

@ -7,6 +7,7 @@ import theme from '../../constants/theme';
import { ALLOWED_LOCALES } from '../../constants/locale';
import StyledComponentsRegistry from '../../lib/AntdRegistry';
import StyledRegistry from '../../lib/StyleRegistry';
import { Header, Footer } from '../../components/Page';
type LayoutProps = {
children: ReactNode;
@ -30,7 +31,13 @@ export default function LocaleLayout({ children, params: { locale } }: LayoutPro
<StyledRegistry>
<StyledComponentsRegistry>
<ConfigProvider theme={theme}>
<div className="b-wrapper">
<div className="b-content">
<Header locale={locale} />
{children}
</div>
<Footer />
</div>
</ConfigProvider>
</StyledComponentsRegistry>
</StyledRegistry>

150
src/app/[locale]/news/[newsId]/page.tsx Normal file
View File

@ -0,0 +1,150 @@
import React from 'react';
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
export const metadata: Metadata = {
title: 'Bbuddy - News item',
description: 'Bbuddy desc news item'
};
export function generateStaticParams() {
return [{ newsId: 'news-1' }, { newsId: 'news-2' }];
}
export default function NewsItem({ params }: { params: { newsId: string } }) {
if (!params?.newsId) notFound();
return (
<div className="b-news-page">
<div className="b-inner">
<h1 className="b-news-page__title">6 learnings from Shivpuri to Silicon Valley</h1>
<div className="news-item__badge">Leadership & Management</div>
<div className="b-news-page__text">
{`news id ${params.newsId}`}<br />
I’m excited to kick off this series of newsletters where I’ll be sharing my experiences, learnings,
and best practices which helped me to grow both in my personal and professional life. My hope is to
give back to the community and help anyone connect directly with me who may have got impacted with
recent layoffs, dealing with immigration challenges.
</div>
<div className="b-news-page__image">
<img className="" src="/images/news1.png" alt="" />
</div>
<div className="news-item__info">
<div className="news-item__info__author">
<img className="" src="/images/author.png" alt="" />
<div className="news-item__info__author__inner">
<div className="news-item__info__name">Sonali Garg</div>
<div className="news-item__info__date">February 6th, 2023</div>
</div>
</div>
<div className="news-item__info__counter">
<div className="news-item__info__like">
<img className="" src="/images/heart-outline.svg" alt="" />
165
</div>
<div className="news-item__info__share">
<img className="" src="/images/share-social.svg" alt="" />
Share
</div>
</div>
</div>
<div className="b-news-page__inner">
<h2 className="title-h2">
This is not about layoffs, it's about living with whatever life throws at you..
</h2>
<p className="b-news-page__text">
Over the past few months, as the macro-economic events have unfolded, I have heard voices filled
with anxiety, helplessness and general lack of confidence to deal with this ambiguity from my
mentees, colleagues, friends and family. I was laid off from Meta last November and I firmly
believe this is nothing but a bump in the road that might seem like a steep climb in the
short-term. I may not have all the answers but this has inspired me to share my story. If you
are looking for a sob story, you can stop reading now. Ever wondered what it takes for a girl
born into a conservative family in a small sleepy town in India, who lost one of her parents at
age 17, earned her living while pursuing engineering, moved to the UK by herself and ended up
working in big tech in Silicon valley? My goal with this series of posts is to inspire and share
my mental models that helped me throughout my professional and personal life.
</p>
<p className="b-news-page__text">
After completing my engineering, I started my career at a small software company in Bhopal and
then worked for TCS(Tata Consultancy Services), one of the largest IT-outsourcing companies in
the world for almost 5 years. Over the past 14 years, I have worked for big tech companies like
Meta (Facebook) and Google, wore multiple hats, led strategic programs, scaled multi
billion-dollar businesses, built teams and helped achieve business operational excellence.
Throughout my career, I’ve dealt with several challenges from execution to scale to building a
high performance team. A lot of my early struggles were about how to assimilate in a new
culture, create a network in a new environment, earn trust, create and nurture work
relationships into fruitful friendships and so on.
</p>
<p className="b-news-page__text">
I was born in a conservative family in a small town called ‘Shivpuri’, also known as ‘Mini
Kashmir’ because of its natural beauty. My father was a civil engineer working on Madikheda Dam
on Sindh river and was a strict disciplinarian. He was gone from dawn to dusk and was always
focused. My mother was a teacher in a school that was about 30 kms from our home. We (me and my
sister) would often be left with neighbors to be taken care of and this led us to become
independent at an early age. Our otherwise slow paced, simple life with only a few families
around in the government quarters that were set up to support construction of the dam was filled
with natural beauty, wildlife and a community of close friends. Our lives were balanced and
while my parents worked hard to provide basic needs, we were satisfied. There were only a few
schools with Hindi being the prevalent language as the medium of teaching. There were no
colleges for advanced studies and most girls did not go to college often married off by their
18th birthday. Generally speaking, we had a joyous childhood with just the basics. While most
folks we interacted with were not highly educated nor ambitious, earned lower middle class
salaries and lacked exposure to the outside world but there was plenty to learn from them.
People had learnt to stick together in good and bad times. They embodied the old school
qualities of hard work, dedication and commitment. Be willing to give it all- hard work,
dedication and commitment.
</p>
<p className="b-news-page__text">
In 2003, my father passed away suddenly and we found ourselves in crisis. My mother was a
teacher and she did not have time to deal with her grief. Rather, she was struggling to garner
support to get transferred to a school in Bhopal, capital of Madhya Pradesh to be closer to our
maternal grandparents. As we uprooted ourselves from Shivpuri to Bhopal, one of my father’s
loyal friends came to help load the moving truck. While he had nothing to gain out of us, he
continued to serve us until the last day in Shivpuri. Remember, in crisis your team matters more
than any other time. Advocate for them ruthlessly in good and bad times, they will come through
in crisis.
</p>
<p className="b-news-page__text">
Eventually we found our footing, my mother’s job was transferred to a local school in Bhopal and
I got admission in a government engineering college. My sister was still attending high school
and both of us were teaching tuition classes to middle school students in the evenings to make
ends meet. I also started a tiffin service for a few out of town students while attending
college to pay for my transportation and cost of supplies. We refused to give up. Persevere when
all else fails.
</p>
<p className="b-news-page__text">
Our 5 years went by quickly in Bhopal as we worked towards improving our financial situation and
I completed my Bachelors in Computer Science. This was the time I first stepped out to live in a
metropolitan city, Mumbai for my job at TCS. This was a paradigm shift from Bhopal and I was
blown away to meet so many talented folks in Mumbai. In my head, I did not belong in this place.
I had imposter syndrome and felt like an outsider trying to make it in a new city. Most people I
met were fluent in more than 1 language, well-dressed, communicated openly and with confidence,
and presented themselves well. I was always in a dilemma when it came to adopting values. It
took me a while to adjust to it but I was still not confident about my work and communication
while my hard skills that I learnt in engineering were top notch. I kept questioning my
abilities but persisted. This was not the first time I was out of my comfort zone. Persist, when
in discomfort.
</p>
<p className="b-news-page__text">
I worked with multiple global companies who were clients of TCS and was presented an opportunity
to move to Scotland, UK for an year to work for GE, who was also a client. This was my first
opportunity to explore a different culture, food, music, languages etc. I remember working on my
english when in Mumbai, in preparation for my UK trip. It was really difficult to understand the
accent in the UK, even though language was not a barrier. I still remember certain words would
just not get across no matter how hard some of my colleagues tried and they would end up using
signs to convey. Be prepared, opportunities come to those who are prepared.
</p>
<p className="b-news-page__text">
In 2013, I came to the US on a dependent visa after marriage and quickly realized the curse of
H4 visa. I paved my path by going back to school at UC Berkeley and then jumped back into
building my career from scratch. While working in the US over the past years, I realized college
degrees with good grades and certifications definitely help you to get your foot in the door but
are not enough to be successful in your career. As I was again starting from scratch in a new
culture, determined to do whatever it takes, having done this a few times before, it doesn’t
scare me as much. Never be afraid to start from zero again!
</p>
</div>
</div>
</div>
);
};

202
src/app/[locale]/news/page.tsx
View File

@ -8,8 +8,206 @@ export const metadata: Metadata = {
export default function News() {
return (
<div>
Страница новостей
<div className="b-news">
<div className="b-news__header">
<div className="b-inner">
<h1 className="title-h1">
Mentorship, Career <br />
Development & Coaching.
</h1>
<div className="wrap-text">
<p className="">The ins-and-outs of building a career in tech, gaining <br /> experience</p>
<p className="">from a mentor, and getting your feet wet with coaching.</p>
</div>
<div className="b-news__header__img">
<img className="" src="/images/news-top.png" alt="" />
</div>
</div>
</div>
<div className="b-news__filter ">
<div className="b-inner">
<div className="wrap-filter">
<a href="#" className="filter-item">Leadership & Management</a>
<a href="#" className="filter-item">Professional Development</a>
<a href="#" className="filter-item">Research & Insights</a>
<a href="#" className="filter-item">Well-Being</a>
<a href="#" className="filter-item">Diversity & Inclusion</a>
<a href="#" className="filter-item">Culture</a>
<a href="#" className="filter-item">Sales</a>
<a href="#" className="filter-item">Collaboration</a>
<a href="#" className="filter-item">Hiring</a>
<a href="#" className="filter-item active">BBuddy product</a>
<a href="#" className="filter-item">Customer Stories</a>
<a href="#" className="filter-item">Coaching</a>
</div>
</div>
</div>
<div className="b-news__result-list">
<div className="b-inner">
<div className="news-list">
<a href="#" className="news-item">
<div className="news-item__image">
<img className="" src="/images/news.png" alt="" />
</div>
<div className="news-item__inner">
<div className="">
<div className="news-item__title">
6 learnings from Shivpuri to Silicon Valley
</div>
<div className="news-item__badge">Leadership & Management</div>
<div className="news-item__text">
I’m excited to kick off this series of newsletters where I’ll be sharing my
experiences,
learnings, and best practices which helped me to grow both in my personal and
professional life. My hope is to give back to the community and help anyone
connect directly with me who may have got impacted with recent layoffs,
dealing with immigration challenges.
</div>
</div>
<div className="news-item__info">
<div className="news-item__info__author">
<img className="" src="/images/author.png" alt="" />
<div className="news-item__info__author__inner">
<div className="news-item__info__name">Sonali Garg</div>
<div className="news-item__info__date">February 6th, 2023</div>
</div>
</div>
<div className="news-item__info__counter">
<div className="news-item__info__like">
<img className="" src="/images/heart-outline.svg" alt="" />
165
</div>
<div className="news-item__info__share">
<img className="" src="/images/share-social.svg" alt="" />
Share
</div>
</div>
</div>
</div>
</a>
<a href="#" className="news-item">
<div className="news-item__image">
<img className="" src="/images/news.png" alt="" />
</div>
<div className="news-item__inner">
<div className="">
<div className="news-item__title">
6 learnings from Shivpuri to Silicon Valley
</div>
<div className="news-item__badge">Leadership & Management</div>
<div className="news-item__text">
I’m excited to kick off this series of newsletters where I’ll be sharing my
experiences,
learnings, and best practices which helped me to grow both in my personal and
professional life. My hope is to give back to the community and help anyone
connect directly with me who may have got impacted with recent layoffs,
dealing with immigration challenges.
</div>
</div>
<div className="news-item__info">
<div className="news-item__info__author">
<img className="" src="/images/author.png" alt="" />
<div className="news-item__info__author__inner">
<div className="news-item__info__name">Sonali Garg</div>
<div className="news-item__info__date">February 6th, 2023</div>
</div>
</div>
<div className="news-item__info__counter">
<div className="news-item__info__like">
<img className="" src="/images/heart-outline.svg" alt="" />
165
</div>
<div className="news-item__info__share">
<img className="" src="/images/share-social.svg" alt="" />
Share
</div>
</div>
</div>
</div>
</a>
<a href="#" className="news-item">
<div className="news-item__image">
<img className="" src="/images/news.png" alt="" />
</div>
<div className="news-item__inner">
<div className="">
<div className="news-item__title">
6 learnings from Shivpuri to Silicon Valley
</div>
<div className="news-item__badge">Leadership & Management</div>
<div className="news-item__text">
I’m excited to kick off this series of newsletters where I’ll be sharing my
experiences,
learnings, and best practices which helped me to grow both in my personal and
professional life. My hope is to give back to the community and help anyone
connect directly with me who may have got impacted with recent layoffs,
dealing with immigration challenges.
</div>
</div>
<div className="news-item__info">
<div className="news-item__info__author">
<img className="" src="/images/author.png" alt="" />
<div className="news-item__info__author__inner">
<div className="news-item__info__name">Sonali Garg</div>
<div className="news-item__info__date">February 6th, 2023</div>
</div>
</div>
<div className="news-item__info__counter">
<div className="news-item__info__like">
<img className="" src="/images/heart-outline.svg" alt="" />
165
</div>
<div className="news-item__info__share">
<img className="" src="/images/share-social.svg" alt="" />
Share
</div>
</div>
</div>
</div>
</a>
<a href="#" className="news-item">
<div className="news-item__image">
<img className="" src="/images/news.png" alt="" />
</div>
<div className="news-item__inner">
<div className="">
<div className="news-item__title">
6 learnings from Shivpuri to Silicon Valley
</div>
<div className="news-item__badge">Leadership & Management</div>
<div className="news-item__text">
I’m excited to kick off this series of newsletters where I’ll be sharing my
experiences,
learnings, and best practices which helped me to grow both in my personal and
professional life. My hope is to give back to the community and help anyone
connect directly with me who may have got impacted with recent layoffs,
dealing with immigration challenges.
</div>
</div>
<div className="news-item__info">
<div className="news-item__info__author">
<img className="" src="/images/author.png" alt="" />
<div className="news-item__info__author__inner">
<div className="news-item__info__name">Sonali Garg</div>
<div className="news-item__info__date">February 6th, 2023</div>
</div>
</div>
<div className="news-item__info__counter">
<div className="news-item__info__like">
<img className="" src="/images/heart-outline.svg" alt="" />
165
</div>
<div className="news-item__info__share">
<img className="" src="/images/share-social.svg" alt="" />
Share
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
);
}

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

@ -1,22 +1,28 @@
'use client';
import React from 'react';
import { useSelectedLayoutSegment } from 'next/navigation';
import { Link } from '../../navigation';
import { useTranslations } from 'next-intl';
const ROUTES = ['sessions', 'notifications', 'support', 'information', 'settings', 'messages', 'work-with-us'];
export const AccountMenu = () => {
const t = useTranslations('Account');
const userId = 5;
export const AccountMenu = ({ userId, menu }: { userId: string, menu: { path: string, title: string, count?: number }[] }) => {
const selectedLayoutSegment = useSelectedLayoutSegment();
const pathname = selectedLayoutSegment || '';
return (
<ul>
{ROUTES.map((item) => (
<li key={item}>
<Link href={`/${userId}/${item}` as any}>
{t(`menu.${item}`)}
<ul className="list-sidebar">
{menu.map(({ path, title, count }) => (
<li key={path} className="list-sidebar__item">
<Link href={`/${userId}/${path}` as any} className={path === pathname ? 'active' : ''}>
{title}
{count ? (
<span className="count">{count}</span>
) : null}
</Link>
</li>
))}
<li className="list-sidebar__item">
<a href="#" className="">Log Out</a>
</li>
</ul>
)
};

12
src/navigation.ts
View File

@ -6,12 +6,12 @@ export const { Link, redirect, usePathname, useRouter } =
locales: ALLOWED_LOCALES,
pathnames: {
'/': '/',
'/experts': '/experts',
'/experts/[expertId]': '/experts/[expertId]',
'/news': '/news',
'/privacy-policy': '/privacy-policy',
'/[userId]': '/[userId]',
'/[userId]/[...slug]': '/[userId]/[...slug]',
// '/experts': '/experts',
// '/experts/[expertId]': '/experts/[expertId]',
// '/news': '/news',
// '/privacy-policy': '/privacy-policy',
// '/[userId]': '/[userId]',
// '/[userId]/[...slug]': '/[userId]/[...slug]',
} satisfies Pathnames<typeof ALLOWED_LOCALES>,
localePrefix: LOCALE_PREFIX
});

2
src/styles/_pages.scss
View File

@ -1048,6 +1048,8 @@
margin-bottom: 16px;
.card-profile {
cursor: pointer;
&__header {
gap: 8px;

18
tsconfig.json
View File

@ -2,7 +2,11 @@
"compilerOptions": {
"baseUrl": "src",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@ -20,6 +24,14 @@
}
]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"dist/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}