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

Add classnames library and start using it

Browse Source
This commit is contained in:
Maximilian Harz 2024-11-19 17:42:54 +01:00
parent b3f3e93aa6
commit d8c864aec9
5 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -13,6 +13,7 @@
"@tanstack/react-query": "^5.17.8",
"@types/offscreencanvas": "^2019.7.1",
"axios": "^1.6.5",
"classnames": "^2.5.1",
"date-fns": "^3.3.1",
"leaflet": "^1.9.4",
"leaflet.locatecontrol": "^0.79.0",
@ -1270,6 +1271,11 @@
"fsevents": "~2.3.2"
}
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/clsx": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",

1
package.json
View File

@ -56,6 +56,7 @@
"@tanstack/react-query": "^5.17.8",
"@types/offscreencanvas": "^2019.7.1",
"axios": "^1.6.5",
"classnames": "^2.5.1",
"date-fns": "^3.3.1",
"leaflet": "^1.9.4",
"leaflet.locatecontrol": "^0.79.0",

2
src/Components/AppShell/NavBar.tsx
View File

@ -96,7 +96,7 @@ export default function NavBar({ appName, userType }: { appName: string; userTyp
</button>
<div className='tw-flex-1 tw-mr-2'>
<div
className={'tw-flex-1 tw-truncate tw-grid tw-grid-flow-col'}
className='tw-flex-1 tw-truncate tw-grid tw-grid-flow-col'
style={{ maxWidth: nameWidth + 60 }}
>
<Link

12
src/Components/AppShell/SidebarSubmenu.tsx
View File

@ -3,6 +3,7 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon'
import classNames from 'classnames'
import { useEffect, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
@ -42,15 +43,16 @@ function SidebarSubmenu({
{name}{' '}
</span>
<ChevronDownIcon
className={
'w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all ' +
(isExpanded ? 'rotate-180' : '')
}
className={classNames('w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all', {
'rotate-180': isExpanded,
})}
/>
</div>
{/** Submenu list */}
<div className={' w-full data-[te-collapse-show]:!hidden ' + (isExpanded ? '' : 'hidden')}>
<div
className={classNames('w-full data-[te-collapse-show]:!hidden', { hidden: !isExpanded })}
>
<ul className={'menu menu-compact'}>
{submenu.map((m, k) => {
return (

7
src/Components/Templates/TagView.tsx
View File

@ -1,4 +1,4 @@
/* eslint-disable @typescript-eslint/restrict-template-expressions */
import classNames from 'classnames'
import { Tag } from '#src/types'
import { decodeTag } from '#utils/FormatTags'
@ -20,7 +20,10 @@ export const TagView = ({
<div
key={tag.name}
onClick={onClick}
className={`tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-4 tw-border-base-200 tw-shadow-lg'}`}
className={classNames(
'tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit',
{ 'tw-border-4 tw-border-base-200 tw-shadow-lg': heighlight },
)}
style={{ backgroundColor: tag.color ? tag.color : '#666' }}
>
<b>{decodeTag(tag.name)}</b>