themesberg / themesberg/flowbite-react
JSX element type 'Tabs' does not have any construct or call signatures.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 506
- PR merge metrics
- No merged PRs in 30d
Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Steps to reproduce
yarn add flowbite-react@^0.5.0- create Tabs element in typescript
tsx
import { FlowbiteToastContext } from '@root/src/components/FlowbiteLayout';
import { Button, Label, Tabs, TextInput } from 'flowbite-react';
import React from 'react';
import { HiUserCircle } from 'react-icons/hi';
import { useOutletContext } from 'react-router-dom';
export default function Login() {
return (
<main className="space-y-4">
<Tabs aria-label="Tabs with underline" style="underline">
<Tabs.Item active title="Profile" icon={HiUserCircle}>
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
<Tabs.Item title="Dashboard" icon={HiUserCircle}>
This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling.
</Tabs.Item>
</Tabs>
<form className="flex max-w-md flex-col gap-4 mx-auto">
<div>
<div className="mb-2 block">
<Label htmlFor="email1" value="Your email" />
</div>
<TextInput id="email1" type="email" placeholder="name@flowbite.com" required />
</div>
<div>
<div className="mb-2 block">
<Label htmlFor="password1" value="Your password" />
</div>
<TextInput id="password1" type="password" required />
</div>
<Button type="submit">Submit</Button>
</form>
</main>
);
}
Current behavior
{
"flowbite": "^2.2.1",
"flowbite-react": "^0.5.0",
"tailwindcss": "^3.4.1",
"sass-loader": "^12.6.0",
}
-
I just read tutorial on https://www.flowbite-react.com/docs/components/tabs but Tabs is not default export
-
because of issue https://github.com/themesberg/flowbite-react/issues/1065 I cant update
flowbite-react
Expected behavior
Need working Tabs element in typescript
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the TypeScript TSX example from the issue with flowbite-react@^0.5.0 and compare it with the Tabs documentation at flowbite-react.com/docs/components/tabs. Check issue #1065 for the version constraint, then verify that the documented Tabs usage compiles and works without the construct-or-call-signatures error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100