refactor: more tailwind components
This commit is contained in:
Tristan Yang
@@ -1,16 +1,9 @@
|
||||
import { FC, ReactElement, useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import StyledMsg from "./styled";
|
||||
import renderContent from "./renderContent";
|
||||
import Avatar from "../Avatar";
|
||||
import useFavMessage from "../../hook/useFavMessage";
|
||||
|
||||
const StyledFav = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--br);
|
||||
background-color: #f4f4f5;
|
||||
`;
|
||||
type Props = {
|
||||
id?: string;
|
||||
};
|
||||
@@ -25,7 +18,7 @@ const FavoredMessage: FC<Props> = ({ id = "" }) => {
|
||||
const favorite_mids = messages.map(({ from_mid }) => +from_mid) || [];
|
||||
|
||||
setMsgs(
|
||||
<StyledFav data-favorite-mids={favorite_mids.join(",")} className="favorite">
|
||||
<div data-favorite-mids={favorite_mids.join(",")} className="favorite flex flex-col rounded-md bg-slate-200">
|
||||
<div className="list">
|
||||
{messages.map((msg, idx) => {
|
||||
const { user = {}, download, content, content_type, properties, thumbnail } = msg;
|
||||
@@ -54,7 +47,7 @@ const FavoredMessage: FC<Props> = ({ id = "" }) => {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</StyledFav>
|
||||
</div>
|
||||
);
|
||||
}, [favorites, id]);
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ import LinkifyText from '../LinkifyText';
|
||||
|
||||
import Avatar from "../Avatar";
|
||||
import { useAppSelector } from "../../../app/store";
|
||||
import { MessagePayload } from "../../../app/slices/message";
|
||||
const Styled = styled.div`
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -96,7 +97,7 @@ const Styled = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const renderContent = (data) => {
|
||||
const renderContent = (data: MessagePayload) => {
|
||||
const { content_type, content, thumbnail, properties } = data;
|
||||
let res = null;
|
||||
switch (content_type) {
|
||||
@@ -116,7 +117,7 @@ const renderContent = (data) => {
|
||||
break;
|
||||
case ContentTypes.file:
|
||||
{
|
||||
const { content_type, name, size } = properties;
|
||||
const { content_type = "", name, size } = properties || {};
|
||||
const icon = getFileIcon(content_type, name);
|
||||
if (isImage(content_type, size)) {
|
||||
res = <img className="pic" src={thumbnail} />;
|
||||
|
||||
@@ -1,95 +1,6 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useLazyGetOGInfoQuery } from "../../../app/services/message";
|
||||
|
||||
const StyledCompact = styled.a`
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d4d4d4;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
padding: 12px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 380px;
|
||||
.favicon {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
.desc {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #616161;
|
||||
}
|
||||
.link {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 18px;
|
||||
color: #616161;
|
||||
}
|
||||
.dots {
|
||||
width: 288px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
`;
|
||||
const StyledDetails = styled.a`
|
||||
width: 380px;
|
||||
padding: 12px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d4d4d4;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #06aed4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.desc {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #616161;
|
||||
margin-bottom: 8px;
|
||||
width: 356px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function URLPreview({ url = "" }) {
|
||||
const [favicon, setFavicon] = useState("");
|
||||
@@ -122,26 +33,31 @@ export default function URLPreview({ url = "" }) {
|
||||
};
|
||||
if (!url || !data || !data.title) return null;
|
||||
const { title, description, ogImage } = data;
|
||||
|
||||
const containerClass = `flex items-center border border-solid border-gray-300 box-border rounded-md w-[380px]`;
|
||||
const dotsClass = `overflow-hidden whitespace-nowrap text-ellipsis`;
|
||||
return ogImage ? (
|
||||
<StyledDetails href={url} target="_blank">
|
||||
<h3 className="title">{title}</h3>
|
||||
<p className="desc dots">{description}</p>
|
||||
<div className="image">
|
||||
<img src={ogImage} alt="og image" />
|
||||
<a className={`${containerClass} flex-col !items-start p-3`} href={url} target="_blank" rel="noreferrer">
|
||||
<h3 className={`text-base text-primary-500 w-full ${dotsClass}`}>{title}</h3>
|
||||
<p className={`text-xs text-gray-400 mb-2 w-full ${dotsClass}`}>{description}</p>
|
||||
<div className="w-full h-[180px]">
|
||||
<img className="w-full h-full object-cover" src={ogImage} alt="og image" />
|
||||
</div>
|
||||
</StyledDetails>
|
||||
</a>
|
||||
) : (
|
||||
<StyledCompact href={url} target="_blank">
|
||||
<a
|
||||
className={`${containerClass} gap-2 px-2 py-3`}
|
||||
href={url} target="_blank" rel="noreferrer">
|
||||
{favicon && (
|
||||
<div className="favicon">
|
||||
<img onError={handleFavError} src={favicon} alt="favicon" />
|
||||
<div className="flex w-12 h-12 rounded">
|
||||
<img onError={handleFavError} className="object-contain" src={favicon} alt="favicon" />
|
||||
</div>
|
||||
)}
|
||||
<div className="info">
|
||||
<h3 className="title">{title}</h3>
|
||||
<p className="desc dots">{description}</p>
|
||||
<span className="link dots">{url}</span>
|
||||
<div className="flex flex-col">
|
||||
<h3 className="text-sm text-gray-900">{title}</h3>
|
||||
<p className={`text-xs text-gray-500 w-[288px] ${dotsClass}`}>{description}</p>
|
||||
<span className={`text-[10px] text-gray-500 w-[288px] ${dotsClass}`}>{url}</span>
|
||||
</div>
|
||||
</StyledCompact>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user