wip

index.html

@@ -28,5 +28,6 @@
     <!-- asn1 debugger styles -->
     <link data-trunk rel="sass" href="public/styles/asn1/page.scss" />
     <link data-trunk rel="sass" href="public/styles/asn1/node.scss" />
+    <link data-trunk rel="sass" href="public/styles/asn1/hex_viewer.scss" />
   </head>
 </html>

public/styles/asn1/hex_viewer.scss

@@ -0,0 +1,3 @@
+.asn1-hex-viewer {
+    background: #edd5ce;
+}

public/styles/asn1/page.scss

@@ -3,4 +3,11 @@
     margin-top: 1em;
     width: 98%;
     color: #403735;
+}
+
+.asn1-viewers {
+    display: grid;
+    grid-template-columns: 70% auto;
+    gap: 0.1em;
+    width: 100%;
 }

src/asn1.rs

@@ -1,12 +1,14 @@
 mod asn1_viewer;
 mod hex_buffer;
 mod scheme;
+mod hex_view;
 
 use asn1_parser::Asn1;
 use web_sys::KeyboardEvent;
 use yew::{classes, function_component, html, use_state, Callback, Html};
 
 use crate::asn1::asn1_viewer::Asn1Viewer;
+use crate::asn1::hex_view::HexViewer;
 use crate::common::{ByteInput, Checkbox};
 
 pub const TEST_ASN1: &[u8] = &[
@@ -73,7 +75,10 @@ pub fn asn1_parser_page() -> Html {
                 <button class="action-button" {onclick}>{"Process"}</button>
                 <Checkbox id={"auto-decode-asn1".to_owned()} name={"auto-decode".to_owned()} checked={*auto_decode} {set_checked} />
             </div>
-            <Asn1Viewer data={(*raw_asn1).clone()} structure={(*parsed_asn1).clone()} />
+            <div class="asn1-viewers">
+                <Asn1Viewer data={(*raw_asn1).clone()} structure={(*parsed_asn1).clone()} />
+                <HexViewer />
+            </div>
         </div>
     }
 }

src/asn1/hex_view.rs

@@ -0,0 +1,10 @@
+use yew::{function_component, html, Html, Properties};
+
+#[function_component(HexViewer)]
+pub fn hex_viewer() -> Html {
+    html! {
+        <div class="asn1-hex-viewer">
+            <span>{"HexView"}</span>
+        </div>
+    }
+}