78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
import { useState } from "react";
|
|
import { SignIn } from "@phosphor-icons/react";
|
|
import type { SocialPlatform } from "@shared/types";
|
|
import { ActionButton, Modal } from "../ui";
|
|
import { platformConfig } from "./social-config";
|
|
|
|
interface AddAccountDialogProps {
|
|
onAddAndLogin: (platform: SocialPlatform, requireApproval: boolean) => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function AddAccountDialog({ onAddAndLogin, onClose }: AddAccountDialogProps) {
|
|
const [platform, setPlatform] = useState<SocialPlatform>("twitter");
|
|
const [requireApproval, setRequireApproval] = useState(true);
|
|
|
|
return (
|
|
<Modal open onClose={onClose} title="Add Social Account" width="420px">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="mb-1.5 block text-[12px] font-medium text-muted-foreground">Platform</label>
|
|
<div className="max-h-[240px] overflow-y-auto rounded-lg border border-border p-1.5">
|
|
<div className="grid grid-cols-3 gap-1.5">
|
|
{(Object.entries(platformConfig) as [SocialPlatform, typeof platformConfig.twitter][]).map(([key, config]) => (
|
|
<button
|
|
key={key}
|
|
type="button"
|
|
onClick={() => setPlatform(key)}
|
|
className={`flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-[11px] font-medium transition ${
|
|
platform === key
|
|
? "border-[color:var(--primary)] bg-accent text-primary"
|
|
: "border-border text-muted-foreground hover:border-border"
|
|
}`}
|
|
>
|
|
<span style={{ color: config.color }}>
|
|
<config.icon size={14} />
|
|
</span>
|
|
<span className="truncate">{config.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-border bg-muted px-4 py-3">
|
|
<label className="flex items-center gap-3">
|
|
<input
|
|
type="checkbox"
|
|
checked={requireApproval}
|
|
onChange={(e) => setRequireApproval(e.target.checked)}
|
|
className="h-4 w-4 rounded border-border accent-[color:var(--primary)]"
|
|
/>
|
|
<div>
|
|
<div className="text-[12px] font-medium text-foreground">Require Board Approval for Posts</div>
|
|
<div className="mt-0.5 text-[10px] text-muted-foreground">
|
|
Agents must get approval before publishing content to this account
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="rounded-lg bg-accent px-4 py-3 text-[11px] text-muted-foreground">
|
|
A browser window will open for you to sign in. Your username and profile info will be detected automatically after login.
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex justify-end gap-3">
|
|
<ActionButton label="Cancel" onClick={onClose} />
|
|
<ActionButton
|
|
label="Login"
|
|
onClick={() => onAddAndLogin(platform, requireApproval)}
|
|
icon={SignIn}
|
|
tone="accent"
|
|
/>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|