Added subtitle for work or break label (#87)

* added subtitle component

* added interface and formatted

* Add return type to Subtitle

* Fixed formatting errors

src/Pages/Room/Room.tsx

@@ -33,6 +33,7 @@ import PomoCounter from "../../components/PomoCounter/PomoCounter";
 import { PomoCounterPosition } from "../../components/PomoCounter/PomoCounter.styled";
 import TimerForm from "../../components/Controls/TimerForm";
 import SettingsModal from "../../components/Modal/SettingsModal";
+import Subtitle from "../../components/TimerTitle/Subtitle";
 
 const Room = (props: RoomProps): JSX.Element => {
 	const {
@@ -224,7 +225,11 @@ const Room = (props: RoomProps): JSX.Element => {
 						isBreak={isBreak}
 						isPublicRoom={isPublicRoom}
 					/>
-
+					<Subtitle
+						isLoaded={isLoaded}
+						workGrey={workGrey}
+						isBreak={isBreak}
+					/>
 					<Timestamp
 						color={workGrey}
 						roomName={roomName}

src/components/TimerTitle/Subtitle.tsx

@@ -0,0 +1,18 @@
+import { StyledSubtitle } from "./TimerTitle.styled";
+
+interface SubtitleProps {
+	isLoaded: boolean;
+	workGrey: string;
+	isBreak: boolean;
+}
+
+const Subtitle = (props: SubtitleProps): JSX.Element => {
+	const { isLoaded, workGrey, isBreak } = props;
+	return (
+		<StyledSubtitle isLoaded={isLoaded} color={workGrey}>
+			{isBreak ? "BREAK" : "WORK"}
+		</StyledSubtitle>
+	);
+};
+
+export default Subtitle;

src/components/TimerTitle/TimerTitle.styled.tsx

@@ -22,3 +22,12 @@ export const TitleEditEmojiSize = styled.div<{
 export const StyledEye = styled(FaRegEye)`
 	margin-right: 0.5rem;
 `;
+
+export const StyledSubtitle = styled.h4<{
+	color: string;
+	isLoaded: boolean;
+}>`
+	text-align: center;
+	color: ${({ color }): string => color};
+	visibility: ${({ isLoaded }): string => (isLoaded ? "visible" : "hidden")};
+`;