https://github.com/usrrname/tab-component-demo

Created with CodeSandbox // example of a tab component
https://github.com/usrrname/tab-component-demo

react reactcontext typescript

Last synced: 29 days ago
JSON representation

Created with CodeSandbox // example of a tab component

• Host: GitHub
• URL: https://github.com/usrrname/tab-component-demo
• Owner: usrrname
• Created: 2022-06-23T22:27:38.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-23T22:53:37.000Z (over 2 years ago)
• Last Synced: 2024-04-18T06:21:25.257Z (7 months ago)
• Topics: react, reactcontext, typescript
• Language: TypeScript
• Homepage: https://codesandbox.io/s/github/usrrname/tab-component-demo
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Tab Component Demo

A ham-fisted demo based off interpretation of Figma file https://www.figma.com/file/nomdaznu2CczB9UJXuXpnI/branch/7gSowr4KPLcypwNpSpaY8R/Untitled?node-id=0%3A1

Used dummy JSON from https://jsonplaceholder.typicode.com/users/1/posts

The values in this api change frequently.

### Libs and Tools

- React

- Typescript

- Styled Components

Search `TODO:` for dev notes

### Imagined requirements:

- initial selected tab is `1`

- focus and selection should be different

- show right chevron `>` when more than 7 results

- show left chevron `<` before first tab when results from 7+1 to the end are (not a great pagination solution for now, should replace with min and max values)