30 |
34 |
35 |
37 | {props.header}
21 | 25 | {firstLetter} 26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/components/Avatar/Avatar.types.ts: -------------------------------------------------------------------------------- 1 | import { ComponentPropsWithRef } from 'react'; 2 | 3 | type AvatarBaseProps = ComponentPropsWithRef<'img'>; 4 | 5 | export type AvatarProps = AvatarBaseProps & { 6 | image?: string; 7 | username: string; 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/Button/Button.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Story } from '@ladle/react'; 2 | 3 | import Icon from '~components/Icon/Icon'; 4 | 5 | import Button from './Button'; 6 | 7 | import { ICircleButtonProps, ITextButtonProps } from './Button.types'; 8 | 9 | export default { 10 | argTypes: { 11 | color: { 12 | control: { type: 'select' }, 13 | options: ['primary', 'secondary'], 14 | }, 15 | disabled: { 16 | control: { type: 'check' }, 17 | options: [''], 18 | }, 19 | variant: { 20 | control: { type: 'select' }, 21 | options: ['container', 'outlined', 'text'], 22 | }, 23 | }, 24 | }; 25 | 26 | export const ButtonText: Story
23 | {props.svg}
24 |
28 | );
29 | }
30 |
31 | function renderWithoutIcon(): ReactNode {
32 | return (
33 |
25 | {remainingCharacters}
26 |
27 |
34 |
38 | );
39 | }
40 |
41 | return props.svg ? renderWithIcon() : renderWithoutIcon();
42 | }
43 |
44 | export default CharacterLimit;
45 |
--------------------------------------------------------------------------------
/src/components/CharacterLimitMainText/CharacterLimit.types.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | export type ModuleProps = {
4 | maxLength: number;
5 | svg: ReactNode;
6 | value: string;
7 | };
8 |
--------------------------------------------------------------------------------
/src/components/Checkbox/Checkbox.spec.tsx:
--------------------------------------------------------------------------------
1 | import { render, RenderResult, screen } from '@testing-library/react';
2 | import userEvent from '@testing-library/user-event';
3 |
4 | import { Checkbox } from './Checkbox';
5 |
6 | import type { CheckboxProps } from './Checkbox.types';
7 |
8 | const makeSut = (props: Partial35 | {props.value.length}/{props.maxLength} 36 |
37 |
18 |
33 | );
34 | }
35 |
36 | export default MediaPreview;
37 |
--------------------------------------------------------------------------------
/src/components/MainComposer/components/InputMediaGroup/components/MediaPreview/MediaPreview.types.ts:
--------------------------------------------------------------------------------
1 | import { Media } from '~components/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.types';
2 |
3 | export type MediaPreviewProps = {
4 | media: Media;
5 | onImageChange: (newMedias: Media[], id: Media['id']) => void;
6 | onRemove: (id: Media['id']) => void;
7 | };
8 |
--------------------------------------------------------------------------------
/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.types.ts:
--------------------------------------------------------------------------------
1 | import { MediaValidator } from '~services/api/social-media/social-media.types';
2 |
3 | import { MediaValidators } from '../mediaValidator/mediaValidators';
4 |
5 | import { Error } from '~components/MainComposer/components/MainComposerBase/MainComposerBase.type';
6 |
7 | import { MEDIA_ERRORS, MediaInputProps } from '../../InputMediaGroup.type';
8 |
9 | export type ValidatorError = {
10 | error?: Error;
11 | type: MEDIA_ERRORS;
12 | };
13 |
14 | export type Validators = Record<
15 | keyof typeof MediaValidators.prototype,
16 | (
17 | props: MediaInputProps,
18 | fileId: string
19 | ) => Promise
19 | onImageChange(newMedias, media.id)}
22 | />
23 |
31 |
32 | test
11 |
7 | teste
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/components/Preview/Preview.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent, ReactNode } from 'react';
2 |
3 | import { PreviewModeSelector } from '~pages/home/components/Tabber/PreviewModeSelector/PreviewModeSelector';
4 |
5 | import { IconsType } from '~components/Icon/Icon.types';
6 |
7 | import scss from './Preview.module.scss';
8 |
9 | import { PreviewProps } from './Preview.types';
10 |
11 | const previewModeMockList = [
12 | {
13 | icon: 'mobile' as IconsType,
14 | id: 'mobile',
15 | name: 'mobile',
16 | },
17 | {
18 | icon: 'tablet' as IconsType,
19 | id: 'tablet',
20 | name: 'tablet',
21 | },
22 | {
23 | icon: 'pc' as IconsType,
24 | id: 'pc',
25 | name: 'pc',
26 | },
27 | ];
28 |
29 | const getTargetValue = (e: ChangeEvent
35 |
43 | );
44 | }
45 |
46 | export default Preview;
47 |
--------------------------------------------------------------------------------
/src/components/Preview/Preview.types.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | export type PreviewProps = {
4 | children: ReactNode;
5 | };
6 |
--------------------------------------------------------------------------------
/src/components/SentrySetup/SentrySetup.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import {
3 | createRoutesFromChildren,
4 | matchRoutes,
5 | Routes,
6 | useLocation,
7 | useNavigationType,
8 | } from 'react-router-dom';
9 |
10 | import * as Sentry from '@sentry/react';
11 |
12 | type SentryProps = {
13 | children: ReactNode;
14 | };
15 |
16 | Sentry.init({
17 | dsn: import.meta.env.REACT_APP_SENTRY_KEY,
18 | integrations: [
19 | new Sentry.BrowserTracing({
20 | routingInstrumentation: Sentry.reactRouterV6Instrumentation(
21 | React.useEffect,
22 | useLocation,
23 | useNavigationType,
24 | createRoutesFromChildren,
25 | matchRoutes
26 | ),
27 | }),
28 | ],
29 | replaysOnErrorSampleRate: 1,
30 | replaysSessionSampleRate: 0.1,
31 | tracesSampleRate: 1,
32 | });
33 |
34 | const SentrySetup = Sentry.withSentryReactRouterV6Routing(Routes);
35 |
36 | function SentryRoutes({ children }: SentryProps): ReactNode {
37 | return
36 |
41 | {props.children}
42 |
17 |
32 | );
33 | }
34 |
35 | export default ActionBar;
36 |
--------------------------------------------------------------------------------
/src/pages/home/components/Header/Header.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Story } from '@ladle/react';
2 |
3 | import Header from './Header';
4 |
5 | export const HeaderStories: Story = () => (
6 |
18 |
21 | }
27 | />
28 |
31 | Compose
20 |
7 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/pages/home/components/Header/images/tiktok.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/pages/home/components/Header/images/twitter.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/Sidebar.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Story } from '@ladle/react';
2 |
3 | import Sidebar from './Sidebar';
4 |
5 | export const SidebarStories: Story = () => (
6 |
7 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/Sidebar.types.ts:
--------------------------------------------------------------------------------
1 | import { StoreAccount } from '~stores/useSocialMediaStore/useSocialMediaStore.types';
2 |
3 | export type FilteredAccountsProps = {
4 | socialMedia: FilteredSocialMedia[];
5 | };
6 |
7 | export type FilteredSocialMedia = {
8 | socialMediaAccounts: StoreAccount[];
9 | socialMediaId: string;
10 | };
11 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/assets/plusIcon.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/components/AddAccount/AddAccount.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent, ReactNode } from 'react';
2 |
3 | import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
4 |
5 | import { AddAccountProps } from './AddAccount.types';
6 |
7 | function AddAccount(props: AddAccountProps): ReactNode {
8 | const { socialMedias } = useSocialMediaStore();
9 |
10 | const handleChange = (e: ChangeEvent
16 |
26 |
27 | );
28 | }
29 |
30 | export default AddAccount;
31 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/components/AddAccount/AddAccount.types.ts:
--------------------------------------------------------------------------------
1 | import { ChangeEvent } from 'react';
2 |
3 | export type AddAccountProps = {
4 | onChange: (addonId: string, event: ChangeEvent
7 | {
10 | throw new Error('Function not implemented.');
11 | }}
12 | />
13 |
14 | );
15 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/components/SocialMediaForm/SocialMediaForm.types.ts:
--------------------------------------------------------------------------------
1 | export type SocialMediaFormProps = {
2 | disabled?: boolean;
3 | onOpenModal: () => void;
4 | };
5 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/components/SocialMediaForm/data.ts:
--------------------------------------------------------------------------------
1 | import FacebookIcon from './images/facebook.svg?react';
2 | import InstagramIcon from './images/instagram.svg?react';
3 | import TiktokIcon from './images/tiktok.svg?react';
4 | import TwitterIcon from './images/twitter.svg?react';
5 |
6 | const socialMedias = [
7 | {
8 | hasAccount: true,
9 | hasGroup: true,
10 | icon: FacebookIcon, // FALTA TIPAR O ICON
11 | name: 'Facebook',
12 | },
13 | {
14 | hasAccount: false,
15 | hasGroup: true,
16 | icon: InstagramIcon,
17 | name: 'Instagram',
18 | },
19 | {
20 | hasAccount: true,
21 | hasGroup: false,
22 | icon: TwitterIcon,
23 | name: 'Twitter',
24 | },
25 | {
26 | hasAccount: true,
27 | hasGroup: false,
28 | icon: TiktokIcon,
29 | name: 'Tiktok',
30 | },
31 | {
32 | hasAccount: false,
33 | hasGroup: false,
34 | icon: FacebookIcon,
35 | name: 'LinkedIn',
36 | },
37 | ];
38 |
39 | export { socialMedias };
40 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/components/SocialMediaForm/images/facebook.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/components/SocialMediaForm/images/tiktok.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/components/SocialMediaForm/images/twitter.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/home/components/Sidebar/components/SocialMediaForm/images/unknown.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/pages/home/components/Tabber/PostModes/PostModes.components.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import { Checkbox } from '~components/Checkbox/Checkbox';
4 |
5 | import { PostModeProps } from './PostModes.types';
6 |
7 | export function PostMode(props: PostModeProps): ReactNode {
8 | const handlePostModeClick = (postModeElement: HTMLElement): void => {
9 | props.onClickPostMode(postModeElement);
10 | };
11 |
12 | return (
13 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/pages/home/components/Tabber/PostModes/PostModes.stories.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | import { Story } from '@ladle/react';
4 |
5 | import { PostMode } from '~services/api/social-media/social-media.types';
6 |
7 | import PostModes from './PostModes';
8 |
9 | const mock = {
10 | account: {
11 | id: '1',
12 | socialMediaId: 'DISCORD_EXAMPLE_ID',
13 | },
14 | };
15 |
16 | export const PostmodesStories: Story = () => {
17 | const [postModeOnView, setPostModeOnView] = useState(
18 | 'DISCORD_STORY_POSTMODE_ID'
19 | );
20 | const changePostMode = (postModeId: PostMode['id']): void => {
21 | setPostModeOnView(postModeId);
22 | };
23 |
24 | return (
25 |
12 |
20 |
21 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/pages/home/components/Tabber/PreviewModeSelector/PreviewModeSelector.module.scss:
--------------------------------------------------------------------------------
1 | @use '~styles/global.scss' as *;
2 |
3 | .containerPreview {
4 | overflow: hidden;
5 |
6 | display: flex;
7 |
8 | align-items: center;
9 |
10 | border: 1px solid $primaryGray;
11 |
12 | background-color: $secondaryWhite;
13 |
14 | border-radius: 16px;
15 |
16 | &:focus-within,
17 | &:active {
18 | border: 1px solid $secondaryPurple;
19 | }
20 |
21 | .icon {
22 | display: flex;
23 |
24 | padding: 1.25rem 1.3rem;
25 |
26 | path {
27 | fill: $tertiaryGray;
28 | }
29 | }
30 |
31 | .previewModeInput {
32 | position: absolute;
33 |
34 | clip-path: inset(50%);
35 | }
36 |
37 | .previewModeInput:checked + label .icon {
38 | background-color: $primaryWhite;
39 |
40 | path {
41 | fill: $secondaryPurple;
42 | }
43 | }
44 |
45 | .previewModeLabel {
46 | cursor: pointer;
47 | }
48 |
49 | .previewModeLabel span {
50 | position: absolute;
51 |
52 | visibility: hidden;
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/pages/home/components/Tabber/PreviewModeSelector/PreviewModeSelector.stories.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent } from 'react';
2 |
3 | import { Story } from '@ladle/react';
4 |
5 | import { IconsType } from '~components/Icon/Icon.types';
6 |
7 | import { PreviewModeSelector } from './PreviewModeSelector';
8 |
9 | const previewModes = [
10 | {
11 | icon: 'mobile' as IconsType,
12 | id: 'mobile',
13 | name: 'mobile',
14 | },
15 | {
16 | icon: 'pc' as IconsType,
17 | id: 'pc',
18 | name: 'pc',
19 | },
20 | {
21 | icon: 'tablet' as IconsType,
22 | id: 'tablet',
23 | name: 'tablet',
24 | },
25 | ];
26 |
27 | export const PreviewModeSelectorStories: Story = () => (
28 |
13 | {props.list.map((item) => (
14 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/pages/home/components/Tabber/PreviewModeSelector/PreviewModeSelector.types.ts:
--------------------------------------------------------------------------------
1 | import { ChangeEvent } from 'react';
2 |
3 | import { IconsType } from '~components/Icon/Icon.types';
4 |
5 | export type PreviewMode = {
6 | icon: IconsType;
7 | id: string;
8 | name: string;
9 | };
10 |
11 | export type PreviewModeProps = {
12 | item: PreviewMode;
13 | onSelect: (e: ChangeEvent handleTabClick(e.currentTarget)}
21 | >
22 | {props.socialMediaIcon}
23 | {props.title}
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/pages/home/components/Tabber/Tabs/components/Tab.types.ts:
--------------------------------------------------------------------------------
1 | import { SocialMedia } from '~services/api/social-media/social-media.types';
2 | import { StoreAccount } from '~stores/useSocialMediaStore/useSocialMediaStore.types';
3 |
4 | import { Tab } from '../../Tabber.types';
5 |
6 | export type TabProps = {
7 | id: Tab['id'];
8 | isActive: boolean;
9 | onClickTab: (tabElement: HTMLElement) => void;
10 | socialMediaIcon: SocialMedia['icon'] | undefined;
11 | title: StoreAccount['userName'];
12 | };
13 |
--------------------------------------------------------------------------------
/src/pages/home/home.module.scss:
--------------------------------------------------------------------------------
1 | @use '~styles/breakpoints.scss' as *;
2 |
3 | .content {
4 | overflow: hidden;
5 |
6 | display: grid;
7 | grid-template-areas:
8 | 'header'
9 | 'actions'
10 | 'aside'
11 | 'editor';
12 |
13 | grid-template-columns: 100vw;
14 |
15 | .aside {
16 | grid-area: aside;
17 | }
18 |
19 | .editor {
20 | overflow-x: hidden;
21 |
22 | grid-area: editor;
23 | }
24 |
25 | .editor {
26 | > :first-child {
27 | display: none;
28 | }
29 | }
30 |
31 | .actions {
32 | grid-area: actions;
33 | }
34 | }
35 |
36 | @include from905 {
37 | .content {
38 | width: 90%;
39 | max-width: 128rem;
40 |
41 | grid-template-areas:
42 | 'aside editor'
43 | 'aside actions';
44 | grid-template-columns: 30rem 1fr;
45 | gap: 2.4rem;
46 |
47 | margin: 0 auto;
48 | }
49 |
50 | .content {
51 | .editor {
52 | > :first-child {
53 | display: flex;
54 | }
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/home/home.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import isEmpty from 'lodash.isempty';
4 |
5 | import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
6 |
7 | import FeedbackError from '~components/FeedbackError/FeedbackError';
8 | import MainComposer from '~components/MainComposer/MainComposer';
9 |
10 | import ActionBar from './components/ActionBar/ActionBar';
11 | import Header from './components/Header/Header';
12 | import Sidebar from './components/Sidebar/Sidebar';
13 | import Tabber from './components/Tabber/Tabber';
14 |
15 | import scss from './home.module.scss';
16 |
17 | function Home(): ReactNode {
18 | const { accounts } = useSocialMediaStore();
19 |
20 | return (
21 | <>
22 |
23 |
25 |
7 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/pages/register/components/AlreadyHaveAnAccount/AlreadyHaveAnAccount.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import { NavLink } from 'react-router-dom';
3 |
4 | import scss from './AlreadyHaveAnAccount.module.scss';
5 |
6 | function AlreadyHaveAnAccount(): ReactNode {
7 | return (
8 |
10 | Already have an account{' '}
11 |
7 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/pages/register/components/DesktopHeader/DesktopHeader.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import scss from './DesktopHeader.module.scss';
4 |
5 | import OctopostLogo from './images/octopost.svg?react';
6 |
7 | function DesktopHeader(): ReactNode {
8 | return (
9 |
7 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/pages/register/components/DesktopHero/Hero.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 |
4 | import Button from '~components/Button/Button';
5 |
6 | import scss from './Hero.module.scss';
7 |
8 | import Octo from './images/octo.svg?react';
9 |
10 | function Hero(): ReactNode {
11 | const navigate = useNavigate();
12 |
13 | return (
14 |
15 |
16 |
28 |
32 | );
33 | }
34 |
35 | export default Hero;
36 |
--------------------------------------------------------------------------------
/src/pages/register/components/Form/Form.module.scss:
--------------------------------------------------------------------------------
1 | @use '~styles/breakpoints.scss' as *;
2 | @use '~styles/global.scss' as *;
3 |
4 | .form {
5 | display: flex;
6 | flex-direction: column;
7 | }
8 |
9 | .submitButton {
10 | text-align: center;
11 | font-size: 1.6rem;
12 | font-weight: 700;
13 |
14 | margin-top: 1.2rem;
15 | padding: 1.6rem;
16 | }
17 |
--------------------------------------------------------------------------------
/src/pages/register/components/Form/Form.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Story } from '@ladle/react';
2 |
3 | import Form from './Form';
4 |
5 | export const FormStories: Story = () => (
6 | Welcome back
17 |18 | To keep connected to yourself please login with your personal info 19 |
20 | 27 |
29 |
31 |
7 |
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/pages/register/components/Form/FormSchema.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 |
3 | const MIN_PASSWORD_CHARACTERS = 8;
4 |
5 | export const schema = z.object({
6 | email: z
7 | .string()
8 | .min(1, { message: 'Email is required.' })
9 | .email({ message: 'Must be a valid email.' }),
10 | password: z
11 | .string()
12 | .min(MIN_PASSWORD_CHARACTERS, {
13 | message: 'Must have 8 or more characters.',
14 | })
15 | .refine(
16 | (v) => {
17 | const hasNumber = /\d/.test(v);
18 | const hasSpecialChar = /[!"#$%&()*,.:<>?@^{|}]/.test(v);
19 |
20 | return hasNumber && hasSpecialChar;
21 | },
22 | { message: 'Must contain at least 1 number and 1 special character.' }
23 | ),
24 | });
25 |
--------------------------------------------------------------------------------
/src/pages/register/components/MobileHero/Hero.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Story } from '@ladle/react';
2 |
3 | import Hero from './Hero';
4 |
5 | export const MobileHeroStories: Story = () => (
6 |
7 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/pages/register/components/MobileHero/Hero.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 |
4 | import Button from '~components/Button/Button';
5 |
6 | import scss from './Hero.module.scss';
7 |
8 | import Octo from './images/octo.svg?react';
9 | import OctopostLogo from './images/octopost.svg?react';
10 |
11 | function Hero(): ReactNode {
12 | const navigate = useNavigate();
13 |
14 | return (
15 |
16 |
17 |
18 |
28 |
29 |
35 |
39 | );
40 | }
41 |
42 | export default Hero;
43 |
--------------------------------------------------------------------------------
/src/pages/register/components/SignUpPromotion/SignUpPromotion.module.scss:
--------------------------------------------------------------------------------
1 | @use '~styles/breakpoints.scss' as *;
2 | @use '~styles/global.scss' as *;
3 |
4 | .signUpPromotion {
5 | display: none;
6 |
7 | .title {
8 | color: $tertiaryGray;
9 | font-size: 4.8rem;
10 | font-weight: 700;
11 |
12 | margin: 0;
13 | }
14 |
15 | .description {
16 | color: $secondaryGray;
17 | font-size: 1.6rem;
18 | font-weight: 500;
19 | line-height: 2.4rem;
20 |
21 | margin: 0;
22 | }
23 | }
24 |
25 | @include from905 {
26 | .signUpPromotion {
27 | display: block;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/pages/register/components/SignUpPromotion/SignUpPromotion.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Story } from '@ladle/react';
2 |
3 | import SignUpPromotion from './SignUpPromotion';
4 |
5 | export const SignUpPromotionStories: Story = () => (
6 | New here?
30 |31 | Welcome to Octopost. Enter your personal details and start your 32 | journey with us 33 |
34 |
36 |
38 |
7 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/pages/register/components/SignUpPromotion/SignUpPromotion.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import scss from './SignUpPromotion.module.scss';
4 |
5 | function DesktopCall(): ReactNode {
6 | return (
7 | Join us right now!
9 |Register your account now!
10 |
5 |
7 | );
8 |
--------------------------------------------------------------------------------
/src/pages/register/register.module.scss:
--------------------------------------------------------------------------------
1 | @use '~styles/breakpoints.scss' as *;
2 |
3 | .wrapper {
4 | height: 100vh;
5 |
6 | display: grid;
7 | grid-template-rows: auto 1fr;
8 | grid-template-columns: 1fr;
9 | grid-auto-flow: column;
10 | }
11 |
12 | .formSection {
13 | width: 100%;
14 | height: 100%;
15 |
16 | display: flex;
17 | flex-direction: column;
18 |
19 | justify-content: space-between;
20 |
21 | .main {
22 | width: 100%;
23 | max-width: min(460px, calc(100% - 2rem));
24 |
25 | display: flex;
26 | flex-direction: column;
27 | gap: 3.2rem;
28 |
29 | margin-right: auto;
30 | margin-left: auto;
31 | padding-top: 6rem;
32 | }
33 | }
34 |
35 | @include from905 {
36 | .wrapper {
37 | height: 100vh;
38 |
39 | display: grid;
40 | grid-template-rows: 1fr;
41 | grid-template-columns: 1fr 1fr;
42 | grid-auto-flow: row;
43 | }
44 |
45 | .main {
46 | display: flex;
47 | flex-direction: column;
48 |
49 | gap: 1.6rem;
50 |
51 | justify-content: center;
52 |
53 | margin: auto;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/pages/register/register.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | import AlreadyHaveAnAccount from './components/AlreadyHaveAnAccount/AlreadyHaveAnAccount';
4 | import DesktopHeader from './components/DesktopHeader/DesktopHeader';
5 | import DesktopHero from './components/DesktopHero/Hero';
6 | import Form from './components/Form/Form';
7 | import MobileHero from './components/MobileHero/Hero';
8 | import SignUpPromotion from './components/SignUpPromotion/SignUpPromotion';
9 | import SocialLogin from './components/SocialLogin/SocialLogin';
10 |
11 | import scss from './register.module.scss';
12 |
13 | function Home(): ReactNode {
14 | return (
15 |
16 |
19 |
21 |
25 |
27 |
28 | );
29 | }
30 |
31 | export default Home;
32 |
--------------------------------------------------------------------------------
/src/services/api/accounts/accounts.ts:
--------------------------------------------------------------------------------
1 | import { octopostApi } from '..';
2 |
3 | import { Account } from './accounts.types';
4 |
5 | const AccountsService = {
6 | async favorite(
7 | accountId: Account['id'],
8 | favorite: boolean
9 | ): Promise