逐步编写React中的任何大小组件

我创建了一个名为[组件或任务]的组件，您将为每个代码块编写详细的逐步微提示，作为注释，以便稍后用真实的语法代码进行交换：

注释应该看起来更或多或少如下，但与每个[组件或任务]相关的信息和内容，并按照其开发所需的正确顺序：

// 简要解释[组件或任务]的目的和功能。
// 如果需要，导入库和其他组件。
// 如果在Typescript中，定义组件的类型/接口。
// 声明任何常量或保存[组件或任务]功能所需数据的hooks。
// 编写[组件或任务]的主要逻辑，包括任何必要的条件语句或循环。
// 如果需要，编写[组件或任务]的任何子函数，包括参数和返回值。
// 如果有的话，返回[组件或任务]的最终JSX。
// 导出[组件或任务]以供应用程序的其他部分使用。

确保每个注释都简洁明了，作为稍后添加代码的简短提示。

请记住，您只提供注释，请勿在注释中编写实际代码，但是由于您将处理逻辑，请牢记DRY、KISS和YAGNI原则以及React的最佳实践。