From e9780a60f461456bd727b48c249ebb17f895f27c Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 24 Oct 2023 02:18:16 +0200
Subject: [PATCH] [feature-274] clean component

---
 .../available-version-item.component.tsx       | 18 ++++--------------
 .../svgs/icons/oculus-icon.component.tsx       |  8 ++++----
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/available-versions/available-version-item.component.tsx b/src/renderer/components/available-versions/available-version-item.component.tsx
index ce2c7569..c46a5459 100644
--- a/src/renderer/components/available-versions/available-version-item.component.tsx
+++ b/src/renderer/components/available-versions/available-version-item.component.tsx
@@ -4,12 +4,10 @@ import defaultImage from "../../../../assets/images/default-version-img.jpg";
 import dateFormat from "dateformat";
 import { BsmImage } from "../shared/bsm-image.component";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
-import { BsmIcon } from "../svgs/bsm-icon.component";
-import { LinkOpenerService } from "renderer/services/link-opener.service";
 import { motion } from "framer-motion";
 import { GlowEffect } from "../shared/glow-effect.component";
-import { useService } from "renderer/hooks/use-service.hook";
 import equal from "fast-deep-equal";
+import { SteamIcon } from "../svgs/icons/steam-icon.component";
 
 type Props = {
     version: BSVersion;
@@ -18,15 +16,10 @@ type Props = {
 }
 
 export const AvailableVersionItem = memo(function AvailableVersionItem({version, selected, onClick}: Props) {
-    const linkOpener = useService(LinkOpenerService)
 
     const [hovered, setHovered] = useState(false);
     const t = useTranslation();
 
-    const openReleasePage = () => {
-        linkOpener.open(version.ReleaseURL);
-    };
-
     const formatedDate = (() => dateFormat(+version.ReleaseDate * 1000, "ddd. d mmm yyyy"))();
 
     return (
@@ -41,15 +34,12 @@ export const AvailableVersionItem = memo(function AvailableVersionItem({version,
                         <span className="text-sm text-gray-700 dark:text-gray-400">{formatedDate}</span>
                     </div>
                     {version.ReleaseURL && (
-                        // eslint-disable-next-line jsx-a11y/anchor-is-valid -- link will be reworked
                         <a
-                            onClickCapture={e => {
-                                e.stopPropagation();
-                                openReleasePage();
-                            }}
+                            href={version.ReleaseURL}
+                            target="_blank"
                             className="flex flex-row justify-between items-center rounded-full bg-black bg-opacity-30 text-white pb-px hover:bg-opacity-50"
                         >
-                            <BsmIcon icon="steam" className="w-[25px] h-[25px] transition-transform group-hover:rotate-[-360deg] duration-300" />
+                            <SteamIcon className="w-[25px] h-[25px] transition-transform group-hover:rotate-[-360deg] duration-300" />
                             <span className="relative -left-px text-sm w-fit max-w-0 text-center overflow-hidden h-full whitespace-nowrap pb-[3px] transition-all group-hover:max-w-[200px] group-hover:px-1 duration-300">{t("pages.available-versions.steam-release")}</span>
                         </a>
                     )}
diff --git a/src/renderer/components/svgs/icons/oculus-icon.component.tsx b/src/renderer/components/svgs/icons/oculus-icon.component.tsx
index ce911748..77f54b82 100644
--- a/src/renderer/components/svgs/icons/oculus-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/oculus-icon.component.tsx
@@ -1,12 +1,12 @@
-import { CSSProperties } from "react";
+import { forwardRef, HTMLProps } from "react";
 
-export function OculusIcon(props: { className?: string; style?: CSSProperties }) {
+export const OculusIcon = forwardRef<SVGSVGElement, HTMLProps<SVGSVGElement>>((props, ref) => {
     return (
-        <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
             <path
                 fill="currentColor"
                 d="M24.182 18.599c-0.427 0.297-0.901 0.474-1.411 0.552-0.51 0.083-1.016 0.068-1.521 0.068h-10.5c-0.51 0-1.016 0.021-1.526-0.068-0.51-0.083-0.979-0.255-1.411-0.552-0.854-0.604-1.365-1.563-1.365-2.604 0-1.057 0.516-2.016 1.37-2.599 0.417-0.297 0.896-0.479 1.396-0.557 0.5-0.083 1-0.083 1.526-0.083h10.5c0.5 0 1.016-0.016 1.516 0.063s0.984 0.26 1.401 0.542c0.865 0.578 1.365 1.557 1.365 2.599 0 1.036-0.526 2-1.38 2.599zM28.411 8.526c-1.125-0.906-2.417-1.531-3.818-1.865-0.802-0.193-1.604-0.281-2.432-0.307-0.599-0.021-1.198-0.010-1.818-0.010h-8.661c-0.609 0-1.224-0.010-1.833 0.010-0.823 0.026-1.63 0.109-2.432 0.307-1.401 0.339-2.698 0.964-3.818 1.865-2.281 1.823-3.599 4.568-3.599 7.474 0 2.911 1.318 5.656 3.583 7.474 1.13 0.906 2.422 1.531 3.823 1.87 0.802 0.193 1.609 0.281 2.432 0.302 0.599 0.021 1.198 0.016 1.818 0.016h8.661c0.599 0 1.219 0.005 1.818-0.016 0.823-0.021 1.62-0.109 2.417-0.302 1.401-0.344 2.682-0.969 3.823-1.87 2.307-1.823 3.625-4.568 3.625-7.474s-1.318-5.656-3.589-7.474z"
             />
         </svg>
     );
-}
+})