ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: more tailwind components

Browse Source
This commit is contained in:
Tristan Yang
2023-01-30 18:56:37 +08:00
parent 5a2ac0f4ed
commit f5aabee719
46 changed files with 185 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Message/URLPreview.tsx
+19 -103
View File
@@ -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>
);
}