Rename component Table to settings-list

design-system/Table/TableRow.tsx → design-system/settings-list/settings-list-row.tsx

@@ -5,17 +5,17 @@ import { useAppTheme, ThemedStyle } from "@/theme/useAppTheme";
 import { HStack } from "@/design-system/HStack";
 import { VStack } from "@/design-system/VStack";
 import { Icon } from "@/design-system/Icon/Icon";
-import { ITableRow } from "./Table.types";
+import { ISettingsListRow } from "./settings-list.types";
 
-type ITableRowProps = {
-  row: ITableRow;
+type ISettingsListRowProps = {
+  row: ISettingsListRow;
   editMode?: boolean;
 };
 
-export const TableRow = memo(function TableRow({
+export const SettingsListRow = memo(function SettingsListRow({
   row,
   editMode,
-}: ITableRowProps) {
+}: ISettingsListRowProps) {
   const { theme, themed } = useAppTheme();
 
   const content = (

design-system/settings-list/settings-list.tsx

@@ -0,0 +1,33 @@
+import React, { memo } from "react";
+import { View, ViewStyle } from "react-native";
+import { useAppTheme, ThemedStyle } from "@/theme/useAppTheme";
+import { SettingsListRow } from "./settings-list-row";
+import { ISettingsListRow } from "./settings-list.types";
+
+type ISettingsListProps = {
+  rows: ISettingsListRow[];
+  editMode?: boolean;
+};
+
+export const SettingsList = memo(function SettingsList({
+  rows,
+  editMode,
+}: ISettingsListProps) {
+  const { themed } = useAppTheme();
+
+  return (
+    <View style={themed($container)}>
+      {rows.map((row, index) => (
+        <SettingsListRow
+          key={row.label + index}
+          row={row}
+          editMode={editMode}
+        />
+      ))}
+    </View>
+  );
+});
+
+const $container: ThemedStyle<ViewStyle> = () => ({
+  width: "100%",
+});

design-system/Table/Table.types.ts → design-system/settings-list/settings-list.types.ts

@@ -1,9 +1,9 @@
-export type ITableRow = {
+export type ISettingsListRow = {
   label: string;
-  value?: string | number;
+  value?: string | boolean;
+  onPress?: () => void;
   onValueChange?: (value: boolean) => void;
-  isSwitch?: boolean;
   isWarning?: boolean;
+  isSwitch?: boolean;
   disabled?: boolean;
-  onPress?: () => void;
 };

screens/Profile.tsx

@@ -10,7 +10,7 @@ import {
 } from "react-native";
 import { Screen } from "@/components/Screen/ScreenComp/Screen";
 import { ContactCard } from "@/features/profiles/components/contact-card";
-import { Table } from "@/design-system/Table/Table";
+import { SettingsList } from "@/design-system/settings-list/settings-list";
 import { VStack } from "@/design-system/VStack";
 import { Text } from "@/design-system/Text";
 import { useRoute, useRouter } from "@navigation/useNavigation";
@@ -274,7 +274,7 @@ export default function ProfileScreen() {
             <VStack
               style={[themed($section), { paddingVertical: theme.spacing.lg }]}
             >
-              <Table
+              <SettingsList
                 editMode={editMode}
                 rows={[
                   ...(notificationsPermissionStatus !== "granted"