feat: Initial clean release of CHM

packages/pdf-viewer/ui/ZoomControls.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+
+const ZoomGroup = styled.div<{ size: number }>`
+display: flex;
+justify-content: center;
+align-items: center;
+flex-flow: row;
+color: var(--grey);
+cursor: initial;
+font-size: ${props => props.size}rem;
+padding: 0.2rem 0.4rem;
+user-select: none;
+border-radius: 5px;
+&:hover {
+	background: #7676764d;
+}
+svg:hover {
+	color: var(--secondary);
+}
+`;
+
+export interface ZoomControlsProps {
+	zoom: number;
+	onChange: (zoom: number)=> void;
+	size?: number;
+}
+
+export default function ZoomControls(props: ZoomControlsProps) {
+
+	const zoomIn = () => {
+		props.onChange(Math.min(props.zoom + 0.25, 2));
+	};
+
+	const zoomOut = () => {
+		props.onChange(Math.max(props.zoom - 0.25, 0.5));
+	};
+
+	return (<ZoomGroup size={props.size || 0.8}>
+		<FontAwesomeIcon icon={faMinus} title="Zoom Out" style={{ paddingRight: '0.2rem', cursor: 'pointer' }} onClick={zoomOut} />
+		<span style={{ color: 'grey' }} >{props.zoom * 100}%</span>
+		<FontAwesomeIcon icon={faPlus} title="Zoom In" style={{ paddingLeft: '0.2rem', cursor: 'pointer' }} onClick={zoomIn} />
+	</ZoomGroup>);
+}