Rename component folders, and prune styles

ui/v2.5/src/components/Scenes/SceneDetails/SceneDetailPanel.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import * as GQL from "src/core/generated-graphql";
+import { TextUtils } from "src/utils";
+import { TagLink } from "src/components/Shared";
+
+interface ISceneDetailProps {
+  scene: GQL.SceneDataFragment;
+}
+
+export const SceneDetailPanel: React.FC<ISceneDetailProps> = props => {
+  function renderDetails() {
+    if (!props.scene.details || props.scene.details === "") return;
+    return (
+      <>
+        <h6>Details</h6>
+        <p className="pre">{props.scene.details}</p>
+      </>
+    );
+  }
+
+  function renderTags() {
+    if (props.scene.tags.length === 0) return;
+    const tags = props.scene.tags.map(tag => (
+      <TagLink key={tag.id} tag={tag} />
+    ));
+    return (
+      <>
+        <h6>Tags</h6>
+        {tags}
+      </>
+    );
+  }
+
+  return (
+    <div className="row">
+      <h3 className="col scene-header text-truncate">
+        {props.scene.title ?? TextUtils.fileNameFromPath(props.scene.path)}
+      </h3>
+      <div className="col-6 scene-details">
+        <h4>{props.scene.date ?? ""}</h4>
+        {props.scene.rating ? <h6>Rating: {props.scene.rating}</h6> : ""}
+        {props.scene.file.height && (
+          <h6>Resolution: {TextUtils.resolution(props.scene.file.height)}</h6>
+        )}
+        {renderDetails()}
+        {renderTags()}
+      </div>
+      <div className="col-4 offset-2">
+        {props.scene.studio && (
+          <Link
+            to={`/studios/${props.scene.studio.id}`}
+          >
+            <img
+              src={props.scene.studio.image_path ?? ""}
+              alt={`${props.scene.studio.name} logo`}
+              className="studio-logo"
+            />
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};