ywana-core8 0.0.1

package/src/widgets/viewer/Viewer.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { Icon, Header, Text } from '../../html'
+import './Viewer.css'
+
+/**
+ * Viewer
+ */
+export const Viewer = ({ title, src, info, actions = [], tools = false, onClose }) => {
+
+    const [showDetails, setShowDetails] = useState(false)
+
+    function toggleDetails() {
+        setShowDetails(!showDetails)
+    }
+
+    const headerTitle = <Text use="headline6">{title}</Text>
+    return (
+        <div className="viewer">
+            <Header icon={{ icon: 'close', clickable: true, action: onClose }} title={headerTitle} >
+                {showDetails ? '' : <Icon icon="info" clickable action={toggleDetails} />}
+                {actions}
+            </Header>
+            <main>
+                <div className="resizer">
+                    <picture>
+                        <img src={src} />
+                    </picture>
+                </div>
+            </main>
+            <aside className={`${showDetails ? 'open' : ''}`}>
+                <Header title="Detalles">
+                    <Icon icon="close" clickable action={toggleDetails} />
+                </Header>
+                <main>
+                    {info}
+                </main>
+            </aside>
+            {tools ? (
+                <footer>
+                    <Icon clickable icon="zoom_out" />
+                    <Icon clickable icon="zoom_out_map" />
+                    <Icon clickable icon="zoom_in" />
+                </footer>
+            ) : null }
+        </div>
+    )
+}