feat: basic song info

gmus-web/src/components/ui/mobile/info.tsx

@@ -0,0 +1,49 @@
+import { rem } from 'polished';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Song } from '../../../types';
+
+export type Props = {
+  song: Song | null;
+};
+
+const Container = styled.div`
+  align-items: center;
+  background: #e9fff3;
+  border: 1px solid #339a33;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  margin: ${rem(8)} ${rem(16)};
+  padding: ${rem(8)};
+`;
+
+const Title = styled.span`
+  font-weight: bold;
+  margin-bottom: ${rem(4)};
+`;
+
+const Meta = styled.span``;
+const Artist = styled.span``;
+const Album = styled.span``;
+
+const Dash = styled.span`
+  margin: 0 ${rem(12)};
+`;
+
+export const SongInfo: React.FC<Props> = ({ song }) => (
+  <Container>
+    {song && (
+      <>
+        <Title>{song.title}</Title>
+        <Meta>
+          <Artist>{song.artist || 'Unknown Artist'}</Artist>
+          <Dash>-</Dash>
+          <Album>{song.album || 'Unknown Album'}</Album>
+        </Meta>
+      </>
+    )}
+    {!song && <Dash>-</Dash>}
+  </Container>
+);

gmus-web/src/components/ui/mobile/wrapper.styles.ts

@@ -1,9 +1,11 @@
+import { rem } from 'polished';
 import styled from 'styled-components';
 
 export const Container = styled.div`
   bottom: 0;
   display: flex;
   flex-flow: column;
+  font: ${rem(16)} sans-serif;
   justify-content: space-between;
   position: absolute;
   right: 0;