diff options
| author | lonkaars <l.leblansch@gmail.com> | 2021-01-07 15:40:11 +0100 |
|---|---|---|
| committer | lonkaars <l.leblansch@gmail.com> | 2021-01-07 15:40:11 +0100 |
| commit | 5971b69a2990390529a6f8076331e3d7d10c9325 (patch) | |
| tree | 875e0db4d22fc64dc86291517f10c3b58a073c01 /src/components | |
| parent | 4bc2dcc802042d2d5173bd2b4a031b290a1c33c6 (diff) | |
soortvan zoekbalk
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/gameSettings.tsx | 5 | ||||
| -rw-r--r-- | src/components/ui.tsx | 32 |
2 files changed, 35 insertions, 2 deletions
diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx index bd28221..13bb1cc 100644 --- a/src/components/gameSettings.tsx +++ b/src/components/gameSettings.tsx @@ -12,7 +12,7 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { height: 80 }}> <p style={{ - opacity: .6, + opacity: .75, fontStyle: "italic", userSelect: "none", position: "absolute", @@ -40,7 +40,8 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { width: 85, verticalAlign: "middle", textAlign: "center", - transform: "translateY(-50%)" + transform: "translateY(-50%)", + userSelect: "none" }}>Spelregels aanpassen</span> </Button> </div>; diff --git a/src/components/ui.tsx b/src/components/ui.tsx index d869151..2a7e950 100644 --- a/src/components/ui.tsx +++ b/src/components/ui.tsx @@ -53,3 +53,35 @@ export function Button(props: ButtonProps) { </div>; } +interface SearchBarProps { + label?: string; +} + +export function SearchBar(props: SearchBarProps) { + return <div style={{ + marginTop: 24, + borderRadius: 8, + overflow: "hidden", + width: "100%" + }}> + <input type="text" placeholder={props.label} spellCheck={false} style={{ + padding: 12, + border: 0, + width: "calc(100% - 24px - 40px)", + fontSize: 14, + backgroundColor: "var(--page-background)", + color: "var(--text-alt)", + borderBottomLeftRadius: 8, + borderTopLeftRadius: 8 + }}/> + <div style={{ + width: 40, + height: 40, + backgroundColor: "var(--disk-a)", + display: "inline-block", + verticalAlign: "top", + position: "relative" + }}></div> + </div> +} + |