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", "@tanstack/react-query": "^5.17.8",
"@types/offscreencanvas": "^2019.7.1", "@types/offscreencanvas": "^2019.7.1",
"axios": "^1.6.5", "axios": "^1.6.5",
"classnames": "^2.5.1",
"date-fns": "^3.3.1", "date-fns": "^3.3.1",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"leaflet.locatecontrol": "^0.79.0", "leaflet.locatecontrol": "^0.79.0",
@ -1270,6 +1271,11 @@
"fsevents": "~2.3.2" "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": { "node_modules/clsx": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", "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", "@tanstack/react-query": "^5.17.8",
"@types/offscreencanvas": "^2019.7.1", "@types/offscreencanvas": "^2019.7.1",
"axios": "^1.6.5", "axios": "^1.6.5",
"classnames": "^2.5.1",
"date-fns": "^3.3.1", "date-fns": "^3.3.1",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"leaflet.locatecontrol": "^0.79.0", "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> </button>
<div className='tw-flex-1 tw-mr-2'> <div className='tw-flex-1 tw-mr-2'>
<div <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 }} style={{ maxWidth: nameWidth + 60 }}
> >
<Link <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-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */ /* eslint-disable @typescript-eslint/no-unsafe-member-access */
import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon' import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon'
import classNames from 'classnames'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Link, useLocation } from 'react-router-dom' import { Link, useLocation } from 'react-router-dom'
@ -42,15 +43,16 @@ function SidebarSubmenu({
{name}{' '} {name}{' '}
</span> </span>
<ChevronDownIcon <ChevronDownIcon
className={ className={classNames('w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all', {
'w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all ' + 'rotate-180': isExpanded,
(isExpanded ? 'rotate-180' : '') })}
}
/> />
</div> </div>
{/** Submenu list */} {/** 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'}> <ul className={'menu menu-compact'}>
{submenu.map((m, k) => { {submenu.map((m, k) => {
return ( 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 { Tag } from '#src/types'
import { decodeTag } from '#utils/FormatTags' import { decodeTag } from '#utils/FormatTags'
@ -20,7 +20,10 @@ export const TagView = ({
<div <div
key={tag.name} key={tag.name}
onClick={onClick} 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' }} style={{ backgroundColor: tag.color ? tag.color : '#666' }}
> >
<b>{decodeTag(tag.name)}</b> <b>{decodeTag(tag.name)}</b>