mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Convert CardView to react

Browse source
This commit is contained in:
grafixeyehero 2024-01-31 04:25:14 +03:00
parent 9efc71fa3b
commit 97472ac8bb
20 changed files with 1993 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/components/cardbuilder/Card/CardBox.tsx Normal file
View file

@ -0,0 +1,79 @@
import React, { FC } from 'react';
import layoutManager from 'components/layoutManager';
import CardOverlayButtons from './CardOverlayButtons';
import CardHoverMenu from './CardHoverMenu';
import CardOuterFooter from './CardOuterFooter';
import CardContent from './CardContent';
import type { ItemDto } from 'types/itemDto';
import type { CardOptions } from 'types/cardOptions';
interface CardBoxProps {
item: ItemDto;
cardOptions: CardOptions;
className: string;
shape: string | null | undefined;
imgUrl: string | undefined;
blurhash: string | undefined;
forceName: boolean;
coveredImage: boolean;
overlayText: boolean | undefined;
}
const CardBox: FC<CardBoxProps> = ({
item,
cardOptions,
className,
shape,
imgUrl,
blurhash,
forceName,
coveredImage,
overlayText
}) => {
return (
<div className={className}>
<div className='cardScalable'>
<div className={`cardPadder cardPadder-${shape}`}></div>
<CardContent
item={item}
cardOptions={cardOptions}
coveredImage={coveredImage}
overlayText={overlayText}
imgUrl={imgUrl}
blurhash={blurhash}
forceName={forceName}
/>
{layoutManager.mobile && (
<CardOverlayButtons
item={item}
cardOptions={cardOptions}
/>
)}
{layoutManager.desktop
&& !cardOptions.disableHoverMenu && (
<CardHoverMenu
item={item}
cardOptions={cardOptions}
/>
)}
</div>
{!overlayText && (
<CardOuterFooter
item={item}
cardOptions={cardOptions}
forceName={forceName}
overlayText={overlayText}
imgUrl={imgUrl}
/>
)}
</div>
);
};
export default CardBox;