Add TwitchPanelLayout and setup in NextJS

refs TS-1656 TS-1658

Author: Oksamies

apps/cyberstorm-nextjs/pages/twitchpanel.tsx

@@ -0,0 +1,9 @@
+import { ProfilePanelLayout } from "@thunderstore/cyberstorm";
+
+export default function Communities() {
+  return (
+    <div>
+      <ProfilePanelLayout />
+    </div>
+  );
+}

apps/cyberstorm-nextjs/public/images/logo.png

@@ -0,0 +1,24 @@
+import { ProfilePanel } from "../../ProfilePanel/ProfilePanel";
+
+/**
+ * Cyberstorm TwitchPanelLayout Layout
+ */
+export function TwitchProfilePanelLayout() {
+  const profile = getProfileData();
+  return <ProfilePanel profile={profile} />;
+}
+
+TwitchProfilePanelLayout.displayName = "ProfilePanelLayout";
+TwitchProfilePanelLayout.defaultProps = {};
+
+function getProfileData() {
+  return {
+    code: "TEST_CODE",
+    name: "TEST_NAME",
+    mods: [
+      { name: "TEST_MOD_NAME_1", version: "0.0.1", url: "example.com" },
+      { name: "TEST_MOD_NAME_2", version: "0.0.2", url: "example.com" },
+      { name: "TEST_MOD_NAME_3", version: "0.0.3", url: "example.com" },
+    ],
+  };
+}

packages/cyberstorm/src/components/Layout/TwitchProfilePanelLayout/TwitchProfilePanelLayout.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styles from "./ProfilePanel.module.css";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -24,7 +23,7 @@ export interface ProfilePanelProps {
 /**
  * Cyberstorm ProfilePanel component
  */
-export const ProfilePanel: React.FC<ProfilePanelProps> = (props) => {
+export function ProfilePanel(props: ProfilePanelProps) {
   const { profile } = props;
 
   return (
@@ -54,6 +53,6 @@ export const ProfilePanel: React.FC<ProfilePanelProps> = (props) => {
       </div>
     </div>
   );
-};
+}
 
 ProfilePanel.displayName = "ProfilePanel";

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

@@ -29,6 +29,7 @@ export * from "./components/Layout/PackageDetailLayout/PackageDetailLayout";
 export * from "./components/Layout/PackageListLayout/PackageListLayout";
 export * from "./components/Layout/Settings/SettingsLayout";
 export * from "./components/Layout/Teams/TeamsLayout";
+export * from "./components/Layout/TwitchProfilePanelLayout/TwitchProfilePanelLayout";
 
 export * from "./components/Layout/Developers/ManifestValidator/ManifestValidatorLayout";
 export * from "./components/Layout/Developers/MarkdownPreview/MarkdownPreviewLayout";