1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2025-01-24 18:19:04 -05:00
revite/src/components/common/ServerHeader.tsx

149 lines
4.9 KiB
TypeScript
Raw Normal View History

import { Check } from "@styled-icons/boxicons-regular";
2021-06-27 12:17:59 +02:00
import { Cog } from "@styled-icons/boxicons-solid";
2021-07-29 19:01:40 +01:00
import { observer } from "mobx-react-lite";
2021-07-05 11:23:23 +01:00
import { Link } from "react-router-dom";
import { ServerPermission } from "revolt.js/dist/api/permissions";
2021-07-30 22:40:49 +01:00
import { Server } from "revolt.js/dist/maps/Servers";
2021-12-27 15:38:49 +01:00
import styled, { css } from "styled-components";
2021-07-05 11:23:23 +01:00
import { Text } from "preact-i18n";
2021-12-27 15:48:31 +01:00
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
2021-07-05 11:23:23 +01:00
import Header from "../ui/Header";
import IconButton from "../ui/IconButton";
import Tooltip from "./Tooltip";
interface Props {
2021-07-05 11:25:20 +01:00
server: Server;
2021-12-27 15:38:49 +01:00
background?: boolean;
}
const ServerBanner = styled.div<Props>`
background-color: var(--secondary-header);
2021-12-27 15:10:02 +01:00
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: end;
2021-12-28 20:38:57 +01:00
/*background-position: center;
2021-12-27 15:47:06 +01:00
background-repeat: no-repeat;
2021-12-28 20:38:57 +01:00
background-size: cover;*/
background-size: cover !important;
background-position: center center !important;
2021-12-27 15:10:02 +01:00
2021-12-27 15:38:49 +01:00
${(props) =>
props.background &&
css`
height: 120px;
.container {
background: linear-gradient(
0deg,
var(--secondary-background),
transparent
);
}
`}
2021-12-27 15:15:37 +01:00
.container {
2021-12-27 15:10:02 +01:00
height: 48px;
display: flex;
align-items: center;
padding: 10px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
gap: 8px;
2021-12-27 15:48:31 +01:00
${() =>
isTouchscreenDevice &&
css`
height: 56px;
`}
2021-12-27 15:15:37 +01:00
.title {
2021-12-27 15:10:02 +01:00
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2021-12-27 15:13:36 +01:00
flex-grow: 1;
2021-12-27 15:10:02 +01:00
}
}
`;
2021-07-29 19:01:40 +01:00
export default observer(({ server }: Props) => {
2021-07-30 22:40:49 +01:00
const bannerURL = server.generateBannerURL({ width: 480 });
2021-07-05 11:25:20 +01:00
return (
2021-12-27 15:38:49 +01:00
<ServerBanner
background={typeof bannerURL !== "undefined"}
style={{
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
background: bannerURL ? `url('${bannerURL}')` : undefined,
}}>
<div className="container">
{server.flags && server.flags & 1 ? (
<Tooltip
content={
<Text id="app.special.server-badges.official" />
}
placement={"bottom-start"}>
<svg width="20" height="20">
<image
xlinkHref="/assets/badges/verified.svg"
height="20"
width="20"
/>
<image
xlinkHref="/assets/badges/revolt_r.svg"
height="15"
width="15"
x="2"
y="3"
style={
"justify-content: center; align-items: center; filter: brightness(0);"
}
/>
</svg>
</Tooltip>
) : undefined}
{server.flags && server.flags & 2 ? (
<Tooltip
content={
<Text id="app.special.server-badges.verified" />
}
placement={"bottom-start"}>
<svg width="20" height="20">
<image
xlinkHref="/assets/badges/verified.svg"
height="20"
width="20"
/>
<foreignObject x="2" y="2" width="15" height="15">
<Check
size={15}
color="black"
strokeWidth={8}
2021-12-27 15:38:49 +01:00
/>
</foreignObject>
</svg>
</Tooltip>
) : undefined}
2021-12-27 15:38:49 +01:00
<div className="title">{server.name}</div>
{(server.permission & ServerPermission.ManageServer) > 0 && (
<div className="actions">
<Link to={`/server/${server._id}/settings`}>
<IconButton>
<Cog size={20} />
</IconButton>
</Link>
</div>
)}
</div>
</ServerBanner>
2021-07-05 11:25:20 +01:00
);
2021-07-29 19:01:40 +01:00
});