antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

added tailwind

Browse Source
This commit is contained in:
AT 2022-07-12 20:24:00 +02:00
parent aeae2efc0c
commit 4e972f7e11
5 changed files with 64 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -40,19 +40,6 @@ use the [Map UI Component](/docs/utopia-ui/map-components/map)
```
You can find some Sample Data (places, events, tags) for test purpose below
### Options
Option | Type | Default | Required | Description
--- | --- | --- | --- | ---
`height` | `string` |`'400px'` | No | height of the map
`width` | `string` |`'100vw'` | No | width of the map
`center` | `LatLng` |`[50.6, 9.5]` | No | initial map position
`zoom` | `number` |`10` | No | initial zoom level
`places` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| | No | Array with Items
`events` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| | No | Array with Items
`tags` | [`Tag[]`](https://utopia-os.org/docs/utopia-ui/map-components/tag) | | No | Array with Tags
### Sample Data
```jsx
const places = [{
@ -91,6 +78,19 @@ const tags = [
```
### Options
Option | Type | Default | Required | Description
--- | --- | --- | --- | ---
`height` | `string` |`'400px'` | No | height of the map
`width` | `string` |`'100vw'` | No | width of the map
`center` | `LatLng` |`[50.6, 9.5]` | No | initial map position
`zoom` | `number` |`10` | No | initial zoom level
`places` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `{}` | No | Array with Items
`events` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `{}` | No | Array with Items
`tags` | [`Tag[]`](https://utopia-os.org/docs/utopia-ui/map-components/tag) | `{}` | No | Array with Tags
## Coming Soon
* Profile UI Component

7
postcss.config.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}

21
src/Components/Map/MarkerPopup.tsx
View File

@ -12,11 +12,26 @@ const MarkerPopup = (props: MarkerPopupProps) => {
const tags: Tag[] = props.tags;
return (
<Popup maxHeight={377} minWidth={275} maxWidth={275} autoPanPadding={[30,30]}>
<Popup maxHeight={320} minWidth={275} maxWidth={275} autoPanPadding={[30, 30]}>
<b className="text-xl font-bold">{item.name}</b>
{item.start && item.end &&
<p>{new Date(item.start).toISOString().substring(0, 10) || ""} - {new Date(item.end).toISOString().substring(0, 10) || ""}</p>
<div className="flex flex-row">
<div className="basis-2/5">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span className='align-middle'>{new Date(item.start).toISOString().substring(0, 10) || ""}</span>
</div>
<div className="basis-1/5 place-content-center">
<span>-</span>
</div>
<div className="basis-2/5">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span className='align-middle leading-6'>{new Date(item.end).toISOString().substring(0, 10) || ""}</span>
</div>
</div>
}
<p style={{ whiteSpace: "pre-wrap" }} dangerouslySetInnerHTML={{ __html: replaceURLs(item.text) }} />

9
src/index.css Normal file
View File

@ -0,0 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.leaflet-data-marker {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;
background-position: 6px 32px;
}

17
tailwind.config.js Normal file
View File

@ -0,0 +1,17 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
content: ['./src/**/*.{js,jsx,ts,tsx}'],
corePlugins: {
preflight: false
},
darkMode: 'class',
}