Migrate workspace settings to ts

app/src/components/settings/workspace/GitSettings.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  Text,
+  Switch,
+  TextInput,
+  Stack,
+  PasswordInput,
+  Group,
+  Grid,
+} from '@mantine/core';
+import { Workspace } from '@/types/workspace';
+
+interface GitSettingsProps {
+  gitEnabled: boolean;
+  gitUrl: string;
+  gitUser: string;
+  gitToken: string;
+  gitAutoCommit: boolean;
+  gitCommitMsgTemplate: string;
+  gitCommitName: string;
+  gitCommitEmail: string;
+  onInputChange: (key: keyof Workspace, value: any) => void;
+}
+
+const GitSettings: React.FC<GitSettingsProps> = ({
+  gitEnabled,
+  gitUrl,
+  gitUser,
+  gitToken,
+  gitAutoCommit,
+  gitCommitMsgTemplate,
+  gitCommitName,
+  gitCommitEmail,
+  onInputChange,
+}) => {
+  return (
+    <Stack gap="md">
+      <Grid gutter="md" align="center">
+        <Grid.Col span={6}>
+          <Text size="sm">Enable Git Repository</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <Group justify="flex-end">
+            <Switch
+              checked={gitEnabled}
+              onChange={(event) =>
+                onInputChange('gitEnabled', event.currentTarget.checked)
+              }
+            />
+          </Group>
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Git URL</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={gitUrl}
+            description="The URL of your Git repository"
+            onChange={(event) =>
+              onInputChange('gitUrl', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter Git URL"
+          />
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Username</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={gitUser}
+            description="The username used to authenticate with the repository"
+            onChange={(event) =>
+              onInputChange('gitUser', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter Git username"
+          />
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Access Token</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <PasswordInput
+            value={gitToken}
+            description="Personal access token with repository read/write permissions"
+            onChange={(event) =>
+              onInputChange('gitToken', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter Git token"
+          />
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Commit on Save</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <Group justify="flex-end">
+            <Switch
+              checked={gitAutoCommit}
+              onChange={(event) =>
+                onInputChange('gitAutoCommit', event.currentTarget.checked)
+              }
+              disabled={!gitEnabled}
+            />
+          </Group>
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Commit Message Template</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={gitCommitMsgTemplate}
+            description="Template for automated commit messages. Use ${filename} and ${action} as a placeholder."
+            onChange={(event) =>
+              onInputChange('gitCommitMsgTemplate', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter commit message template"
+          />
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Commit Author</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={gitCommitName}
+            description="Name to appear in commit history. Leave empty to use Git username."
+            onChange={(event) =>
+              onInputChange('gitCommitName', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter commit author name."
+          />
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text size="sm">Commit Author Email</Text>
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <TextInput
+            value={gitCommitEmail}
+            description="Email address to associate with your commits"
+            onChange={(event) =>
+              onInputChange('gitCommitEmail', event.currentTarget.value)
+            }
+            disabled={!gitEnabled}
+            placeholder="Enter commit author email."
+          />
+        </Grid.Col>
+      </Grid>
+    </Stack>
+  );
+};
+
+export default GitSettings;