From 267658bb28b2f53180194c8658e5d30cae55608d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 30 Sep 2025 01:11:33 -0700
Subject: [PATCH] add extra weapon container components

---
 .../components/extra/ExtraContainer.svelte    | 36 +++++++++++
 .../extra/ExtraContainerItem.svelte           | 64 +++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 src/lib/components/extra/ExtraContainer.svelte
 create mode 100644 src/lib/components/extra/ExtraContainerItem.svelte

diff --git a/src/lib/components/extra/ExtraContainer.svelte b/src/lib/components/extra/ExtraContainer.svelte
new file mode 100644
index 00000000..059aed04
--- /dev/null
+++ b/src/lib/components/extra/ExtraContainer.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+  }
+
+  let { children }: Props = $props()
+</script>
+
+<section class="container">
+  {@render children()}
+</section>
+
+<style lang="scss">
+  @use '$src/themes/spacing' as *;
+  @use '$src/themes/layout' as *;
+
+  .container {
+    background: var(--extra-purple-bg);
+    border-radius: $card-corner;
+    display: flex;
+    margin: $unit-4x auto 0;
+    flex-direction: column;
+    max-width: calc($grid-width + $unit-2x);
+    width: 100%;
+
+    & > :global(*) {
+      border-bottom: 2px solid var(--background);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/extra/ExtraContainerItem.svelte b/src/lib/components/extra/ExtraContainerItem.svelte
new file mode 100644
index 00000000..1aaaf6b5
--- /dev/null
+++ b/src/lib/components/extra/ExtraContainerItem.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    title: string
+    children: Snippet
+  }
+
+  let { title, children }: Props = $props()
+</script>
+
+<div class="item">
+  <div class="content">
+    <header class="header">
+      <h3>{title}</h3>
+    </header>
+    {@render children()}
+  </div>
+</div>
+
+<style lang="scss">
+  @use '$src/themes/spacing' as *;
+  @use '$src/themes/typography' as *;
+  @use '$src/themes/mixins' as *;
+
+  .item {
+    position: relative;
+
+    .header {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: $unit;
+      justify-content: center;
+      min-height: $unit-4x;
+      width: 100%;
+
+      & > h3 {
+        color: var(--extra-purple-text);
+        font-size: $font-small;
+        font-weight: $medium;
+        line-height: 1.2;
+        font-weight: 500;
+        text-align: center;
+      }
+    }
+
+    .content {
+      display: grid;
+      grid-template-columns: 1.19fr 3fr;
+      gap: $unit-2x;
+      padding: $unit-2x $unit-2x $unit-2x;
+
+      @include breakpoint(phone) {
+        grid-template-columns: auto;
+        grid-template-rows: auto 1fr;
+      }
+
+      &:not(:first-child) {
+        border-top: 1px solid var(--extra-purple-card-bg);
+      }
+    }
+  }
+</style>
\ No newline at end of file