Skip to content

Commit cf4bb06

Browse files
OksamiesOksamies
committed
Add ProfilePanel component
This will be used by the twitch panel extension refs -
1 parent e4630ae commit cf4bb06

File tree

4 files changed

+204
-0
lines changed

4 files changed

+204
-0
lines changed

‎apps/cyberstorm-storybook/stories/components/ProfilePanel.stories.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { StoryFn, Meta } from "@storybook/react";
2+
import { ProfilePanel } from "@thunderstore/cyberstorm";
3+
import React from "react";
4+
5+
export default {
6+
title: "Cyberstorm/Components/ProfilePanel",
7+
component: ProfilePanel,
8+
} as Meta;
9+
10+
const style: React.CSSProperties = {
11+
height: "500px",
12+
};
13+
const mods = [
14+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
15+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
16+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
17+
{
18+
name: "LongNamedBeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeMod",
19+
version: "1.0.0",
20+
url: "example.com",
21+
},
22+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
23+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
24+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
25+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
26+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
27+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
28+
{ name: "TestMod1", version: "1.0.0", url: "example.com" },
29+
];
30+
const profile = { name: "Test Profile", code: "test_code", mods: mods };
31+
32+
const Template: StoryFn<typeof ProfilePanel> = (args) => (
33+
<div style={style}>
34+
<ProfilePanel {...args} />
35+
</div>
36+
);
37+
38+
const ReferenceProfilePanel = Template.bind({});
39+
ReferenceProfilePanel.args = { profile: profile };
40+
41+
export { ReferenceProfilePanel };

‎packages/cyberstorm/src/components/ProfilePanel/ProfilePanel.module.css

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/* Common PackageCard styles */
2+
.root {
3+
display: flex;
4+
flex-direction: column;
5+
gap: var(--gap--12);
6+
align-items: center;
7+
width: 318px;
8+
height: 496px;
9+
padding: var(--space--20);
10+
border-radius: var(--border-radius--16);
11+
background: linear-gradient(to right bottom, #9d30e4 0%, #23ffb0 100%);
12+
}
13+
14+
.header {
15+
display: flex;
16+
flex-direction: column;
17+
gap: var(--gap--12);
18+
align-items: center;
19+
}
20+
21+
.logo {
22+
display: flex;
23+
flex-direction: row;
24+
gap: var(--gap--8);
25+
align-items: center;
26+
}
27+
28+
.title {
29+
color: var(--color-default);
30+
font: var(--font-body);
31+
font-weight: 700;
32+
line-height: var(--line-height--18);
33+
}
34+
35+
.profileTitle {
36+
color: var(--color-default);
37+
font: var(--font-body);
38+
font-weight: 700;
39+
line-height: var(--line-height--18);
40+
}
41+
42+
.content {
43+
display: flex;
44+
flex-direction: column;
45+
flex-grow: 1;
46+
gap: var(--gap--12);
47+
padding: var(--space--10) var(--space--20) var(--space--20);
48+
overflow-y: scroll;
49+
}
50+
51+
.modrow {
52+
display: flex;
53+
flex-direction: row;
54+
gap: var(--gap--4);
55+
align-items: center;
56+
justify-content: space-between;
57+
padding: var(--space--10);
58+
border-radius: var(--space--10);
59+
background-color: var(--color-default);
60+
}
61+
62+
.modInfo {
63+
display: flex;
64+
flex-basis: 85%;
65+
flex-flow: column;
66+
align-items: flex-start;
67+
text-overflow: ellipsis;
68+
overflow-wrap: anywhere;
69+
}
70+
71+
.modName {
72+
color: var(--color-highlight);
73+
font: var(--font-body);
74+
font-weight: 700;
75+
line-height: var(--line-height--18);
76+
}
77+
78+
.modVersion {
79+
color: var(--color-text--default);
80+
font: var(--font-body);
81+
font-weight: 400;
82+
font-size: var(--font-size--14);
83+
line-height: var(--line-height--18);
84+
}
85+
86+
.modLink {
87+
color: var(--color-highlight);
88+
}
89+
90+
.content::-webkit-scrollbar {
91+
width: 12px;
92+
border-radius: 10px;
93+
background-color: #0000;
94+
}
95+
96+
.content::-webkit-scrollbar-track {
97+
border-radius: 10px;
98+
}
99+
100+
.content::-webkit-scrollbar-thumb {
101+
border-radius: 10px;
102+
background-image: var(--color-gradient-purple-green--darker);
103+
}

‎packages/cyberstorm/src/components/ProfilePanel/ProfilePanel.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from "react";
2+
import styles from "./ProfilePanel.module.css";
3+
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
4+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
5+
import { ThunderstoreLogo } from "../ThunderstoreLogo/ThunderstoreLogo";
6+
import { Title } from "../Title/Title";
7+
8+
export interface ProfileModsProps {
9+
name: string;
10+
version: string;
11+
url: string;
12+
}
13+
14+
export interface ProfileProps {
15+
code: string;
16+
name: string;
17+
mods: ProfileModsProps[];
18+
}
19+
20+
export interface ProfilePanelProps {
21+
profile: ProfileProps;
22+
}
23+
24+
/**
25+
* Cyberstorm ProfilePanel component
26+
*/
27+
export const ProfilePanel: React.FC<ProfilePanelProps> = (props) => {
28+
const { profile } = props;
29+
30+
return (
31+
<div className={styles.root}>
32+
<div className={styles.header}>
33+
<div className={styles.logo}>
34+
<ThunderstoreLogo />
35+
<Title size="smaller" text="Thunderstore" />
36+
</div>
37+
<div className={styles.profileTitle}>Profile: {profile.name}</div>
38+
<div className={styles.profileTitle}>Code: {profile.code}</div>
39+
</div>
40+
<div className={styles.content}>
41+
{profile.mods.map(function (mod, i) {
42+
return (
43+
<div key={String(i)} className={styles.modrow}>
44+
<div className={styles.modInfo}>
45+
<div className={styles.modName}>{mod.name}</div>
46+
<div className={styles.modVersion}>{mod.version}</div>
47+
</div>
48+
<a className={styles.modLink} href={mod.url}>
49+
<FontAwesomeIcon fixedWidth icon={faArrowUpRightFromSquare} />
50+
</a>
51+
</div>
52+
);
53+
})}
54+
</div>
55+
</div>
56+
);
57+
};
58+
59+
ProfilePanel.displayName = "ProfilePanel";

‎packages/cyberstorm/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export * from "./components/Links/Links";
1010
export * from "./components/MenuItem/MenuItem";
1111
export * from "./components/MetaItem/MetaItem";
1212
export * from "./components/PackageCard/PackageCard";
13+
export * from "./components/ProfilePanel/ProfilePanel";
1314
export * from "./components/PackageFlag/PackageFlag";
1415
export * from "./components/PackageIcon/PackageIcon";
1516
export * from "./components/Pagination/Pagination";

0 commit comments

Comments
 (0)