DNS Settings Block for React

Edit ZONE and the SAVED list at the top: each record has a name (an at sign for the zone itself), a TTL in seconds, a type (A, AAAA, CNAME, MX or TXT) and a value written as in a zone file, so an MX value is a priority and a host and a CNAME target is a name inside the zone. The zone file text, the counts, the resolver's answers and the unsaved count are all worked out from that list. TTL_CHOICES lists the TTL options, and a record with another TTL gets its own option so nothing is lost.

It never looks anything up. It follows the records in the page: if the name has a CNAME it follows it (up to six hops, inside the zone) and then lists the records of the asked type at the end; a name outside the zone stops the chain and says its own DNS host answers from there; a name with no record of that type says the name exists but holds none, or that nothing is published there. The line under the answer names the shortest TTL on the way, in words.

A CNAME beside any other record on the same name ("A CNAME cannot share a name with the A record on app"), a second CNAME on one name, a CNAME at the zone itself, any other record on a name that is a CNAME, and an exact duplicate. Each record is also checked for its type: an IPv4 or IPv6 address, a name for a CNAME, a priority and a mail host for an MX record, and text up to 255 characters for TXT. The add band, the zone file and Remove all apply the same checks, and the add band keeps focus on the field that needs fixing.

Each line is a name, an optional TTL, an optional IN, a type and a value; a line that starts with a dollar sign sets the origin or the default TTL, a semicolon starts a comment, and a TXT value goes in quotes. Every line that can't be used is listed with its number and reason, and the summary names the first. When the text has no problems the table takes exactly those records; when it has one, the table keeps the last valid zone, the foot says to fix the line first, and Remove, a TTL change and Add refuse until it is fixed. A change in the table rewrites the text.

Everything. No record is published and nothing resolves: Publish zone keeps the records in this page's state and says how many changes it kept. To make it real, send the saved list to your DNS provider's API, run the same checks on the server (a client can be skipped), and read the zone back from the provider so the table and the file always show what is live.

The table becomes one card per record, from the same markup, with the type and name, the value, the TTL select and Remove; the filter chips wrap and the add band becomes two columns. The table is native, with a caption and column headers, inside a scrolling region that takes focus; every control is named for its record ("TTL for the A record on mail"), and removing a record moves focus to the one that took its place. Switching tabs never changes the panel's height. The status line is a polite live region present from the start.