Add ProfilePanel component

This will be used by the twitch panel extension

refs -

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

@@ -0,0 +1,41 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { ProfilePanel } from "@thunderstore/cyberstorm";
+import React from "react";
+
+export default {
+  title: "Cyberstorm/Components/ProfilePanel",
+  component: ProfilePanel,
+} as Meta;
+
+const style: React.CSSProperties = {
+  height: "500px",
+};
+const mods = [
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+  {
+    name: "LongNamedBeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeMod",
+    version: "1.0.0",
+    url: "example.com",
+  },
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+  { name: "TestMod1", version: "1.0.0", url: "example.com" },
+];
+const profile = { name: "Test Profile", code: "test_code", mods: mods };
+
+const Template: StoryFn<typeof ProfilePanel> = (args) => (
+  <div style={style}>
+    <ProfilePanel {...args} />
+  </div>
+);
+
+const ReferenceProfilePanel = Template.bind({});
+ReferenceProfilePanel.args = { profile: profile };
+
+export { ReferenceProfilePanel };

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

@@ -0,0 +1,103 @@
+/* Common PackageCard styles */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap--12);
+  align-items: center;
+  width: 318px;
+  height: 496px;
+  padding: var(--space--20);
+  border-radius: var(--border-radius--16);
+  background: linear-gradient(to right bottom, #9d30e4 0%, #23ffb0 100%);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap--12);
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap--8);
+  align-items: center;
+}
+
+.title {
+  color: var(--color-default);
+  font: var(--font-body);
+  font-weight: 700;
+  line-height: var(--line-height--18);
+}
+
+.profileTitle {
+  color: var(--color-default);
+  font: var(--font-body);
+  font-weight: 700;
+  line-height: var(--line-height--18);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--gap--12);
+  padding: var(--space--10) var(--space--20) var(--space--20);
+  overflow-y: scroll;
+}
+
+.modrow {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap--4);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space--10);
+  border-radius: var(--space--10);
+  background-color: var(--color-default);
+}
+
+.modInfo {
+  display: flex;
+  flex-basis: 85%;
+  flex-flow: column;
+  align-items: flex-start;
+  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+}
+
+.modName {
+  color: var(--color-highlight);
+  font: var(--font-body);
+  font-weight: 700;
+  line-height: var(--line-height--18);
+}
+
+.modVersion {
+  color: var(--color-text--default);
+  font: var(--font-body);
+  font-weight: 400;
+  font-size: var(--font-size--14);
+  line-height: var(--line-height--18);
+}
+
+.modLink {
+  color: var(--color-highlight);
+}
+
+.content::-webkit-scrollbar {
+  width: 12px;
+  border-radius: 10px;
+  background-color: #0000;
+}
+
+.content::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+.content::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-image: var(--color-gradient-purple-green--darker);
+}

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

@@ -0,0 +1,59 @@
+import React from "react";
+import styles from "./ProfilePanel.module.css";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ThunderstoreLogo } from "../ThunderstoreLogo/ThunderstoreLogo";
+import { Title } from "../Title/Title";
+
+export interface ProfileModsProps {
+  name: string;
+  version: string;
+  url: string;
+}
+
+export interface ProfileProps {
+  code: string;
+  name: string;
+  mods: ProfileModsProps[];
+}
+
+export interface ProfilePanelProps {
+  profile: ProfileProps;
+}
+
+/**
+ * Cyberstorm ProfilePanel component
+ */
+export const ProfilePanel: React.FC<ProfilePanelProps> = (props) => {
+  const { profile } = props;
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <div className={styles.logo}>
+          <ThunderstoreLogo />
+          <Title size="smaller" text="Thunderstore" />
+        </div>
+        <div className={styles.profileTitle}>Profile: {profile.name}</div>
+        <div className={styles.profileTitle}>Code: {profile.code}</div>
+      </div>
+      <div className={styles.content}>
+        {profile.mods.map(function (mod, i) {
+          return (
+            <div key={String(i)} className={styles.modrow}>
+              <div className={styles.modInfo}>
+                <div className={styles.modName}>{mod.name}</div>
+                <div className={styles.modVersion}>{mod.version}</div>
+              </div>
+              <a className={styles.modLink} href={mod.url}>
+                <FontAwesomeIcon fixedWidth icon={faArrowUpRightFromSquare} />
+              </a>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+ProfilePanel.displayName = "ProfilePanel";

packages/cyberstorm/src/index.ts

@@ -10,6 +10,7 @@ export * from "./components/Links/Links";
 export * from "./components/MenuItem/MenuItem";
 export * from "./components/MetaItem/MetaItem";
 export * from "./components/PackageCard/PackageCard";
+export * from "./components/ProfilePanel/ProfilePanel";
 export * from "./components/PackageFlag/PackageFlag";
 export * from "./components/PackageIcon/PackageIcon";
 export * from "./components/Pagination/Pagination";