Skip to content

Commit e3262b3

Browse files
frorongfrorong
authored
Merge pull request #102 from Stack-Knowledge/feature/approve
[Admin] Add approve modal button
2 parents 9a50aed + 1cbc421 commit e3262b3

File tree

13 files changed

+250
-67
lines changed

13 files changed

+250
-67
lines changed

‎packages/common/src/components/Modal/style.ts‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,5 @@
11
import styled from '@emotion/styled';
22

3-
export const ModalWrapper = styled.div`
4-
background-color: #fbfbfb;
5-
${({ theme }) => theme.color.black};
6-
width: 17.5rem;
7-
height: 9.375rem;
8-
border-radius: 1.25rem;
9-
`;
10-
11-
export const ModalContentWrapper = styled.div`
12-
display: flex;
13-
height: 6.125rem;
14-
justify-content: center;
15-
align-items: center;
16-
flex-direction: column;
17-
`;
18-
19-
export const ModalContent = styled.span`
20-
${({ theme }) => theme.typo.body2};
21-
color: ${({ theme }) => theme.color.black};
22-
font-weight: 500;
23-
`;
24-
25-
export const ModalButtonWrapper = styled.form`
26-
display: flex;
27-
justify-content: center;
28-
gap: 1rem;
29-
`;
30-
313
export const Button = styled.button`
324
${({ theme }) => theme.typo.body2};
335
width: 7.25rem;
@@ -48,3 +20,31 @@ export const ModalButton = styled(Button)`
4820
border: 0;
4921
}
5022
`;
23+
24+
export const ModalButtonWrapper = styled.form`
25+
display: flex;
26+
justify-content: center;
27+
gap: 1rem;
28+
`;
29+
30+
export const ModalContent = styled.span`
31+
${({ theme }) => theme.typo.body2};
32+
color: ${({ theme }) => theme.color.black};
33+
font-weight: 500;
34+
`;
35+
36+
export const ModalContentWrapper = styled.div`
37+
display: flex;
38+
height: 6.125rem;
39+
justify-content: center;
40+
align-items: center;
41+
flex-direction: column;
42+
`;
43+
44+
export const ModalWrapper = styled.div`
45+
background-color: #fbfbfb;
46+
${({ theme }) => theme.color.black};
47+
width: 17.5rem;
48+
height: 9.375rem;
49+
border-radius: 1.25rem;
50+
`;

‎projects/admin/src/PageContainer/MainPage/index.stories.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use client';
2+
3+
import MainPage from '.';
4+
5+
import type { Meta, StoryObj } from '@storybook/react';
6+
7+
export default {
8+
title: 'admin/Page/MainPage',
9+
component: MainPage,
10+
} as Meta<typeof MainPage>;
11+
12+
type Story = StoryObj<typeof MainPage>;
13+
14+
export const Primary: Story = {};

‎projects/admin/src/PageContainer/MainPage/index.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
'use client';
2+
3+
import { useRef, useState } from 'react';
4+
5+
import { XIcon } from 'admin/assets';
6+
import { ApproveModalButton } from 'admin/components';
7+
8+
import { MainPage } from 'common';
9+
10+
import * as S from './style';
11+
12+
const MainPageComponent = () => {
13+
const dialog = useRef<HTMLDialogElement>(null);
14+
15+
const [isOpen, setIsOpen] = useState<boolean>(false);
16+
17+
const handleModalOpen = () => {
18+
dialog.current?.showModal();
19+
setIsOpen(true);
20+
};
21+
22+
return (
23+
<>
24+
<S.Modal ref={dialog} isOpen={isOpen}>
25+
<form method='dialog'>
26+
<S.ModalButton onClick={() => setIsOpen(false)}>
27+
<XIcon />
28+
</S.ModalButton>
29+
</form>
30+
</S.Modal>
31+
<S.Wrapper onClick={handleModalOpen}>
32+
<ApproveModalButton />
33+
</S.Wrapper>
34+
<MainPage isClient={false} />
35+
</>
36+
);
37+
};
38+
39+
export default MainPageComponent;

‎projects/admin/src/PageContainer/MainPage/style.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { keyframes } from '@emotion/react';
2+
import styled from '@emotion/styled';
3+
4+
const slideAndScaleAnimation = keyframes`
5+
from {
6+
transform: translateX(33.75rem) translateY(16.25rem) scale(0.1);
7+
}
8+
to {
9+
transform: translateX(0) translateY(0) scale(1);
10+
}
11+
`;
12+
13+
export const Modal = styled.dialog<{ isOpen: boolean }>`
14+
width: 21.875rem;
15+
height: 24.0625rem;
16+
border-radius: 1.25rem;
17+
background: #fbfbfb;
18+
padding: 0;
19+
position: relative;
20+
border: none;
21+
outline: none;
22+
23+
animation: ${({ isOpen }) => (isOpen ? slideAndScaleAnimation : 'none')} 0.2s
24+
ease-in-out;
25+
26+
::backdrop {
27+
background: rgba(5, 5, 5, 0.4);
28+
}
29+
`;
30+
31+
export const ModalButton = styled.button`
32+
position: absolute;
33+
top: 0.625rem;
34+
right: 0.625rem;
35+
cursor: pointer;
36+
padding: 0;
37+
margin: 0;
38+
background: none;
39+
border: none;
40+
outline: none;
41+
`;
42+
43+
export const Wrapper = styled.div`
44+
position: absolute;
45+
right: 20vw;
46+
top: 75vh;
47+
z-index: 3;
48+
`;

‎projects/admin/src/PageContainer/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { default as CreatePage } from './CreatePage';
22
export { default as GradingPage } from './GradingPage';
3+
export { default as MainPage } from './MainPage';
34
export { default as ScoringPage } from './ScoringPage';
45
export { default as ShopPage } from './ShopPage';

‎projects/admin/src/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { MainPage } from 'common';
1+
import { MainPage } from 'admin/PageContainer';
22

33
export default function Home() {
4-
return <MainPage isClient={false} />;
4+
return <MainPage />;
55
}

‎projects/admin/src/assets/XIcon.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const XIcon = () => (
2+
<svg
3+
xmlns='http://www.w3.org/2000/svg'
4+
width='1.5rem'
5+
height='1.5rem'
6+
viewBox='0 0 24 24'
7+
fill='none'
8+
>
9+
<path
10+
d='M6 18L18 6M6 6L18 18'
11+
stroke='black'
12+
stroke-width='1.5'
13+
stroke-linecap='round'
14+
stroke-linejoin='round'
15+
/>
16+
</svg>
17+
);
18+
19+
export default XIcon;

‎projects/admin/src/assets/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as XIcon } from './XIcon';

‎projects/admin/src/components/ApproveModalButton/index.stories.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use client';
2+
3+
import ApproveModalButton from '.';
4+
5+
import type { Meta, StoryObj } from '@storybook/react';
6+
7+
export default {
8+
title: 'admin/ApproveModalButton',
9+
component: ApproveModalButton,
10+
} as Meta<typeof ApproveModalButton>;
11+
12+
type Story = StoryObj<typeof ApproveModalButton>;
13+
14+
export const Primary: Story = {};

‎projects/admin/src/components/ApproveModalButton/index.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use client';
2+
3+
import * as S from './style';
4+
5+
const ApproveModalButton = () => (
6+
<S.ButtonWrapper>
7+
<svg
8+
width='4.375rem'
9+
height='4.375rem'
10+
viewBox='0 0 70 70'
11+
fill='none'
12+
xmlns='http://www.w3.org/2000/svg'
13+
>
14+
<circle cx='35' cy='35' r='35' fill='#FFA927' />
15+
<path
16+
d='M38.5 43.316C39.4951 43.6049 40.5263 43.7511 41.5625 43.75C43.229 43.7524 44.8738 43.3724 46.3703 42.6393C46.4146 41.5937 46.1167 40.562 45.5219 39.7009C44.9271 38.8397 44.0678 38.1959 43.0742 37.8671C42.0805 37.5383 41.0068 37.5423 40.0157 37.8786C39.0246 38.2149 38.1701 38.8652 37.5818 39.7308M38.5 43.316V43.3125C38.5 42.014 38.1663 40.7925 37.5818 39.7308M38.5 43.316V43.4397C36.2547 44.7919 33.6824 45.5044 31.0613 45.5C28.3418 45.5 25.7973 44.7475 23.625 43.4397L23.6238 43.3125C23.6229 41.661 24.1717 40.0563 25.1837 38.7511C26.1956 37.446 27.6131 36.5148 29.2127 36.1044C30.8124 35.6939 32.5031 35.8275 34.0184 36.4841C35.5338 37.1407 36.7874 38.283 37.5818 39.7308M35 28.4375C35 29.4818 34.5852 30.4833 33.8467 31.2217C33.1083 31.9602 32.1068 32.375 31.0625 32.375C30.0182 32.375 29.0167 31.9602 28.2783 31.2217C27.5399 30.4833 27.125 29.4818 27.125 28.4375C27.125 27.3932 27.5399 26.3917 28.2783 25.6533C29.0167 24.9148 30.0182 24.5 31.0625 24.5C32.1068 24.5 33.1083 24.9148 33.8467 25.6533C34.5852 26.3917 35 27.3932 35 28.4375ZM44.625 31.0625C44.625 31.8747 44.3024 32.6537 43.728 33.228C43.1537 33.8023 42.3747 34.125 41.5625 34.125C40.7503 34.125 39.9713 33.8023 39.397 33.228C38.8227 32.6537 38.5 31.8747 38.5 31.0625C38.5 30.2503 38.8227 29.4713 39.397 28.897C39.9713 28.3227 40.7503 28 41.5625 28C42.3747 28 43.1537 28.3227 43.728 28.897C44.3024 29.4713 44.625 30.2503 44.625 31.0625Z'
17+
stroke='#FBFBFB'
18+
stroke-width='1.5'
19+
stroke-linecap='round'
20+
stroke-linejoin='round'
21+
/>
22+
</svg>
23+
</S.ButtonWrapper>
24+
);
25+
26+
export default ApproveModalButton;

0 commit comments

Comments
 (0)