Separate components

Unanswered

In&Out posted this in #help-forum

2024-03-24T16:09:24.000Z

Hey folks, I am trying to make a modal that will show info of a card by clicking the card, will look like this. How can I make a modal get info of that certain card and only that card

11 Replies

In&OutOP

2024-03-24T16:10:24.000Z

https://gyazo.com/078d2316015a2774043dc275b6cebe7b

This is how it looks now, but I can't figure out how to get individual info from the columns

"use client";
import Modal from "../../utils/modal/Modal";
import useModalStore from "../../utils/modal/Store";
import styles from "./Column.module.css";

interface Iprops {
  order: string;
  date: string;
  status: string;
  total: string;
  action: string;
  index: number;
}

function Columns({ order, date, status, total, action, index }: Iprops) {
  const { opened, openModal, closeModal } = useModalStore();

  return (
    <div className={styles.Container}>
      <div className={styles.LeftRows}>
        <div className={styles.Row}>{order}</div>
        <div className={styles.Row}>{date}</div>
        <div className={styles.Row}>{status}</div>
        <div className={styles.Row}>{total}</div>
      </div>
      <div>
        <button className={styles.Button} onClick={openModal}>
          {action}
        </button>
      </div>
      <Modal debug={index} />
    </div>
  );
}

export default Columns;