inetraction stuff

src/app/components/food-pantry/food-pantry.component.html

@@ -1 +1,12 @@
-<p>food-pantry works!</p>
+<div class="h-full w-full absolute bg-red-300">
+  <div class="py-4 container mx-auto">
+    <div class="flex flex-row justify-between">
+      <p>food-pantry works!</p>
+      <ff-button (click)="onClose.emit(true)">X</ff-button>
+    </div>
+    <ff-grid
+      [gridItems]="foods()"
+      (onSelect)="onFoodChosen.emit($event)"
+    ></ff-grid>
+  </div>
+</div>

src/app/components/food-pantry/food-pantry.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, inject, output, OutputEmitterRef, Signal } from '@angular/core';
+import { ButtonComponent } from "../ui-elements/button/button.component";
+import { Food } from '../../types/food';
+import { FoodStore } from '../../api/food.store';
+import { GridComponent } from "../grid/grid.component";
 
 @Component({
   selector: 'ff-food-pantry',
-  imports: [],
+  imports: [ButtonComponent, GridComponent],
   templateUrl: './food-pantry.component.html',
 })
 export class FoodPantryComponent {
+  public readonly onClose: OutputEmitterRef<true> = output<true>();
+  public readonly onFoodChosen: OutputEmitterRef<Food> = output<Food>();
 
+  private readonly foodStore: FoodStore = inject(FoodStore);
+
+  protected readonly foods: Signal<Food[]> = this.foodStore.foods;
 }

src/app/components/grid/grid.component.html

@@ -0,0 +1,12 @@
+<div class="w-full flex flex-row flex-wrap gap-3">
+  @for (item of gridItems(); track $index) {
+    <div
+      (click)="onSelect.emit(item)"
+      class="rounded-lg bg-primary-400 cursor-pointer"
+      [ngStyle]="{
+        width: size() + 'rem',
+        height: size() + 'rem',
+      }"
+    ></div>
+  }
+</div>

src/app/components/grid/grid.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GridComponent } from './grid.component';
+
+describe('GridComponent', () => {
+  let component: GridComponent<any>;
+  let fixture: ComponentFixture<GridComponent<any>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GridComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(GridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/grid/grid.component.ts

@@ -0,0 +1,14 @@
+import { NgStyle } from '@angular/common';
+import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
+
+@Component({
+  selector: 'ff-grid',
+  imports: [NgStyle],
+  templateUrl: './grid.component.html',
+})
+export class GridComponent<T> {
+  public readonly gridItems: InputSignal<T[]> = input.required();
+  public readonly size: InputSignal<number> = input<number>(5);
+
+  public readonly onSelect: OutputEmitterRef<T> = output<T>();
+}

src/app/components/inventory/inventory.component.html

@@ -1 +1,8 @@
-<p>inventory works!</p>
+<div class="h-full w-full absolute bg-blue-300">
+  <div class="py-4 container mx-auto">
+    <div class="flex flex-row justify-between">
+      <p>inventory works!</p>
+      <ff-button (click)="onClose.emit()">X</ff-button>
+    </div>
+  </div>
+</div>

src/app/components/inventory/inventory.component.ts

@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, output, OutputEmitterRef } from '@angular/core';
+import { ButtonComponent } from "../ui-elements/button/button.component";
 
 @Component({
   selector: 'ff-inventory',
-  imports: [],
+  imports: [ButtonComponent],
   templateUrl: './inventory.component.html',
 })
 export class InventoryComponent {
+  public readonly onClose: OutputEmitterRef<void> = output<void>();
+  public readonly onItemChosen: OutputEmitterRef<any> = output<any>();
 
 }

src/app/components/ui-elements/button/button.component.html

@@ -1,6 +1,6 @@
 <button
   type="button"
-  class="rounded-lg bg-primary-500 hover:bg-primary-700 cursor-pointer text-white px-4 py-2"
+  class="rounded-lg bg-primary-500 hover:bg-primary-700 cursor-pointer text-white px-4 py-2 flex flex-row items-center justify-center"
 >
   <ng-content></ng-content>
 </button>