chore(website): [playground] add tabs to ast viewer and update design

[armano2]

PR Checklist

• That issue was marked as accepting prs
• Steps in Contributing were taken

Overview

migrate tabs changes from #6656

notable changes:

• right panel uses tabs instead of dropdown in options
• design has been updated to use styles from button/button-group

design

old:

new:

[typescript-eslint]

Thanks for the PR, @armano2!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!

---

🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint.

[netlify]

✅ Deploy Preview for typescript-eslint ready!

Name	Link
🔨 Latest commit	1370e4a
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/641ab96a4bcf5e00085ed251
😎 Deploy Preview	https://deploy-preview-6735--typescript-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1370e4a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 30 targets

• Node 18 - nx test eslint-plugin
• Node 14 - nx test eslint-plugin --coverage=false
• nx run-many --target=lint --parallel
• nx run-many --target=build --projects=website-eslint,website
• Node 18 - nx test typescript-estree
• Node 18 - nx test scope-manager
• Node 18 - nx test visitor-keys
• Node 18 - nx test type-utils
• Node 18 - nx test utils
• Node 18 - nx run types:build
• Node 18 - nx test eslint-plugin-tslint
• Node 18 - nx test repo-tools
• Node 14 - nx test typescript-estree --coverage=false
• nx run-many --target=typecheck --parallel
• nx run integration-tests:test
• Node 14 - nx test scope-manager --coverage=false
• Node 14 - nx test eslint-plugin-internal --coverage=false
• Node 18 - nx test eslint-plugin-internal
• Node 14 - nx test ast-spec --coverage=false
• Node 14 - nx test parser --coverage=false
• Node 18 - nx test ast-spec
• Node 14 - nx run types:build
• Node 14 - nx test type-utils --coverage=false
• Node 18 - nx test parser
• Node 14 - nx test repo-tools --coverage=false
• Node 14 - nx test utils --coverage=false
• Node 14 - nx test eslint-plugin-tslint --coverage=false
• nx run types:build
• Node 14 - nx test visitor-keys --coverage=false
• nx run-many --target=build --parallel --exclude=website --exclude=website-eslint

---

Sent with 💌 from NxCloud.

[codecov]

Codecov Report

Merging #6735 (1370e4a) into v6 (f84bf4a) will decrease coverage by 0.04%.
The diff coverage is n/a.

Additional details and impacted files

@@            Coverage Diff             @@
##               v6    #6735      +/-   ##
==========================================
- Coverage   87.40%   87.36%   -0.04%     
==========================================
  Files         373      373              
  Lines       12844    12800      -44     
  Branches     3811     3793      -18     
==========================================
- Hits        11226    11183      -43     
  Misses       1232     1232              
+ Partials      386      385       -1     

Flag	Coverage Δ
unittest	87.36% <ø> (-0.04%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 1 file with indirect coverage changes

[JoshuaKGoldberg]

Awesome! 🔥