add examples

martynaskadisa · Jul 27, 2020 · 1ee94aa · 1ee94aa
1 parent 561f721
commit 1ee94aa
Showing 1 changed file with 32 additions and 11 deletions.
diff --git a/example/src/App.js b/example/src/App.js
@@ -1,17 +1,11 @@
 import React from 'react';
-import { useMediaMeta } from 'use-media-session';
 
 const App = () => {
-  useMediaMeta({
-    title: 'React app',
-    album: 'React',
-    artist: 'React',
-  });
   return (
-    <div style={{ maxWidth: 800, margin: '2rem auto', padding: '1rem' }}>
+    <div style={{ maxWidth: 900, margin: '2rem auto', padding: '1rem' }}>
       <h1 style={{ textAlign: 'center' }}>use-media-session</h1>
       <p style={{ textAlign: 'center', marginBottom: '5rem' }}>
-        Hooks for interacting with Media Session API
+        React hooks for interacting with Media Session API
       </p>
       <div style={{ textAlign: 'center' }}>
         <a
@@ -28,9 +22,36 @@ const App = () => {
       <p>or</p>
       <pre>yarn add use-media-session</pre>
       <h2 style={{ marginTop: '5rem' }}>Examples</h2>
-      <p>// @TODO</p>
-      <h3>API reference</h3>
-      <p>// also @TODO</p>
+      <h3>useMediaMeta</h3>
+      <iframe
+        src="https://codesandbox.io/embed/use-media-meta-example-g14rj?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark"
+        style={{
+          width: '100%',
+          height: '600px',
+          border: 0,
+          borderRadius: 4,
+          overflow: 'hidden',
+        }}
+        title="use-media-meta-example"
+        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+      />
+      <h3>useMediaSession</h3>
+      <iframe
+        src="https://codesandbox.io/embed/use-media-session-example-ihfgs?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark"
+        style={{
+          width: '100%',
+          height: '600px',
+          border: 0,
+          borderRadius: 4,
+          overflow: 'hidden',
+        }}
+        title="use-media-meta-example"
+        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+      />
+      <h2>API reference</h2>
+      <h3>useMediaMeta</h3>
     </div>
   );
 };