s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

HowTo corrections

Browse Source
This commit is contained in:
Mateusz Tylka 2023-02-24 12:49:38 +01:00
parent 5c75e53951
commit 6a4c9f00d9
2 changed files with 60 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/generic/CodeShell.js
View File

@ -1,23 +1,23 @@
import React from 'react';
import {FlexColumn, Svg} from '../../utils/containers';
import { FlexColumn, Svg } from '../../utils/containers';
import styled from 'styled-components';
import theme from '../../utils/theme';
import copyIco from '../../assets/copy_ico.svg';
import checkIco from '../../assets/check_ico.svg';
import {Body, Code} from '../../utils/fonts';
import { Body, Code } from '../../utils/fonts';
const CodeShellStyle = styled(FlexColumn)`
position: relative;
padding: 24px 14px 14px;
gap: 8px;
background-color: ${({theme}) => theme.colors.dark07};
border: 1px solid ${({theme}) => theme.colors.dark};
background-color: ${({ theme }) => theme.colors.dark07};
border: 1px solid ${({ theme }) => theme.colors.dark};
border-radius: 4px;
width: 100%;
align-items: flex-start;
max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'none'};
max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : 'none')};
@media (min-width: ${({theme}) => theme.overMobile}) {
@media (min-width: ${({ theme }) => theme.overMobile}) {
gap: 12px;
padding: 40px 32px 32px;
}
@ -28,59 +28,63 @@ const CopiedMessageStyle = styled(Body)`
position: absolute;
top: -24px;
right: -10px;
background-color: ${({theme}) => theme.colors.green};
color: ${({theme}) => theme.colors.white};
background-color: ${({ theme }) => theme.colors.green};
color: ${({ theme }) => theme.colors.white};
border-radius: 4px;
padding: 6px;
`;
const CodeShell = (props) => {
const [ico, setIco] = React.useState(copyIco);
const [ico, setIco] = React.useState(copyIco);
const clickCopyButton = () => {
let commands = '';
if (props.commands.length > 1) {
for (let command of props.commands)
commands += command + '\n';
} else commands = props.commands;
navigator.clipboard.writeText(commands).then(r => console.log(r));
setIco(checkIco);
setTimeout(() => {
setIco(copyIco);
}, 3000);
};
const clickCopyButton = () => {
let commands = '';
if (props.commands.length > 1) {
for (let command of props.commands) commands += command + '\n';
} else commands = props.commands;
navigator.clipboard.writeText(commands).then((r) => console.log(r));
setIco(checkIco);
setTimeout(() => {
setIco(copyIco);
}, 2000);
};
const formatCommand = (command) => {
if (command[0] === '\t') {
return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
/* eslint-disable */
} else if (command[0] === '\s') {
return <>&nbsp;{formatCommand(command.slice(1))}</>;
}
return command;
};
const formatCommand = (command) => {
if (command[0] === '\t') {
return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
}
return command;
};
const renderCommands = () => {
return (
props.commands.map((command, index) => {
return (
<Code key={`command-${props.codeBlockIndex}-${index}`} as='li'
before={!props.disablePrompt}>
{formatCommand(command)}
</Code>
);
})
);
};
const renderCommands = () => {
return props.commands.map((command, index) => {
return (
<Code
key={`command-${props.codeBlockIndex}-${index}`}
as="li"
before={!props.disablePrompt}
>
{formatCommand(command)}
</Code>
);
});
};
return (
<CodeShellStyle as='ul' maxWidth={props.maxWidth}>
<Svg position='absolute' top='12px' right='12px' cursor='pointer'
backgroundColor={theme.colors.white} src={ico} onClick={clickCopyButton}/>
{ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
{renderCommands()}
</CodeShellStyle>
);
return (
<CodeShellStyle as="ul" maxWidth={props.maxWidth}>
<Svg
position="absolute"
top="12px"
right="12px"
cursor="pointer"
backgroundColor={theme.colors.white}
src={ico}
onClick={clickCopyButton}
/>
{ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
{renderCommands()}
</CodeShellStyle>
);
};
export default CodeShell;

11
src/components/specific_challenge/HowTo/sections/HowToContent.js
View File

@ -22,9 +22,7 @@ const HowToContent = (props) => {
return (
<CodeShell
codeBlockIndex={0}
commands={[
props.userFullInfo.individualKey
]}
commands={[props.userFullInfo.individualKey]}
/>
);
}
@ -49,7 +47,7 @@ const HowToContent = (props) => {
<Body as="p" margin="auto 0">
Create a private git repository with the name
<Medium as="span">&nbsp;{props.challengeName}</Medium>
.&nbsp;The name of the repository must match!
&nbsp;The name of the repository must match!
</Body>
</Grid>
<Grid
@ -59,8 +57,9 @@ const HowToContent = (props) => {
>
<CircleNumber number="2" />
<Body as="p" margin="auto 0">
Add the following ssh key <Medium as="span">{props.userFullInfo ? '' : 'REPO_KEY_HERE'}</Medium> to
your deploy keys in your git repository settings.
Add the following ssh key{' '}
<Medium as="span">{props.userFullInfo ? '' : 'REPO_KEY_HERE'}</Medium>{' '}
to your deploy keys in your git repository settings.
</Body>
</Grid>
{repoKeyRender()}