fix: add folder, seperate to components

src/pages/BaanSelection/components/ListBaan.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+import { convertSize, isAdded } from '../hooks/hooks';
+import { IBaan } from '@/types/baan';
+const ListBaan = (props: any) => {
+    return props.baan
+        .filter(
+            (e: IBaan) =>
+                e.name.includes(props.input) && isAdded(props.selectedBaan, e)
+        ) //Filter when typing the search bar
+        .map((e: IBaan) => {
+            return (
+                <div
+                    key={e.name}
+                    className="text-md flex flex-col items-center"
+                >
+                    <div
+                        className={`mx-4 my-4 flex h-32 w-32 items-center justify-center rounded-xl bg-white ring-4 ring-purple lg:h-40 lg:w-40 min-[1600px]:h-56 min-[1600px]:w-56`}
+                        draggable
+                        onDragStart={(event) =>
+                            event.dataTransfer.setData(
+                                'Data',
+                                JSON.stringify(e)
+                            )
+                        } //Handle dragging event
+                    >
+                        <Image
+                            src={e.imageUrl}
+                            alt={e.name}
+                            width={300}
+                            height={300}
+                            className="rounded-xl bg-black object-contain"
+                        />
+                    </div>
+                    <p>{`${e.name} (${convertSize.get(e.size)})`}</p>
+                </div>
+            );
+        });
+};
+
+export default ListBaan;

src/pages/BaanSelection/components/SelectedBaan.tsx

@@ -0,0 +1,68 @@
+import TrashIcon from '@heroicons/react/24/solid/TrashIcon';
+import { SelectedBaanRank } from '../hooks/types';
+import Image from 'next/image';
+import { BaanSize } from '@/types/baan';
+import { convertSize } from '../hooks/hooks';
+const SelectedBaan = (props: any) => {
+    return props.baan.map((e: SelectedBaanRank) => {
+        //Convert chosen baans to TSX (a bit messy, sry)
+        return (
+            <div
+                key={e.num}
+                className="flex flex-col items-center text-sm lg:flex-row"
+                onDrop={props.handleDrop} //Handle the event that user drag new Baan to the div => Go to line 349...
+                onDragOver={(e) => e.preventDefault()}
+            >
+                <div
+                    className={`mx-4 my-3 flex h-20 w-20 items-center justify-center rounded-lg bg-white ring-2 ring-purple lg:h-24 lg:w-24`}
+                >
+                    <div className="absolute flex h-5 w-5 -translate-x-8 -translate-y-8 items-center justify-center rounded-md bg-purple text-white lg:h-7 lg:w-7 lg:-translate-x-9 lg:-translate-y-9">
+                        <p>{e.num}</p>
+                    </div>
+                    {e.id === -1 ? (
+                        <p className="text-gray-500">Null</p>
+                    ) : (
+                        <Image
+                            src={e.imageUrl}
+                            alt={e.name}
+                            width={100}
+                            height={100}
+                            className="rounded-lg bg-black object-contain"
+                        />
+                    )}
+                </div>
+                {e.id === -1 ? (
+                    <div className="flex w-[8.25rem] flex-col items-center justify-center lg:mx-3 lg:flex-row">
+                        <p>ท่านยังไม่ได้เลือกบ้าน</p>
+                    </div>
+                ) : (
+                    <div className="flex flex-col items-center lg:flex-row">
+                        <p className="mx-3 mb-3 lg:mb-0 lg:w-28">{`${
+                            e.name
+                        } (${convertSize.get(e.size)})`}</p>
+                        <button //Event when clicking on the trash button
+                            onClick={() => {
+                                const resetBaan: SelectedBaanRank[] = [
+                                    ...props.baan,
+                                ]; //Copy the data from the selected-baan
+                                resetBaan[e.num - 1] = {
+                                    //Clear the data inside the index to default
+                                    ...resetBaan[e.num - 1],
+                                    name: '',
+                                    size: BaanSize._,
+                                    imageUrl: '',
+                                    id: -1,
+                                };
+                                props.setSelectedBaan;
+                                // setSelectedBaan(resetBaan);
+                            }}
+                        >
+                            <TrashIcon width={20} height={20} />
+                        </button>
+                    </div>
+                )}
+            </div>
+        );
+    });
+};
+export default SelectedBaan;

src/pages/BaanSelection/hooks/hooks.tsx

@@ -0,0 +1,19 @@
+import { BaanSize, IBaan } from '@/types/baan';
+import { SelectedBaan } from './types';
+
+export const isAdded = (selectedBaan: SelectedBaan[], other: IBaan) => {
+    //Check if the baan is selected and will not be visualized in Baan list
+    for (let i: number = 0; i < 3; i++) {
+        if (selectedBaan[i].id === other.id) return false;
+    }
+    return true;
+};
+
+export const convertSize: Map<BaanSize, string> = new Map<BaanSize, string>([
+    //Convert Baansize type to string (Hope there are better ways)
+    [BaanSize.Small, 'S'],
+    [BaanSize.Medium, 'M'],
+    [BaanSize.Large, 'L'],
+    [BaanSize.ExtraLarge, 'XL'],
+    [BaanSize.ExtraExtraLarge, 'XXL'],
+]);

src/pages/BaanSelection/hooks/types.tsx

@@ -0,0 +1,7 @@
+import { BaanSize, IShortBaan } from '@/types/baan';
+
+export interface SelectedBaanRank extends IShortBaan {
+    //Interface for selected baans (3 baans)
+    size: BaanSize;
+    num: number;
+}