@krrli/cm-designsystem 1.21.0 → 1.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { type VariantProps } from "tailwind-variants";
|
|
2
|
+
declare const userRecommendationStyles: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
[key: string]: {
|
|
4
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
5
|
+
displayName?: import("tailwind-merge").ClassNameValue;
|
|
6
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
7
|
+
userInfo?: import("tailwind-merge").ClassNameValue;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
} | {
|
|
11
|
+
[x: string]: {
|
|
12
|
+
[x: string]: import("tailwind-merge").ClassNameValue | {
|
|
13
|
+
displayName?: import("tailwind-merge").ClassNameValue;
|
|
14
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
15
|
+
userInfo?: import("tailwind-merge").ClassNameValue;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
} | {}, {
|
|
19
|
+
base: string[];
|
|
20
|
+
userInfo: string[];
|
|
21
|
+
displayName: string[];
|
|
22
|
+
}, undefined, {
|
|
23
|
+
[key: string]: {
|
|
24
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
25
|
+
displayName?: import("tailwind-merge").ClassNameValue;
|
|
26
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
27
|
+
userInfo?: import("tailwind-merge").ClassNameValue;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
} | {}, {
|
|
31
|
+
base: string[];
|
|
32
|
+
userInfo: string[];
|
|
33
|
+
displayName: string[];
|
|
34
|
+
}, import("tailwind-variants").TVReturnType<unknown, {
|
|
35
|
+
base: string[];
|
|
36
|
+
userInfo: string[];
|
|
37
|
+
displayName: string[];
|
|
38
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
39
|
+
type UserRecommendationVariants = VariantProps<typeof userRecommendationStyles>;
|
|
40
|
+
interface UserRecommendationProps extends UserRecommendationVariants {
|
|
41
|
+
/** URL of the user's avatar image. */
|
|
42
|
+
src: string;
|
|
43
|
+
/** Display name of the user (e.g., "Jane Doe"). */
|
|
44
|
+
displayName: string;
|
|
45
|
+
/** Username/handle of the user (e.g., "@jane"). */
|
|
46
|
+
userName: string;
|
|
47
|
+
/** Label shown on the follow button (e.g., "Follow"). */
|
|
48
|
+
label: string;
|
|
49
|
+
/** Handler invoked when the "Follow" button is clicked. */
|
|
50
|
+
onFollowClick: () => void;
|
|
51
|
+
/** Handler invoked when user profile elements (avatar or username) are clicked. */
|
|
52
|
+
onProfileClick: () => void;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* UserRecommendation Component
|
|
56
|
+
*
|
|
57
|
+
* Displays a recommended user with:
|
|
58
|
+
* - A clickable avatar
|
|
59
|
+
* - Display name and username
|
|
60
|
+
* - A follow button
|
|
61
|
+
*/
|
|
62
|
+
export declare const UserRecommendation: React.FC<UserRecommendationProps>;
|
|
63
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { tv } from "tailwind-variants";
|
|
3
|
+
import { Avatar } from "../../components/avatar/Avatar";
|
|
4
|
+
import { Button } from "../../components/button/Button";
|
|
5
|
+
import { IconButton } from "../../components/icon-button/IconButton";
|
|
6
|
+
import { Mumble, Profile } from "../../components/icons/generated";
|
|
7
|
+
import { Label } from "../../components/typography/Label";
|
|
8
|
+
const userRecommendationStyles = tv({
|
|
9
|
+
slots: {
|
|
10
|
+
base: ["flex", "flex-col", "gap-4", "items-center", "p-4", "bg-white"],
|
|
11
|
+
userInfo: ["flex", "flex-col", "gap-2", "items-center"],
|
|
12
|
+
displayName: ["text-slate-900", "**:cursor-pointer"],
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
/**
|
|
16
|
+
* UserRecommendation Component
|
|
17
|
+
*
|
|
18
|
+
* Displays a recommended user with:
|
|
19
|
+
* - A clickable avatar
|
|
20
|
+
* - Display name and username
|
|
21
|
+
* - A follow button
|
|
22
|
+
*/
|
|
23
|
+
export const UserRecommendation = (props) => {
|
|
24
|
+
const { base, userInfo, displayName } = userRecommendationStyles(props);
|
|
25
|
+
return (_jsxs("div", { className: base(), children: [_jsx(Avatar, { alt: "Profile", size: "lg", src: props.src, onAvatarClick: props.onProfileClick }), _jsxs("div", { className: userInfo(), children: [_jsx("button", { onClick: props.onProfileClick, className: displayName(), children: _jsx(Label, { size: "lg", children: props.displayName }) }), _jsx(IconButton, { icon: Profile, intent: "secondary", onClick: props.onProfileClick, children: props.userName })] }), _jsx(Button, { icon: Mumble, intent: "secondary", onClick: props.onFollowClick, size: "md", children: props.label })] }));
|
|
26
|
+
};
|