[ENG-934] EXIF UI (#1305)

* Media data UI

* Make `MediaTime` adjacently tagged

* cleanup ts

* don't destructure accordion props

* Large bruh

* round location coords

---------

Co-authored-by: Oscar Beaumont <oscar@otbeaumont.me>
Co-authored-by: Brendan Allan <brendonovich@outlook.com>

interface/components/Accordion.tsx

@@ -1,30 +1,41 @@
 import clsx from 'clsx';
 import { CaretDown } from 'phosphor-react';
-import { useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 
 interface Props {
-	children: React.ReactNode;
 	className?: string;
 	title: string;
+	titleClassName?: string;
+	containerClassName?: string;
+	caretSize?: number;
 }
 
-const Accordion = ({ title, className, children }: Props) => {
+const Accordion = (props: PropsWithChildren<Props>) => {
 	const [toggle, setToggle] = useState(false);
 
 	return (
-		<div className={clsx(className, 'rounded-md border border-app-line bg-app-darkBox')}>
+		<div className={clsx(props.className, 'rounded-md border border-app-line bg-app-darkBox')}>
 			<div
 				onClick={() => setToggle((t) => !t)}
-				className="flex items-center justify-between px-3 py-2"
+				className={clsx(
+					'flex flex-row items-center justify-between px-3 py-2',
+					props.titleClassName
+				)}
 			>
-				<p className="text-xs">{title}</p>
+				<p className="text-xs">{props.title}</p>
 				<CaretDown
+					size={props.caretSize || 12}
 					className={clsx(toggle && 'rotate-180', 'transition-all duration-200')}
 				/>
 			</div>
 			{toggle && (
-				<div className="rounded-b-md border-t border-app-line bg-app-box p-3 pt-2">
-					{children}
+				<div
+					className={clsx(
+						'rounded-b-md border-t border-app-line bg-app-box p-3 py-2',
+						props.containerClassName
+					)}
+				>
+					{props.children}
 				</div>
 			)}
 		</div>