-
-
- {Slots.map((slot) => (
-
- ))}
+export const Equipment = ({ state, onEquip, onUnequip }: Props) => {
+ return (
+
+
item && onEquip(item)} />
+
+ {Slots.map((slot) => {
+ if (itemsPerSlot(slot, state.weaponConfig) > 0) {
+ return (
+
+ );
+ }
+ return null;
+ })}
+
-
-);
+ );
+};
type SlotProps = {
state: State;
diff --git a/src/components/ItemLink.module.css b/src/components/ItemLink.module.css
new file mode 100644
index 0000000..09167be
--- /dev/null
+++ b/src/components/ItemLink.module.css
@@ -0,0 +1,7 @@
+.itemLink {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+ font-size: 20px;
+}
diff --git a/src/components/ItemLink.tsx b/src/components/ItemLink.tsx
index c897503..5bfa550 100644
--- a/src/components/ItemLink.tsx
+++ b/src/components/ItemLink.tsx
@@ -1,4 +1,5 @@
import type { Item } from "../lib/types";
+import * as styles from "./ItemLink.module.css";
export type Props = {
item: Item;
@@ -9,7 +10,13 @@ export const ItemLink = ({ item }: Props) => (
href={`https://www.wowhead.com/item=${item.id}`}
target="_blank"
rel="noopener noreferrer"
+ className={styles.itemLink}
>
+ {item.icon && (
+

+ )}
{item.name}
);
diff --git a/src/components/ItemTypeahead.tsx b/src/components/ItemTypeahead.tsx
index 60499ec..a8e3612 100644
--- a/src/components/ItemTypeahead.tsx
+++ b/src/components/ItemTypeahead.tsx
@@ -5,8 +5,8 @@ import {
ComboboxOptions,
} from "@headlessui/react";
import { useState } from "react";
-import { AllItems } from "../lib/items";
import type { Item } from "../lib/types";
+import { AllItems } from "../lib/drops";
export type Props = {
value: Item | null;
diff --git a/src/components/QualitySelector.tsx b/src/components/QualitySelector.tsx
index 7796584..67911dc 100644
--- a/src/components/QualitySelector.tsx
+++ b/src/components/QualitySelector.tsx
@@ -16,9 +16,9 @@ export const QualitySelector = ({ item }: Props) => {
});
};
return (
-