kylefang/storytime
1
0
Fork 0
mirror of https://github.com/placeholder-soft/storytime.git synced 2026-04-29 04:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: style enter character name

Browse Source
This commit is contained in:
godlike0108
2023-12-12 20:31:36 +08:00
parent 2a9582cc41
commit a4e1bb56a1
1 changed files with 76 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/src/pages/name.tsx
View File

@@ -1,32 +1,89 @@
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { Container, Heading, TextField, Button } from "@radix-ui/themes";
import styled from "styled-components";
import { Heading, TextField, Button } from "@radix-ui/themes";
import { createCharacterName } from "../modules/character/actions";
import { Header, PageContainer } from "../components/Layout/Layout";
const ContentContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100vh;
`;
const StyledEnterNameText = styled.h1`
color: #000;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Inter Tight;
font-size: 50px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 120% */
letter-spacing: -1px;
margin-bottom: 24px;
`;
const StyledInputRoot = styled(TextField.Root)`
display: flex;
width: 323px;
padding: 16px 24px;
justify-content: center;
align-items: flex-start;
gap: 10px;
margin-bottom: 30px;
`;
const StyledInput = styled(TextField.Input)`
color: #898989;
text-align: center;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 10px; /* 83.333% */
text-transform: uppercase;
`;
const StyledButton = styled(Button)`
display: inline-flex;
padding: 4px 25px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
border-radius: 10px;
background: #000;
`;
const Name = () => {
const [characterName, setCharacterName] = useState("");
const navigate = useNavigate();
const dispatch = useDispatch();
return (
<Container>
<Heading>Enter Character Name</Heading>
<TextField.Root>
<TextField.Input
value={characterName}
onChange={(e) => setCharacterName(e.target.value)}
placeholder="ENTER CHARACTER NAME"
/>
</TextField.Root>
<Button
onClick={() => {
dispatch(createCharacterName({ characterName }));
navigate("/characterBase");
}}
>
Select Character
</Button>
</Container>
<PageContainer>
<Header />
<ContentContainer>
<StyledEnterNameText>Enter Character Name</StyledEnterNameText>
<StyledInputRoot>
<StyledInput
value={characterName}
onChange={(e) => setCharacterName(e.target.value)}
placeholder="ENTER CHARACTER NAME"
/>
</StyledInputRoot>
<StyledButton
onClick={() => {
dispatch(createCharacterName({ characterName }));
navigate("/characterBase");
}}
>
Create Character
</StyledButton>
</ContentContainer>
</PageContainer>
);
};