refactor: use mobx for state and separate files for components

app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx

@@ -0,0 +1,49 @@
+import { observer } from 'mobx-react-lite';
+import { SubscriptionState } from './subscription_state';
+import { Text } from '@/preferences/components';
+import { Button } from '@/components/Button';
+
+type Props = {
+  subscriptionState: SubscriptionState;
+};
+
+export const ActiveSubscription = observer(
+  ({ subscriptionState }: Props) => {
+    const { userSubscription, userSubscriptionName } = subscriptionState;
+    return (
+      <>
+        <Text>
+          Your{' '}
+          <span className="font-bold">
+            Standard Notes{userSubscriptionName ? " " : ""}{userSubscriptionName}
+          </span>{' '}
+          subscription will be{' '}
+          <span className="font-bold">
+            renewed on {new Date(userSubscription!.endsAt).toLocaleString()}
+          </span>
+          .
+        </Text>
+        <div className="flex">
+          <Button
+            className="min-w-20 mt-3 mr-3"
+            type="normal"
+            label="Refresh"
+            onClick={() => null}
+          />
+          <Button
+            className="min-w-20 mt-3 mr-3"
+            type="normal"
+            label="Change plan"
+            onClick={() => null}
+          />
+          <Button
+            className="min-w-20 mt-3"
+            type="primary"
+            label="Cancel subscription"
+            onClick={() => null}
+          />
+        </div>
+      </>
+    );
+  }
+);