gonets/FRONT/DEV/src/components/workSpace/modules/appModules/about.tsx

import { MainButton } from "../../../UI/buttons/mainButton"
import { workSpaceNames } from "../../../../const/workspace/names"
import { useWorkSpaceStore } from "../../../../store"
import styled, {useTheme} from "styled-components"
import ThemeButton from "../../../UI/buttons/toggletheme"
import {buttonNames} from "../../../../const/buttons/names";
import {IconComponent} from "../../../../const/buttons/icons";
import {useTranslation} from "../../../../utils/i18n/hooks";

type Props = {
    from: 'reg' | 'helloWindow' | 'workSpace'
    onBack?: () => void
}

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: ${(props => props.theme.background)};
    padding: 50px;
    box-sizing: border-box;
`

const Content = styled.div`
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    padding: 40px 50px;
    background: ${(props => props.theme.primary)};
    border-radius: 18px;
    position: relative;
`

const Listing = styled.div`
    display: flex;
    flex-direction: column;
    background-color: ${(props => props.theme.secondary)};
    border-radius: 10px;
    padding: 24px 20px;
    p{
        font-weight: bold;
        font-size: 24px;
    }
`

const List = styled.ul`
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
    font-size: 18px;
    gap: 4px;
    & li:before {
        color: ${(props => props.theme.accent)};
        content: "•";
        font-size: 28px;
        width: .8em;
        display: inline-block;
        position: relative;
        top: 2px;
    } 
`

const Title = styled.div`
    font-size: 20px;
`

const SubTitle = styled.div`
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color:rgba(255, 248, 225, 0.6);
    border-left: #ff9800 solid 4px;
    border-radius: 0 8px 8px 0;
    padding: 20px 12px;
    
    a{
        text-decoration: none;
        color: ${(props => props.theme.errorColor)};
        font-weight: 500;
        font-size: 18px;
        width: max-content;
    }
    p{
        font-size: 18px;
        color: ${(props=>props.theme.textColor)};
    }
    .icon{
        width: 32px;
        height: 32px;
        fill: #ff9800;
    }
`

const Links = styled.div`
    display: flex;
    justify-content: start;
    gap: 20px;
`

const LinkBlock = styled.a`
    text-decoration: none;
    color: ${(props => props.theme.accent)};;
`

const Copyright = styled.div`
    width: 100%;
    text-align: center;
    color: ${(props => props.theme.offlineColor)};
`

const ButtonContainer = styled.div`
    position: absolute;
    top: 12px;
    right: 14px;
`
const AboutLine = styled.hr`
    border: ${(props => props.theme.hoverBtn)} 1px solid;
    width: 100%;
`

const MainTitle = styled.div`
    width: 100%;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    box-sizing: border-box;

    img{
        width: 50px;
        height: 50px;
    }
    .version{
        text-wrap: nowrap;
        background-color: ${(props => props.theme.hoverBtn)};
        color: ${(props => props.theme.borderColor)};
        border-radius: 20px;
        font-size: 18px;
        padding: 10px 18px;
        line-height: 1;
    }
    .title{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
    }
`

export default function About({ from, onBack }: Props) {
    const { setWorkModule } = useWorkSpaceStore()
    const {t} = useTranslation('common')
    const getBackHandler = () => {
        switch (from) {
            case 'reg':
                return onBack
            case 'helloWindow':
                return () => setWorkModule(workSpaceNames[1])
            case 'workSpace':
                return () => setWorkModule(workSpaceNames[3])
            default:
                return undefined
        }
    }

    const backHandler = getBackHandler()
    const showBackButton = from !== 'reg' || (from === 'reg' && onBack)

    return (
        <Wrapper>
            <Content>
                <MainTitle>
                    <div className={'title'}>
                        <img src="./assets/images/gossys.png" alt={t('about-logoAlt')} />
                        <div style={{width: '100%', display: "flex", justifyContent: 'center'}}>
                            <h1>{t('about-title')}</h1>
                        </div>
                    </div>
                    <p className={'version'}>v 0.0.3</p>
                </MainTitle>

                <AboutLine/>

                <Title>
                    <p>{t('about-description')}</p>
                </Title>

                <Listing>
                    <p>{t('about-featuresTitle')}:</p>
                    <List>
                        <li>{t('about-feature1')}</li>
                        <li>{t('about-feature2')}</li>
                        <li>{t('about-feature3')}</li>
                    </List>
                </Listing>

                <SubTitle>
                    <svg className="icon" viewBox="0 0 24 24">
                        <path d="M12 2L1 21h22M12 6l7.53 13H4.47M11 10v4h2v-4m-2 6v2h2v-2"/>
                    </svg>
                    <p>{t('about-disclaimer')}</p>
                    <a href={'https://gossys.dev/pages/projects/gonets'}>
                        {t('about-goToPro')}
                    </a>
                </SubTitle>

                <Links>
                    <LinkBlock href={'https://gossys.dev/pages/projects/gonets'}>
                        {t('about-homepage')}
                    </LinkBlock>

                    <LinkBlock href={'https://wiki.gossys.dev/ru/gonets'}>
                        {t('about-documentation')}
                    </LinkBlock>

                    <LinkBlock href={'https://wiki.gossys.dev/ru/lic/GosysPUB'}>
                        {t('about-license')}
                    </LinkBlock>
                </Links>

                <Copyright>
                    {t('about-copyright')}
                </Copyright>

                <ButtonContainer>
                    {showBackButton && backHandler && (
                        <IconComponent
                            width="36"
                            height="36"
                            name={buttonNames[12]}
                            onClick={backHandler}
                        />
                    )}

                    {from == 'reg' &&
                        <ThemeButton />
                    }
                </ButtonContainer>
            </Content>
        </Wrapper>
    )
}