zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

use of new custom image component and add css scale effect

Browse Source
This commit is contained in:
MathieuG-P
2022-06-19 21:54:48 +02:00
parent 177d032744
commit 00752c3971
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/available-versions/available-version-item.component.tsx
+5 -3
View File
@@ -6,6 +6,7 @@ import { BsDownloaderService } from "renderer/services/bs-downloader.service";
import { distinctUntilChanged } from "rxjs";
import defaultImage from '../../../../assets/default-version-img.jpg'
import dateFormat from "dateformat";
import { BsmImage } from "../shared/bsm-image.component";
export function AvailableVersionItem(props: {version: BSVersion}) {
@@ -16,6 +17,7 @@ export function AvailableVersionItem(props: {version: BSVersion}) {
const formatedDate = (() => { return dateFormat(+props.version.ReleaseDate*1000, "ddd. dS mmm yyyy"); })()
const toggleSelect = () => {
if(bsDownloaderService.isDownloading){ return; }
if(selected){ bsDownloaderService.selectedBsVersion$.next(null); }
else{ bsDownloaderService.selectedBsVersion$.next(props.version); }
}
@@ -33,11 +35,11 @@ export function AvailableVersionItem(props: {version: BSVersion}) {
}, [])
return (
<div className="group m-3 relative w-72 h-60" onClick={toggleSelect}>
<div className="group m-3 relative w-72 h-60 transition-transform active:scale-[.98]" onClick={toggleSelect}>
<div className={`absolute glow-on-hover group-hover:opacity-100 ${selected && "opacity-100"}`}></div>
<div className={`relative flex flex-col overflow-hidden rounded-md w-72 h-60 bg-main-color-2 cursor-pointer group-hover:shadow-none duration-300 ${!selected && "shadow-lg shadow-gray-900"}`}>
<img alt="version image" src={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy" onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = defaultImage }}></img>
<img src={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy" onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = defaultImage }}/>
<BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy"/>
<BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy"/>
<div className="relative z-[1] p-2 w-full flex items-center justify-between grow">
<div>
<span className="block text-xl font-bold text-white tracking-wider">{props.version.BSVersion}</span>