Repository: usememos/memos
File: web/src/components/CreateStorageServiceDialog.tsx (TypeScript)

Code before:
        <Input
          className="mb-2"
          placeholder="SecretKey"
          value={s3Config.secretKey}
          onChange={(e) => setPartialS3Config({ secretKey: e.target.value })}
          fullWidth
        />
        <Typography className="!mb-1" level="body2">
          Bucket
          <span className="text-sm text-gray-400 ml-1">(Bucket name)</span>
        </Typography>
        <Input
          className="mb-2"
          placeholder="Bucket"
          value={s3Config.bucket}
          onChange={(e) => setPartialS3Config({ bucket: e.target.value })}
          fullWidth
        />
        <Typography className="!mb-1" level="body2">
          Path
          <span className="text-sm text-gray-400 ml-1">(Storage Path)</span>
        </Typography>
        <Typography className="!mb-1" level="body2">
          <p className="text-sm text-gray-400 ml-1">{"You can use {year}, {month}, {day}, {hour}, {minute}, {second},"}</p>
          <p className="text-sm text-gray-400 ml-1">{"{filetype}, {filename}, {timestamp} and any other words."}</p>
          <p className="text-sm text-gray-400 ml-1">{"e.g., {year}/{month}/{day}/xxx/yyy_{filename}."}</p>
        </Typography>
        <Input
          className="mb-2"
          placeholder="Path"
          value={s3Config.path}
          onChange={(e) => setPartialS3Config({ path: e.target.value })}
          fullWidth
        />
        <Typography className="!mb-1" level="body2">
          URLPrefix
          <span className="text-sm text-gray-400 ml-1">(Custom URL prefix; Optional)</span>
        </Typography>
        <Input
          className="mb-2"
          placeholder="URLPrefix"
          value={s3Config.urlPrefix}
          onChange={(e) => setPartialS3Config({ urlPrefix: e.target.value })}
          fullWidth
        />
        <div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
          <Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
            Cancel
          </Button>
          <Button onClick={handleConfirmBtnClick} disabled={!allowConfirmAction()}>
            {isCreating ? "Create" : "Update"}

Review comment (suggestion):
```suggestion
          <p className="text-sm text-gray-400 ml-1">{"e.g. {year}/{month}/{day}/{filename}.{filetype}"}</p>
```

Code after:
        </Typography>
        <Input
          className="mb-2"
          placeholder="SecretKey"
          value={s3Config.secretKey}
          onChange={(e) => setPartialS3Config({ secretKey: e.target.value })}
          fullWidth
        />
        <Typography className="!mb-1" level="body2">
          Bucket
          <span className="text-sm text-gray-400 ml-1">(Bucket name)</span>
        </Typography>
        <Input
          className="mb-2"
          placeholder="Bucket"
          value={s3Config.bucket}
          onChange={(e) => setPartialS3Config({ bucket: e.target.value })}
          fullWidth
        />
        <Typography className="!mb-1" level="body2">
          Path
          <span className="text-sm text-gray-400 ml-1">(Storage Path)</span>
        </Typography>
        <Typography className="!mb-1" level="body2">
          <p className="text-sm text-gray-400 ml-1">{"You can use {year}, {month}, {day}, {hour}, {minute}, {second},"}</p>
          <p className="text-sm text-gray-400 ml-1">{"{filetype}, {filename}, {timestamp} and any other words."}</p>
          <p className="text-sm text-gray-400 ml-1">{"e.g., {year}/{month}/{day}/your/path/{filename}.{filetype}"}</p>
        </Typography>
        <Input
          className="mb-2"
          placeholder="Path"
          value={s3Config.path}
          onChange={(e) => setPartialS3Config({ path: e.target.value })}
          fullWidth
        />
        <Typography className="!mb-1" level="body2">
          URLPrefix
          <span className="text-sm text-gray-400 ml-1">(Custom URL prefix; Optional)</span>
        </Typography>
        <Input
          className="mb-2"
          placeholder="URLPrefix"
          value={s3Config.urlPrefix}
          onChange={(e) => setPartialS3Config({ urlPrefix: e.target.value })}
          fullWidth
        />
        <div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
          <Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
            Cancel
          </Button>
          <Button onClick={handleConfirmBtnClick} disabled={!allowConfirmAction()}>