8 build list skeleton

src/components/List/ItemListMapper.tsx

@@ -0,0 +1,42 @@
+import { List } from "@/pages/list";
+import { sortByAlphabet, sortByCategory } from "./SortBySwitches";
+
+type ItemListMapperProps = {
+  itemList: List;
+  sortBy: string;
+};
+
+export function ItemListMapper(props: ItemListMapperProps) {
+  let sectionName = "";
+  let sorted: List = [];
+
+  switch (props.sortBy) {
+    case "date":
+      sorted = props.itemList;
+      break;
+    case "category":
+      sorted = sortByCategory(props.itemList);
+      break;
+    case "alphabetical":
+      sorted = sortByAlphabet(props.itemList);
+      break;
+  }
+  return (
+    <>
+      {sorted.map((product) => {
+        let nameSection = false;
+
+        if (props.sortBy === "category" && product.category !== sectionName) {
+          sectionName = product.category;
+          nameSection = true;
+        }
+        return (
+          <div className=" py-1">
+            {nameSection && <p>{sectionName + ":"}</p>}
+            <p className="px-4 rounded-2xl">{product.item}</p>
+          </div>
+        );
+      })}
+    </>
+  );
+}

src/components/List/SortBySwitches.tsx

@@ -0,0 +1,103 @@
+import { List } from "@/pages/list";
+import { RadioGroup } from "@headlessui/react";
+import { Dispatch, SetStateAction } from "react";
+import { clsx } from "clsx";
+
+export function sortByAlphabet(input: List) {
+  const sorted = [...input];
+  sorted.sort((a, b) => {
+    const nameA = a.item.toUpperCase();
+    const nameB = b.item.toUpperCase();
+    if (nameA < nameB) {
+      return -1;
+    }
+    if (nameA > nameB) {
+      return 1;
+    }
+    return 0;
+  });
+  return sorted;
+}
+export function sortByCategory(input: List): List {
+  const sorted = [...input];
+  sorted.sort((a, b) => {
+    const categoryA = a.category.toUpperCase();
+    const categoryB = b.category.toUpperCase();
+
+    const nameA = a.item.toUpperCase();
+    const nameB = b.item.toUpperCase();
+
+    if (categoryA < categoryB) {
+      return -1;
+    }
+    if (categoryA > categoryB) {
+      return 1;
+    }
+
+    if (categoryA === categoryB) {
+      if (nameA < nameB) {
+        return -1;
+      }
+      if (nameA > nameB) {
+        return 1;
+      }
+      return 0;
+    }
+    return 0;
+  });
+  return sorted;
+}
+
+export function sortByDate() {}
+
+type SortByProps = {
+  sortBy: string;
+  setSort: Dispatch<SetStateAction<string>>;
+};
+
+export function SortBySwitches(props: SortByProps) {
+  return (
+    <RadioGroup
+      className="font-sans flex flex-row justify-center items-center bg-secondary-transparent text-sm h-7 rounded-listitem"
+      value={props.sortBy}
+      onChange={props.setSort}
+    >
+      <RadioGroup.Option className="h-full w-1/3" value="date">
+        {({ checked }) => (
+          <p
+            className={clsx(
+              "h-full w-full flex justify-center items-center rounded-listitem",
+              checked && "bg-primary-default-background text-text-white"
+            )}
+          >
+            Date
+          </p>
+        )}
+      </RadioGroup.Option>
+      <RadioGroup.Option className="h-full w-1/3" value="category">
+        {({ checked }) => (
+          <p
+            className={clsx(
+              "h-full w-full  flex justify-center items-center rounded-listitem",
+              checked && "bg-primary-default-background text-text-white"
+            )}
+          >
+            Category
+          </p>
+        )}
+      </RadioGroup.Option>
+      <RadioGroup.Option className="h-full w-1/3" value="alphabetical">
+        {({ checked }) => (
+          <p
+            className={clsx(
+              "h-full w-full flex justify-center items-center rounded-listitem",
+              checked && "bg-primary-default-background text-text-white"
+            )}
+          >
+            Alphabetical
+          </p>
+        )}
+      </RadioGroup.Option>
+    </RadioGroup>
+  );
+}

src/pages/list/index.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { ItemListMapper } from "@/components/List/ItemListMapper";
+import { SortBySwitches } from "@/components/List/SortBySwitches";
+
+export type List = Array<{
+  item: string;
+  quantity: number;
+  category: string;
+}>;
+export type Categories = Array<{ id: number; name: string; quantity: number }>;
+
+const listItems: List = [
+  { item: "tomatoes", quantity: 1, category: "vegetables" },
+  { item: "pepper", quantity: 1, category: "spices" },
+  { item: "onion", quantity: 1, category: "vegetables" },
+  { item: "apple", quantity: 1, category: "fruit" },
+  { item: "kiwi", quantity: 1, category: "fruit" },
+  { item: "pork", quantity: 1, category: "meat" },
+  { item: "toothpaste", quantity: 1, category: "hygiene" },
+  { item: "kurkuma", quantity: 1, category: "spices" },
+  { item: "pumpkin", quantity: 1, category: "vegetables" },
+  { item: "deodorant", quantity: 1, category: "hygiene" },
+  { item: "shampoo", quantity: 1, category: "hygiene" },
+  { item: "crocodile", quantity: 1, category: "meat" },
+  { item: "cinnamon", quantity: 1, category: "spices" },
+  { item: "cabbage", quantity: 1, category: "vegetables" },
+];
+
+export default function List() {
+  const [sortBy, setSortBy] = useState("date");
+
+  return (
+    <div className="m-6">
+      <SortBySwitches sortBy={sortBy} setSort={setSortBy}></SortBySwitches>
+      <ItemListMapper itemList={listItems} sortBy={sortBy}></ItemListMapper>
+    </div>
+  );
+}

src/stories/ItemListMapper.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ItemListMapper } from "../components/List/ItemListMapper";
+
+const meta: Meta<typeof ItemListMapper> = {
+  title: "components/ItemListMapper",
+  component: ItemListMapper,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ItemListMapper>;
+
+export const Default: Story = {};

src/stories/SortBySwitches.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { SortBySwitches } from "../components/List/SortBySwitches";
+
+const meta: Meta<typeof SortBySwitches> = {
+  title: "components/SortBySwitches",
+  component: SortBySwitches,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SortBySwitches>;
+
+export const Default: Story = {};

tailwind.config.js

@@ -34,6 +34,9 @@ module.exports = {
     },
     extend: {
       transitionDuration: { 400: "400ms" },
+      borderRadius: {
+        listitem: ".5rem",
+      },
     },
   },
   plugins: [],