tab selector vs content naming, refactoring

packages/app/src/Components/Event/Note/ReactionsModal.tsx

@@ -8,7 +8,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CloseButton from "@/Components/Button/CloseButton";
 import Icon from "@/Components/Icons/Icon";
 import Modal from "@/Components/Modal/Modal";
-import Tabs from "@/Components/Tabs/Tabs";
+import TabSelectors from "@/Components/TabSelectors/TabSelectors";
 import ProfileImage from "@/Components/User/ProfileImage";
 import { formatShort } from "@/Utils/Number";
 
@@ -75,7 +75,7 @@ const ReactionsModal = ({ onClose, event, initialTab = 0 }: ReactionsModalProps)
           <FormattedMessage {...messages.ReactionsCount} values={{ n: total }} />
         </h2>
       </div>
-      <Tabs tabs={tabs} tab={tab} setTab={setTab} />
+      <TabSelectors tabs={tabs} tab={tab} setTab={setTab} />
       <div className="reactions-body" key={tab.value}>
         {tab.value === 0 && likes.map(ev => renderReactionItem(ev, "heart"))}
         {tab.value === 1 &&

packages/app/src/Components/TabSelectors/TabSelectors.tsx

@@ -1,4 +1,4 @@
-import "./Tabs.css";
+import "./TabSelectors.css";
 
 import { ReactNode } from "react";
 
@@ -20,7 +20,7 @@ interface TabElementProps extends Omit<TabsProps, "tabs"> {
   t: Tab;
 }
 
-export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
+export const TabSelector = ({ t, tab, setTab }: TabElementProps) => {
   return (
     <div
       className={`tab${tab.value === t.value ? " active" : ""}${t.disabled ? " disabled" : ""}`}
@@ -30,15 +30,15 @@ export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
   );
 };
 
-const Tabs = ({ tabs, tab, setTab }: TabsProps) => {
+const TabSelectors = ({ tabs, tab, setTab }: TabsProps) => {
   const horizontalScroll = useHorizontalScroll();
   return (
     <div className="tabs" ref={horizontalScroll}>
       {tabs.map((t, index) => (
-        <TabElement key={index} tab={tab} setTab={setTab} t={t} />
+        <TabSelector key={index} tab={tab} setTab={setTab} t={t} />
       ))}
     </div>
   );
 };
 
-export default Tabs;
+export default TabSelectors;