mirror of
https://github.com/snachodog/tok-to-insta-follower-bridge.git
synced 2025-04-25 12:52:23 -06:00
design: fix user card
This commit is contained in:
kawamataryo
parent
fc33329a20
commit
0d88286ffd
@ -2,7 +2,7 @@ import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/
|
||||
import React from "react";
|
||||
import { match } from "ts-pattern";
|
||||
import type { BskyUser } from "~types";
|
||||
import { ACTION_MODE } from "../constants";
|
||||
import { ACTION_MODE, MATCH_TYPE_LABEL_AND_COLOR } from "../constants";
|
||||
import DetectedUserSource from "./DetectedUserSource";
|
||||
import UserCard from "./UserCard";
|
||||
export type Props = {
|
||||
@ -100,18 +100,32 @@ const DetectedUserListItem = ({
|
||||
});
|
||||
};
|
||||
|
||||
const matchTypeColor = MATCH_TYPE_LABEL_AND_COLOR[user.matchType].color;
|
||||
|
||||
return (
|
||||
<div className="bg-base-100 w-full relative grid grid-cols-[22%_1fr] gap-5">
|
||||
<DetectedUserSource user={user} />
|
||||
<UserCard
|
||||
user={user}
|
||||
loading={loading}
|
||||
actionBtnLabelAndClass={actionBtnLabelAndClass}
|
||||
handleActionButtonClick={handleActionButtonClick}
|
||||
setIsBtnHovered={setIsBtnHovered}
|
||||
setIsJustClicked={setIsJustClicked}
|
||||
handleReSearchClick={handleReSearchClick}
|
||||
/>
|
||||
<div>
|
||||
<div className={`w-full border-l-8 border-${matchTypeColor}`}>
|
||||
<div
|
||||
className={`w-full border-t border-gray-500 text-${matchTypeColor} grid grid-cols-[22%_1fr]`}
|
||||
>
|
||||
<div className="px-3 bg-slate-100 dark:bg-slate-800">
|
||||
{MATCH_TYPE_LABEL_AND_COLOR[user.matchType].label}
|
||||
</div>
|
||||
<div className="px-3" />
|
||||
</div>
|
||||
<div className="bg-base-100 w-full relative grid grid-cols-[22%_1fr] gap-5">
|
||||
<DetectedUserSource user={user} />
|
||||
<UserCard
|
||||
user={user}
|
||||
loading={loading}
|
||||
actionBtnLabelAndClass={actionBtnLabelAndClass}
|
||||
handleActionButtonClick={handleActionButtonClick}
|
||||
setIsBtnHovered={setIsBtnHovered}
|
||||
setIsJustClicked={setIsJustClicked}
|
||||
handleReSearchClick={handleReSearchClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
|
||||
import React from "react";
|
||||
import type { BskyUser } from "~types";
|
||||
import { MATCH_TYPE_LABEL_AND_COLOR } from "../constants";
|
||||
import UserInfo from "./UserInfo";
|
||||
import UserProfile from "./UserProfile";
|
||||
|
||||
@ -11,11 +9,7 @@ type DetectedUserSourceProps = {
|
||||
|
||||
const DetectedUserSource = ({ user }: DetectedUserSourceProps) => (
|
||||
<div className="flex flex-row gap-2 bg-slate-100 dark:bg-slate-800 justify-between pr-2">
|
||||
<div
|
||||
className={`border-l-8 border-${
|
||||
MATCH_TYPE_LABEL_AND_COLOR[user.matchType].color
|
||||
} relative py-3 pl-4 pr-1 grid grid-cols-[50px_1fr]`}
|
||||
>
|
||||
<div className="relative py-3 pt-1 pl-4 pr-1 grid grid-cols-[50px_1fr]">
|
||||
<UserProfile
|
||||
avatar={user.originalAvatar}
|
||||
url={user.originalProfileLink}
|
||||
|
||||
@ -60,42 +60,39 @@ const Sidebar = ({
|
||||
<span className="text-2xl font-bold">Sky Follower Bridge</span>
|
||||
</a>
|
||||
<div className="divider" />
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-5 h-5"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<p className="text-xl font-bold">Detected</p>
|
||||
</div>
|
||||
<div className="flex items-end mb mb-2">
|
||||
<div className="flex gap-3 items-center justify-between">
|
||||
<p className="font-bold text-2xl">{detectedCount}</p>
|
||||
<p className="text-sm">users</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 flex-col">
|
||||
{Object.keys(matchTypeStats).map((key) => (
|
||||
<div
|
||||
className={`badge badge-outline badge-${MATCH_TYPE_LABEL_AND_COLOR[key].color}`}
|
||||
key={key}
|
||||
>
|
||||
{MATCH_TYPE_LABEL_AND_COLOR[key].label}:
|
||||
<span className="font-bold text-sm ml-1">
|
||||
{matchTypeStats[key]}
|
||||
</span>
|
||||
<div className="stats shadow">
|
||||
<div className="stat">
|
||||
<div className="stat-figure">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline-block h-8 w-8 stroke-current"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
))}
|
||||
<div className="stat-title text-lg text-base-content font-bold">
|
||||
Detected users
|
||||
</div>
|
||||
<div className="stat-value text-base-content">{detectedCount}</div>
|
||||
<div className="stat-desc">
|
||||
Same handle name: {matchTypeStats[BSKY_USER_MATCH_TYPE.HANDLE]}
|
||||
</div>
|
||||
<div className="stat-desc">
|
||||
Same display name:{" "}
|
||||
{matchTypeStats[BSKY_USER_MATCH_TYPE.DISPLAY_NAME]}
|
||||
</div>
|
||||
<div className="stat-desc">
|
||||
Included handle in description:{" "}
|
||||
{matchTypeStats[BSKY_USER_MATCH_TYPE.DESCRIPTION]}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divider" />
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
|
||||
@ -53,7 +53,7 @@ const UserCard = ({
|
||||
handleReSearchClick,
|
||||
}: UserCardProps) => {
|
||||
return (
|
||||
<div className="relative py-3 pl-0 pr-2 grid grid-cols-[50px_1fr]">
|
||||
<div className="relative py-3 pt-1 pl-0 pr-2 grid grid-cols-[50px_1fr]">
|
||||
<UserProfile
|
||||
avatar={user.avatar}
|
||||
url={`https://bsky.app/profile/${user.handle}`}
|
||||
|
||||
@ -78,7 +78,7 @@ export const MATCH_TYPE_LABEL_AND_COLOR = {
|
||||
color: "warning",
|
||||
},
|
||||
[BSKY_USER_MATCH_TYPE.DESCRIPTION]: {
|
||||
label: "Included handle name in description",
|
||||
label: "Included handle in description",
|
||||
color: "secondary",
|
||||
},
|
||||
[BSKY_USER_MATCH_TYPE.FOLLOWING]: {
|
||||
|
||||
@ -156,18 +156,16 @@ const Option = () => {
|
||||
<h2 className="text-lg font-bold text-center py-2">Source</h2>
|
||||
<h2 className="text-lg font-bold text-center py-2">Detected</h2>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="divide-y divide-gray-500">
|
||||
{filteredUsers.map((user) => (
|
||||
<DetectedUserListItem
|
||||
key={user.handle}
|
||||
user={user}
|
||||
clickAction={handleClickAction}
|
||||
actionMode={actionMode}
|
||||
reSearch={handleReSearch}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col border-b-[1px] border-gray-500">
|
||||
{filteredUsers.map((user) => (
|
||||
<DetectedUserListItem
|
||||
key={user.handle}
|
||||
user={user}
|
||||
clickAction={handleClickAction}
|
||||
actionMode={actionMode}
|
||||
reSearch={handleReSearch}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<ReSearchModal
|
||||
|
||||
@ -7,7 +7,7 @@ module.exports = {
|
||||
],
|
||||
safelist: [
|
||||
{
|
||||
pattern: /(badge|border)-(info|warning|secondary|neutral|success)/,
|
||||
pattern: /(badge|border|bg|text|border-b)-(info|warning|secondary|neutral|success)/,
|
||||
}
|
||||
],
|
||||
daisyui: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user