components#Tag TypeScript Examples
The following examples show how to use
components#Tag.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.test.tsx From geist-ui with MIT License | 6 votes |
|
describe('Tag', () => {
it('should render correctly', () => {
const wrapper = mount(<Tag>tag</Tag>)
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work with types', () => {
const wrapper = render(
<div>
<Tag type="success">success</Tag>
<Tag type="secondary">secondary</Tag>
<Tag type="error">error</Tag>
<Tag type="dark">dark</Tag>
</div>,
)
expect(wrapper).toMatchSnapshot()
})
it('should work with invert', () => {
const wrapper = render(
<Tag type="success" invert>
success
</Tag>,
)
expect(wrapper).toMatchSnapshot()
})
it('should work when child is null', () => {
const wrapper = mount(<Tag />)
expect(() => wrapper.unmount()).not.toThrow()
})
})
Example #2
| Source File: index.tsx From webapis-playground with MIT License | 4 votes |
|
function Battery() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-items-center md:tw-items-start
"
>
<Button onClick={run}>Get Battery Status</Button>
<div
className="
tw-shadow
tw-overflow-hidden
tw-border-b
tw-border-gray-200
sm:tw-rounded-lg
tw-mt-4
"
>
<table
className="
tw-w-full
tw-min-w-full
tw-divide-y
tw-divide-gray-200
"
>
<thead className="tw-bg-gray-100">
<tr>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Property
</th>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Value
</th>
</tr>
</thead>
<tbody
className="
tw-bg-white
tw-divide-y
tw-divide-gray-200
"
>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Charging
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-battery--charging"
className="
tw-text-sm
tw-text-gray-900
"
>
Unknow
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Level
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
<Tag id="js-battery--level">Unknow</Tag>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
Example #3
| Source File: index.tsx From webapis-playground with MIT License | 4 votes |
|
function Geolocation() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-items-start
"
>
<Button leftIcon={<FaLocationArrow />} onClick={run}>
Get my location
</Button>
<div
className="
tw-shadow
tw-overflow-hidden
tw-border-b
tw-border-gray-200
sm:tw-rounded-lg
tw-mt-4
"
>
<table
className="
tw-w-full
tw-min-w-full
tw-divide-y
tw-divide-gray-200
"
>
<thead className="tw-bg-gray-100">
<tr>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Property
</th>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Value
</th>
</tr>
</thead>
<tbody
className="
tw-bg-white
tw-divide-y
tw-divide-gray-200
"
>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Latitude
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-geolocation--latitude"
className="
tw-text-sm
tw-text-gray-900
"
>
Unknow
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Logintude
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-geolocation--longitude"
className="
tw-text-sm
tw-text-gray-900
"
>
Unknow
</span>
</td>
</tr>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Accurate
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-geolocation--accuracy"
className="
tw-text-sm
tw-text-gray-900
"
>
Unknow
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Opengraph
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-geolocation--longitude"
className="
tw-text-sm
tw-text-gray-900
"
>
<Tag
id="js-geolocation--opengraph"
as="a"
href=""
rel="noopener noreferrer"
target="_blank"
>
open in new tab
</Tag>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
Example #4
| Source File: index.tsx From webapis-playground with MIT License | 4 votes |
|
function Network() {
const [data] = React.useState<
NetworkInformation & {
effectiveType?: 'readonly';
rtt?: 'readonly';
downlink?: 'readonly';
downlinksMax?: 'readonly';
saveData?: 'readonly';
}
>(run());
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-shadow
tw-overflow-hidden
tw-border-b
tw-border-gray-200
sm:tw-rounded-lg
"
>
<table
className="
tw-w-full
tw-min-w-full
tw-divide-y
tw-divide-gray-200
"
>
<thead className="tw-bg-gray-100">
<tr>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Property
</th>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Value
</th>
</tr>
</thead>
<tbody
className="
tw-bg-white
tw-divide-y
tw-divide-gray-200
"
>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Network Type
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.effectiveType || UNKNOWN_STRING}
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Round Trip Time(rtt)
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.rtt || UNKNOWN_STRING}
</span>
</td>
</tr>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Bandwidth estimate(in MBPS)
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.downlink || UNKNOWN_STRING}
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Max Bandwidth estimate(in MBPS)
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.downlinksMax || UNKNOWN_STRING}
</span>
</td>
</tr>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Save data enabled
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.saveData ? (
<Tag className="tw-bg-green-500 hover:tw-bg-green-600">
Yes
</Tag>
) : (
<Tag className="tw-bg-red-500 hover:tw-bg-red-600">No</Tag>
)}
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Device Connection Type
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.type || UNKNOWN_STRING}
</span>
</td>
</tr>
</tbody>
</table>
</div>
);
}
