PackageDetails Required tab

apps/cyberstorm-remix/README.md

@@ -34,7 +34,7 @@ yarn workspace @thunderstore/cyberstorm-remix dev --port 3000 --host 0.0.0.0
 1. Open hosts file as administrator (`C:\Windows\System32\drivers\etc`) and add this `127.0.0.1 thunderstore.temp` there
 2. Download and install Docker and docker-compose. For windows people, Docker for Windows should be enough.
 3. Open up a terminal and navigate to `thunderstore-ui/tools/ts-proxy`
-4. Run `docker-compose up`
+4. Run `docker compose up`
 5. Add these to your `.env.development` or `.env.production`
 ```
 PUBLIC_SITE_URL=http://thunderstore.temp

apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.css

@@ -0,0 +1,68 @@
+@layer nimbus-layout {
+  .nimbus-commoncomponents-listingdependency {
+    display: flex;
+    gap: 24px;
+    align-items: flex-start;
+    width: 100%;
+    padding: 16px;
+    border-radius: 8px;
+    background: var(--surface-dim);
+  }
+
+  .nimbus-commoncomponents-listingdependency__image {
+    flex-shrink: 0;
+    width: 80px;
+
+    > svg {
+      width: 40px;
+      height: 40px;
+      color: var(--color-surface-a10);
+    }
+  }
+
+  .nimbus-commoncomponents-listingdependency__info {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  .nimbus-commoncomponents-listingdependency__info__name {
+    color: var(--color-text-primary);
+    font-weight: 700;
+    line-height: 150%;
+  }
+
+  .nimbus-commoncomponents-listingdependency__info__title {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    align-self: stretch;
+    font-weight: 400;
+    font-size: var(--font-size-body-md);
+    line-height: 150%;
+  }
+
+  .nimbus-commoncomponents-listingdependency__info__by {
+    color: var(--color-text-tertiary);
+  }
+
+  .nimbus-commoncomponents-listingdependency__description {
+    align-self: stretch;
+    color: var(--color-text-secondary);
+    font-weight: 400;
+
+    font-size: var(--font-size-body-md, 14px);
+    line-height: 150%;
+  }
+
+  .nimbus-commoncomponents-listingdependency__version {
+    display: flex;
+    gap: 4px;
+    align-items: flex-start;
+    color: var(--color-text-tertiary);
+    font-weight: 400;
+    font-size: var(--font-size-body-sm);
+    line-height: 170%;
+  }
+}

apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.tsx

@@ -0,0 +1,73 @@
+import "./ListingDependency.css";
+import { dependencyShema } from "@thunderstore/dapper-ts";
+import { Image, NewLink } from "@thunderstore/cyberstorm";
+
+export interface ListingDependencyProps {
+  dependency: typeof dependencyShema._type;
+}
+
+export function ListingDependency(props: ListingDependencyProps) {
+  const { dependency } = props;
+
+  return (
+    <div className="nimbus-commoncomponents-listingdependency">
+      <Image
+        src={dependency.icon_url}
+        cardType="package"
+        square={true}
+        intrinsicWidth={80}
+        intrinsicHeight={80}
+        rootClasses="nimbus-commoncomponents-listingdependency__image"
+      />
+      <div className="nimbus-commoncomponents-listingdependency__body">
+        <div className="nimbus-commoncomponents-listingdependency__info">
+          <NewLink
+            primitiveType="cyberstormLink"
+            linkId="Package"
+            community={dependency.community_identifier}
+            namespace={dependency.namespace}
+            package={dependency.name}
+            rootClasses="nimbus-commoncomponents-listingdependency__info__name"
+          >
+            {dependency.name}
+          </NewLink>
+          <span className="nimbus-commoncomponents-listingdependency__info__title">
+            <span className="nimbus-commoncomponents-listingdependency__info__by">
+              by
+            </span>
+            <NewLink
+              primitiveType="cyberstormLink"
+              linkId="Team"
+              team={dependency.namespace}
+              rootClasses="nimbus-commoncomponents-listingdependency__info__author"
+              csVariant="primary"
+            >
+              {dependency.namespace}
+            </NewLink>
+          </span>
+        </div>
+        <div className="nimbus-commoncomponents-listingdependency__description">
+          {dependency.description}
+        </div>
+        <div className="nimbus-commoncomponents-listingdependency__version">
+          <span>Version:</span>
+          <NewLink
+            // TODO: Remove this customization when /p is doned
+            primitiveType="cyberstormLink"
+            linkId="PackageVersion"
+            community={dependency.community_identifier}
+            namespace={dependency.namespace}
+            package={dependency.name}
+            version={dependency.version_number}
+            title={`${dependency.name} - ${dependency.version_number}`}
+            csVariant="cyber"
+          >
+            {dependency.version_number}
+          </NewLink>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ListingDependency.displayName = "ListingDependency";

apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.css

@@ -5,7 +5,7 @@
     gap: var(--space-32);
     align-items: flex-start;
     align-self: stretch;
-    padding: var(--space-24) 0;
+    padding: var(--space-24) 25rem var(--space-24) 0;
   }
 
   .nimbus-commoncomponents-page-header__image {