refactor: more tailwind components
This commit is contained in:
Tristan Yang
@@ -0,0 +1,25 @@
|
||||
// import { useEffect } from "react";
|
||||
import { ChatPrefixes } from "../../../app/config";
|
||||
import { useTranslation } from "react-i18next";
|
||||
type Props = {
|
||||
context: "user" | "channel",
|
||||
name: string
|
||||
};
|
||||
const DnDTip = ({ context, name }: Props) => {
|
||||
const { t } = useTranslation("chat");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex justify-center items-center absolute left-0 top-0 w-full h-full bg-black/50`}
|
||||
>
|
||||
<div className={`p-4 drop-shadow-md rounded-lg bg-primary-300`}>
|
||||
<div className="p-4 pt-16 border-2 border-dashed border-[#a5f3fc] rounded-md flex flex-col items-center text-white">
|
||||
<h4 className="text-xl font-semibold">{`${t("send_to")} ${ChatPrefixes[context]}${name}`}</h4>
|
||||
<span className="text-sm">Photos accept jpg, png, max size limit to 10M.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DnDTip;
|
||||
@@ -1,28 +1,7 @@
|
||||
// import { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import styled from "styled-components";
|
||||
import Button from "../../../common/component/styled/Button";
|
||||
const Styled = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #ef4444;
|
||||
border-radius: var(--br);
|
||||
width: 100%;
|
||||
width: -webkit-fill-available;
|
||||
padding: 12px 16px;
|
||||
.txt {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
.hand {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
// type Props = {};
|
||||
|
||||
const LicenseUpgradeTip = () => {
|
||||
@@ -33,13 +12,13 @@ const LicenseUpgradeTip = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Styled>
|
||||
<span className="txt">
|
||||
<i className="hand">🚨</i>
|
||||
<div className="flex items-center justify-between bg-red-600 rounded-md w-full py-3 px-4">
|
||||
<span className="text-white">
|
||||
<i className="text-xl mr-2">🚨</i>
|
||||
{t("license_tip")}
|
||||
</span>
|
||||
<Button onClick={handleRedirect} className="small">{`Upgrade License`}</Button>
|
||||
</Styled>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { FC, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useKey } from "rooks";
|
||||
import toast from "react-hot-toast";
|
||||
import useDeleteMessage from "../../../common/hook/useDeleteMessage";
|
||||
@@ -13,33 +12,6 @@ import ForwardModal from "../../../common/component/ForwardModal";
|
||||
import DeleteMessageConfirmModal from "../../../common/component/DeleteMessageConfirm";
|
||||
import { useAppDispatch, useAppSelector } from "../../../app/store";
|
||||
|
||||
const Styled = styled.div`
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.05);
|
||||
.opt {
|
||||
padding: 8px;
|
||||
background: #f2f4f7;
|
||||
border-radius: var(--br);
|
||||
&:disabled svg path {
|
||||
fill: #ccc;
|
||||
}
|
||||
&:hover {
|
||||
background: #eaecf0;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
`;
|
||||
type Props = {
|
||||
context: "user" | "channel";
|
||||
id: number;
|
||||
@@ -83,20 +55,21 @@ const Operations: FC<Props> = ({ context, id }) => {
|
||||
});
|
||||
const canDel = canDelete(mids);
|
||||
|
||||
// const
|
||||
return (
|
||||
<>
|
||||
<Styled>
|
||||
<button className="opt" onClick={toggleForwardModal}>
|
||||
<div className="relative p-4 flex items-center justify-center gap-8 shadow-md">
|
||||
<button className="p-2 bg-slate-100 rounded hover:bg-slate-300" onClick={toggleForwardModal}>
|
||||
<IconForward />
|
||||
</button>
|
||||
<button className="opt" onClick={handleFav}>
|
||||
<button className="p-2 bg-slate-100 rounded hover:bg-slate-300" onClick={handleFav}>
|
||||
<IconBookmark />
|
||||
</button>
|
||||
<button className="opt" disabled={!canDel} onClick={toggleDeleteModal.bind(null, false)}>
|
||||
<button className="p-2 bg-slate-100 rounded hover:bg-slate-300" disabled={!canDel} onClick={toggleDeleteModal.bind(null, false)}>
|
||||
<IconDelete />
|
||||
</button>
|
||||
<IconClose className="close" onClick={handleClose} />
|
||||
</Styled>
|
||||
<IconClose className="cursor-pointer absolute right-5 top-1/2 -translate-y-1/2" onClick={handleClose} />
|
||||
</div>
|
||||
{forwardModalVisible && <ForwardModal mids={mids} closeModal={toggleForwardModal} />}
|
||||
{deleteModalVisible && (
|
||||
<DeleteMessageConfirmModal mids={mids} closeModal={toggleDeleteModal} />
|
||||
|
||||
@@ -6,12 +6,13 @@ import Send from "../../../common/component/Send";
|
||||
import Styled from "./styled";
|
||||
import Operations from "./Operations";
|
||||
import useUploadFile from "../../../common/hook/useUploadFile";
|
||||
import { ChatPrefixes } from "../../../app/config";
|
||||
|
||||
import { useAppSelector } from "../../../app/store";
|
||||
import LoginTip from "./LoginTip";
|
||||
import useLicense from "../../../common/hook/useLicense";
|
||||
import LicenseUpgradeTip from "./LicenseOutdatedTip";
|
||||
import { useTranslation } from "react-i18next";
|
||||
// import { useTranslation } from "react-i18next";
|
||||
import DnDTip from "./DnDTip";
|
||||
|
||||
interface Props {
|
||||
readonly?: boolean;
|
||||
@@ -34,7 +35,7 @@ const Layout: FC<Props> = ({
|
||||
context = "channel",
|
||||
to
|
||||
}) => {
|
||||
const { t } = useTranslation('chat');
|
||||
// const { t } = useTranslation('chat');
|
||||
const { reachLimit } = useLicense();
|
||||
const { addStageFile } = useUploadFile({ context, id: to });
|
||||
const messagesContainer = useRef<HTMLDivElement>(null);
|
||||
@@ -125,17 +126,8 @@ const Layout: FC<Props> = ({
|
||||
{users && <div className="members">{users}</div>}
|
||||
{aside && <div className="aside">{aside}</div>}
|
||||
</main>
|
||||
{!readonly && (
|
||||
<div
|
||||
className={`drag_tip ${isActive ? "visible animate__animated animate__fadeIn" : ""}`}
|
||||
>
|
||||
<div className={`box ${isActive ? "animate__animated animate__bounceIn" : ""}`}>
|
||||
<div className="inner">
|
||||
<h4 className="head">{`${t("send_to")} ${ChatPrefixes[context]}${name}`}</h4>
|
||||
<span className="intro">Photos accept jpg, png, max size limit to 10M.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{!readonly && isActive && (
|
||||
<DnDTip context={context} name={name} />
|
||||
)}
|
||||
</Styled>
|
||||
</>
|
||||
|
||||
@@ -100,46 +100,6 @@ const Styled = styled.article`
|
||||
}
|
||||
}
|
||||
}
|
||||
.drag_tip {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: hidden;
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.box {
|
||||
padding: 16px;
|
||||
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
|
||||
border-radius: 8px;
|
||||
background: #52edff;
|
||||
.inner {
|
||||
padding: 16px;
|
||||
padding-top: 64px;
|
||||
border: 2px dashed #a5f3fc;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
.head {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.intro {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
`;
|
||||
export default Styled;
|
||||
|
||||
Reference in New Issue
Block a user