From fb9126ecee8a266a00170c20fb235b7940671f52 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Thu, 7 Sep 2023 17:43:07 +0300
Subject: [PATCH] [ENG-1082] Accordion variants (#1310)

* updated with variants

* className

* naming

* requested updates

* Update Accordion.tsx

---------

Co-authored-by: Utku <74243531+utkubakir@users.noreply.github.com>
---
 .../Explorer/Inspector/MediaData.tsx          |  7 +--
 interface/components/Accordion.tsx            | 43 +++++++++----------
 2 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx b/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx
index 29640c971..6cd7fc0d6 100644
--- a/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx
+++ b/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx
@@ -21,12 +21,7 @@ function formatLocation(loc: MediaLocation): string {
 function MediaData({ data }: Props) {
 	return data.type === 'Image' ? (
 		<div className="flex flex-col gap-0 py-2">
-			<Accordion
-				containerClassName="flex flex-col gap-1 px-4 rounded-b-none"
-				titleClassName="px-4 pt-0 pb-1 !justify-end gap-2 flex-row-reverse text-ink-dull"
-				className="rounded-none border-0 bg-transparent py-0"
-				title="More info"
-			>
+			<Accordion variant="apple" title="More info">
 				<MetaData label="Date" value={formatMediaTime(data.date_taken)} />
 				<MetaData label="Type" value={data.type} />
 				<MetaData
diff --git a/interface/components/Accordion.tsx b/interface/components/Accordion.tsx
index 38a1ab984..8c1a3e666 100644
--- a/interface/components/Accordion.tsx
+++ b/interface/components/Accordion.tsx
@@ -3,41 +3,38 @@ import { CaretDown } from 'phosphor-react';
 import { PropsWithChildren, useState } from 'react';
 
 interface Props {
-	className?: string;
-	title: string;
-	titleClassName?: string;
-	containerClassName?: string;
 	caretSize?: number;
+	title: string;
+	variant?: keyof typeof styles;
+	className?: string;
 }
 
+const styles = {
+	default: {
+		container: 'flex flex-col gap-1 rounded-b-none px-4',
+		title: 'flex flex-row items-center justify-between px-3 py-2',
+		box: 'rounded-md border border-app-line bg-app-darkBox'
+	},
+	apple: {
+		container: 'flex flex-col gap-1 rounded-b-none px-4',
+		title: 'flex flex-row-reverse items-center justify-end gap-2 px-4 pb-1 pt-0 text-ink-dull',
+		box: 'rounded-none border-0 bg-transparent py-0'
+	}
+};
+
 const Accordion = (props: PropsWithChildren<Props>) => {
 	const [toggle, setToggle] = useState(false);
-
+	const variant = styles[props.variant ?? 'default'];
 	return (
-		<div className={clsx(props.className, 'rounded-md border border-app-line bg-app-darkBox')}>
-			<div
-				onClick={() => setToggle((t) => !t)}
-				className={clsx(
-					'flex flex-row items-center justify-between px-3 py-2',
-					props.titleClassName
-				)}
-			>
+		<div className={clsx(variant.box, props.className)}>
+			<div onClick={() => setToggle((t) => !t)} className={variant.title}>
 				<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={clsx(
-						'rounded-b-md border-t border-app-line bg-app-box p-3 py-2',
-						props.containerClassName
-					)}
-				>
-					{props.children}
-				</div>
-			)}
+			{toggle && <div className={variant.container}>{props.children}</div>}
 		</div>
 	);
 };