Qortal/q-tube
3
0
Fork 1
mirror of https://github.com/Qortal/q-tube.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #56 from QortalSeth/main

Browse Source 
Added Close Button to ListSuperLikeContainer.tsx
This commit is contained in:
Qortal Dev 2024-12-20 18:02:45 -07:00 committed by GitHub
commit 27006367fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx
View File

@ -1,6 +1,8 @@
import { Box, Tooltip, Typography, useMediaQuery } from "@mui/material"; import { Box, Tooltip, Typography, useMediaQuery } from "@mui/material";
import React from "react"; import React, { useRef } from "react";
import { PopMenu } from "../PopMenu.tsx"; import { fontSizeSmall } from "../../../constants/Misc.ts";
import { CrowdfundActionButton } from "../../Publish/PublishVideo/PublishVideo-styles.tsx";
import { PopMenu, PopMenuRefType } from "../PopMenu.tsx";
import ListSuperLikes from "./ListSuperLikes"; import ListSuperLikes from "./ListSuperLikes";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../../../state/store"; import { RootState } from "../../../state/store";
@ -11,25 +13,17 @@ export const ListSuperLikeContainer = () => {
); );
const isScreenLarge = useMediaQuery("(min-width:1200px)"); const isScreenLarge = useMediaQuery("(min-width:1200px)");
const superlikeListComponent = (
<>
<Typography
sx={{
fontSize: "18px",
color: "gold",
}}
>
Recent Super likes
</Typography>
<ListSuperLikes superlikes={superlikelist} />
</>
);
// @ts-ignore const headerSX = { fontSize: fontSizeSmall, color: "gold" };
const popoverRef = useRef<PopMenuRefType>(null);
return ( return (
<Box sx={{ paddingLeft: "5px" }}> <Box sx={{ paddingLeft: "5px" }}>
{isScreenLarge ? ( {isScreenLarge ? (
<>{superlikeListComponent}</> <>
<Typography sx={headerSX}>Recent Super likes</Typography>
<ListSuperLikes superlikes={superlikelist} />
</>
) : ( ) : (
<PopMenu <PopMenu
showExpandIcon={false} showExpandIcon={false}
@ -39,9 +33,11 @@ export const ListSuperLikeContainer = () => {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginTop: "60px",
}, },
anchorReference: "none", anchorReference: "none",
}} }}
ref={popoverRef}
MenuHeader={ MenuHeader={
<Tooltip title={"Show recent Superlikes"} placement={"left"} arrow> <Tooltip title={"Show recent Superlikes"} placement={"left"} arrow>
<Box <Box
@ -66,7 +62,31 @@ export const ListSuperLikeContainer = () => {
</Tooltip> </Tooltip>
} }
> >
{superlikeListComponent} <Box
sx={{
display: "flex",
backgroundColor: "#1A1C1E",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Typography sx={headerSX}>Recent Superlikes</Typography>
<CrowdfundActionButton
variant="contained"
color="error"
sx={{
height: "25px",
width: "75px",
marginRight: "5px",
}}
onClick={() => {
if (popoverRef?.current) popoverRef.current.closePopover();
}}
>
CLOSE
</CrowdfundActionButton>
</Box>
<ListSuperLikes superlikes={superlikelist} />
</PopMenu> </PopMenu>
)} )}
</Box> </Box>