Make a pretty component for displaying a device OR a component

[NCGThompson]

This would correspond to the biggest panel in our assignment example. However, we want ours to look better.

We are required to be able to display either by component or by device. Devices contain zero or more components (or maybe one or more). Devices also have some metadata, and I'm not sure whether or not the parent's metadata should be displayed while viewing by component.

The input should somehow correspond to a component or device, but the specifics are up to whoever makes it. Some possibilities:

• Input Element | undefined — The component can take a DOM node corresponding to an XML element. For a tagName of DeviceStream or ComponentStream, display it as a device or component respectively. If desired, the device metadata for a component can still be accessed because Elements are just references to a point in a DOM. Undefined will require special handling.
• Input SMSDeviceInterface | SMSComponentInterface | undefined — The component can take a union (one of multiple types separated by |) of the interfaces from Parse and display xml data #13 as well as undefined to represent none. Whether it is a component or device can be checked with the .type parameter.
• Input SMSDeviceInterface — If displaying the device metadata is fine, then the component can rely on the parent/caller to elide all components other than the selected one. If neither a device or component is selected, the parent/caller can initialize an empty SMSDeviceInterface.