Add beginners day tag
@@ -5,6 +5,8 @@ import { jsx } from "theme-ui";
import { formatDay } from "./format-day";
+// TODO: beginners day could be an attribute on the backend
+
export const DaySelector: React.SFC<{
setCurrentDay: (day: string) => void;
currentDay: string | null;
@@ -20,13 +22,13 @@ export const DaySelector: React.SFC<{
setCurrentDay(e.target.value)
}
>
- {days.map(day => (
+ {days.map((day, index) => (
<option
key={day.day}
value={day.day}
selected={currentDay === day.day}
>
- {formatDay(day.day)}
+ {formatDay(day.day)} {index === 0 && "(Beginners day)"}
</option>
))}
</Select>
@@ -39,7 +41,7 @@ export const DaySelector: React.SFC<{
display: ["none", "block"],
}}
>
- {days.map(day => (
+ {days.map((day, index) => (
<Box
key={day.day}
as="li"
@@ -53,12 +55,27 @@ export const DaySelector: React.SFC<{
sx={{
backgroundColor: currentDay === day.day ? "violet" : "white",
mr: "-3px",
+ position: "relative",
"&:hover": {
backgroundColor: "lightViolet",
},
}}
>
{formatDay(day.day)}
+ {index === 0 && (
+ <Box
+ sx={{
+ color: "red",
+ position: "absolute",
+ fontSize: 10,
+ fontWeight: "bold",
+ top: "2px",
+ right: "8px",
+ }}
+ >
+ Beginners day
+ </Box>
+ )}
</Button>
</Box>
))}
