Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2021-1-capstone-design1
/
GCL_Project1
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
이승윤
2021-04-18 18:33:04 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
333395a1b2d095f6c9cfcac32df721a5b82c35d1
333395a1
1 parent
36cc93d1
feat: Common component 추가- DropDownButton
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
35 additions
and
0 deletions
frontend/src/components/common/DropdownButton.js
frontend/src/components/common/DropdownButton.js
0 → 100644
View file @
333395a
import
React
from
'react'
;
import
styled
from
'styled-components'
;
import
{
dropdownHeaderColorMap
}
from
'../../lib/styles/palette'
;
const
DropDownBlock
=
styled
.
div
`
margin: 0 auto;
float:
${
props
=>
props
.
float
||
''
}
;
`
;
const
DropDownHeader
=
styled
.
button
`
margin-bottom: 0.8em;
padding: 0.4em;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
font-weight: 500;
font-size:
${
props
=>
props
.
size
}
;
border: 2px solid
${
props
=>
dropdownHeaderColorMap
[
props
.
color
].
borderColor
}
;
color:
${
props
=>
dropdownHeaderColorMap
[
props
.
color
].
color
}
;
background-color:
${
props
=>
dropdownHeaderColorMap
[
props
.
color
].
background
}
;
&:hover {
background-color:
${
props
=>
dropdownHeaderColorMap
[
props
.
color
].
hoverBackground
}
;
}
`
;
const
DropDown
=
({
children
,
float
,
color
,
size
})
=>
{
return
(
<
DropDownBlock
float
=
{
float
}
color
=
{
color
}
size
=
{
size
}
>
<
DropDownHeader
color
=
{
color
}
size
=
{
size
}
>
{
children
}
<
/DropDownHeader
>
<
/DropDownBlock
>
);
};
export
default
DropDown
;
Please
register
or
login
to post a comment