Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tag): new component #203

Merged
merged 5 commits into from
Dec 28, 2024

Conversation

DeadEnglish
Copy link
Contributor

@DeadEnglish DeadEnglish commented Dec 28, 2024

What doe this do?

For #125, we need a Tag component that will be used to display tags associated to the showcase on display. This is a quick implementation using all the brand & atom colours. Future improvement of a ghost prop (no background colour, just the border) but will look into it if we need it once the page is complete.

FWIW there's probably some accessibility issues with the background/text colours but can be fixed later.

Code usage

// Tag List Component
<TagList
  tags={[{ name: "linux" }, { name: "macOS" }, { name: "windows", color: 'red' }]}
/>

// Individual tag
<Tag name="linux" color="brand" />

Images/video

Screenshot 2024-12-28 at 15 51 50

Copy link

vercel bot commented Dec 28, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
website ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 28, 2024 10:06pm

Copy link
Member

@BrandonRomano BrandonRomano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice this is looking good! We'll need the key; the other change is a suggestion!

src/components/tag-list/index.tsx Outdated Show resolved Hide resolved
src/components/tag/index.tsx Outdated Show resolved Hide resolved
Copy link
Member

@BrandonRomano BrandonRomano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it! I added one small code suggestion (I'll probably just add this and merge it!)

src/components/tag-list/TagList.module.css Outdated Show resolved Hide resolved
@BrandonRomano
Copy link
Member

Thanks @DeadEnglish this is great 👏

@BrandonRomano BrandonRomano merged commit 2fbe852 into ghostty-org:main Dec 28, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants