import UserSettingsForm from '@form/account/user-settings-form';
import { m } from '@paraglide/messages';
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/(app)/(auth)/account/settings')({
  component: RouteComponent,
  staticData: { breadcrumb: () => m.nav_settings() },
});

function RouteComponent() {
  return (
    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
        <UserSettingsForm />
      </div>
    </div>
  );
}
