src/components/TopicDetails.tsx - master - grigorin/InterviewHelper

src/components/TopicDetails.tsx
82 строки3 KB
Grigory Nevarov
обновил README.md
12 дек 2025, 16:02
12 дек 2025, 16:02d560e85
import type { Topic } from "../types/knowledge";
import { NotesInput } from "./NotesInput";
import { ScoreInput } from "./ScoreInput";
import "./topicDetails.css";

interface TopicDetailsProps {
  topics: Topic[];
  selectedTopic?: string;
  notes: string;
  score: number | null;
  onSelectTopic: (topic: string) => void;
  onNotesChange: (notes: string) => void;
  onScoreChange: (score: number | null) => void;
}

export const TopicDetails = ({
  topics,
  selectedTopic,
  notes,
  score,
  onSelectTopic,
  onNotesChange,
  onScoreChange,
}: TopicDetailsProps) => {
  if (!topics.length) {
    return null;
  }

  const current = topics.find((topic) => topic.name === selectedTopic);

  return (
    <section className="topic-panel">
      <div className="topic-panel__header">
        <div>
          <p className="topic-panel__eyebrow">Темы</p>
          <h3 className="topic-panel__title">Выберите тему для обсуждения</h3>
        </div>
      </div>

      <div className="topic-panel__grid">
        <div className="topic-panel__list">
          {topics.map((topic) => (
            <button
              key={topic.name}
              type="button"
              className={`topic-card ${topic.name === selectedTopic ? "active" : ""}`}
              onClick={() => onSelectTopic(topic.name)}
            >
              <span className="topic-card__name">{topic.name}</span>
              <span className="topic-card__count">{topic.questions.length} вопроса</span>
            </button>
          ))}
        </div>

        <div className="topic-panel__details">
          {current ? (
            <>
              <div className="topic-panel__questions">
                <p className="topic-panel__eyebrow">Шпаргалка</p>
                <h4>{current.name}</h4>
                <ul className="question-list">
                  {current.questions.map((question) => (
                    <li key={question} className="question-chip">
                      <span className="question-chip__glow" />
                      <span>{question}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <NotesInput value={notes} onChange={onNotesChange} />
              <ScoreInput value={score} onChange={onScoreChange} />
            </>
          ) : (
            <div className="topic-panel__placeholder">
              <p>Выберите тему, чтобы увидеть вопросы и оставить заметки.</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};