mirror of
https://github.com/Dictionarry-Hub/profilarr.git
synced 2026-01-22 19:01:02 +01:00
feat: enhance RegexGeneralTab with MarkdownEditor and improved styling for inputs and tags
This commit is contained in:
Sam Chau
@@ -1,6 +1,7 @@
|
||||
import React, {useState} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import TextArea from '../ui/TextArea';
|
||||
import MarkdownEditor from '@ui/MarkdownEditor';
|
||||
import AddButton from '@ui/DataBar/AddButton';
|
||||
import {InfoIcon} from 'lucide-react';
|
||||
|
||||
const RegexGeneralTab = ({
|
||||
@@ -41,19 +42,24 @@ const RegexGeneralTab = ({
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className='space-y-6'>
|
||||
<div className='space-y-8'>
|
||||
{/* Name Input */}
|
||||
<div className='space-y-2'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
Pattern Name
|
||||
</label>
|
||||
<div className='space-y-1'>
|
||||
<label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
Pattern Name
|
||||
</label>
|
||||
<p className='text-xs text-gray-500 dark:text-gray-400'>
|
||||
Give your regex pattern a descriptive name
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
type='text'
|
||||
value={name}
|
||||
onChange={e => onNameChange(e.target.value)}
|
||||
placeholder='Enter pattern name'
|
||||
className='w-full rounded-md border border-gray-300 dark:border-gray-600
|
||||
bg-white dark:bg-gray-700 px-3 py-2 text-sm
|
||||
bg-gray-50 dark:bg-gray-800 px-3 py-2 text-sm
|
||||
text-gray-900 dark:text-gray-100
|
||||
placeholder-gray-500 dark:placeholder-gray-400
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
||||
@@ -63,33 +69,37 @@ const RegexGeneralTab = ({
|
||||
|
||||
{/* Description */}
|
||||
<div className='space-y-2'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
Description
|
||||
</label>
|
||||
<TextArea
|
||||
<div className='space-y-1'>
|
||||
<label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
Description
|
||||
</label>
|
||||
<p className='text-xs text-gray-500 dark:text-gray-400'>
|
||||
Describe what this pattern matches. Use markdown to
|
||||
format your description.
|
||||
</p>
|
||||
</div>
|
||||
<MarkdownEditor
|
||||
value={description}
|
||||
onChange={e => onDescriptionChange(e.target.value)}
|
||||
placeholder='Describe what this pattern matches...'
|
||||
rows={3}
|
||||
className='w-full rounded-md border border-gray-300 dark:border-gray-600
|
||||
bg-white dark:bg-gray-700
|
||||
text-gray-900 dark:text-gray-100
|
||||
placeholder-gray-500 dark:placeholder-gray-400
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
||||
transition-colors duration-200'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Pattern Input */}
|
||||
<div className='space-y-2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
Pattern
|
||||
</label>
|
||||
<div className='flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400'>
|
||||
<InfoIcon className='h-4 w-4' />
|
||||
<span>Case insensitive PCRE2</span>
|
||||
<div className='space-y-1'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
Pattern
|
||||
</label>
|
||||
<div className='flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400'>
|
||||
<InfoIcon className='h-4 w-4' />
|
||||
<span>Case insensitive PCRE2</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className='text-xs text-gray-500 dark:text-gray-400'>
|
||||
Enter your regular expression pattern
|
||||
</p>
|
||||
</div>
|
||||
{patternError && (
|
||||
<p className='text-sm text-red-600 dark:text-red-400'>
|
||||
@@ -100,19 +110,24 @@ const RegexGeneralTab = ({
|
||||
value={pattern}
|
||||
onChange={e => onPatternChange(e.target.value)}
|
||||
className='w-full h-24 rounded-md border border-gray-300 dark:border-gray-600
|
||||
bg-white dark:bg-gray-700 px-3 py-2
|
||||
bg-gray-50 dark:bg-gray-800 px-3 py-2
|
||||
text-gray-900 dark:text-gray-100 font-mono text-sm
|
||||
focus:border-blue-500 dark:focus:border-blue-400
|
||||
focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-400'
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
||||
transition-colors duration-200'
|
||||
placeholder='Enter your regex pattern here...'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className='space-y-4'>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
Tags
|
||||
</label>
|
||||
<div className='space-y-1'>
|
||||
<label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
Tags
|
||||
</label>
|
||||
<p className='text-xs text-gray-500 dark:text-gray-400'>
|
||||
Add tags to organize and categorize this pattern
|
||||
</p>
|
||||
</div>
|
||||
<div className='flex space-x-2'>
|
||||
<input
|
||||
type='text'
|
||||
@@ -121,35 +136,38 @@ const RegexGeneralTab = ({
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder='Add a tag'
|
||||
className='w-full rounded-md border border-gray-300 dark:border-gray-600
|
||||
bg-white dark:bg-gray-700 px-3 py-2 text-sm
|
||||
bg-gray-50 dark:bg-gray-800 px-3 py-2 text-sm
|
||||
text-gray-900 dark:text-gray-100
|
||||
placeholder-gray-500 dark:placeholder-gray-400
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
||||
transition-colors duration-200'
|
||||
/>
|
||||
<button
|
||||
<AddButton
|
||||
onClick={handleAddTag}
|
||||
disabled={!newTag.trim()}
|
||||
className='px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-400
|
||||
text-white rounded-md text-sm font-medium transition-colors duration-200
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
|
||||
dark:focus:ring-offset-gray-800'>
|
||||
Add
|
||||
</button>
|
||||
label='Add'
|
||||
/>
|
||||
</div>
|
||||
{tags.length > 0 ? (
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
<div className='flex flex-wrap gap-2 rounded-md'>
|
||||
{tags.map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className='inline-flex items-center p-1.5 rounded-md text-xs
|
||||
bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 group'>
|
||||
className='inline-flex items-center px-2.5 py-1 rounded-md
|
||||
text-xs font-semibold
|
||||
bg-blue-600/20 text-blue-400
|
||||
group'>
|
||||
{tag}
|
||||
<button
|
||||
onClick={() => onRemoveTag(tag)}
|
||||
className='ml-1.5 hover:text-blue-900 dark:hover:text-blue-200 focus:outline-none'>
|
||||
className='ml-1.5 p-0.5 rounded-md
|
||||
hover:bg-blue-500/20
|
||||
focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500 focus:ring-offset-1
|
||||
transition-colors duration-200'>
|
||||
<svg
|
||||
className='w-3.5 h-3.5 opacity-60 group-hover:opacity-100 transition-opacity'
|
||||
className='w-3.5 h-3.5 text-blue-400
|
||||
opacity-60 group-hover:opacity-100 transition-opacity'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
viewBox='0 0 24 24'>
|
||||
@@ -166,8 +184,11 @@ const RegexGeneralTab = ({
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className='flex items-center justify-center h-[2.5rem] text-sm
|
||||
text-gray-500 dark:text-gray-400 rounded-md border border-dashed border-gray-300 dark:border-gray-600'>
|
||||
className='flex items-center justify-center h-12
|
||||
text-sm text-gray-500 dark:text-gray-400
|
||||
rounded-md border border-dashed
|
||||
border-gray-300 dark:border-gray-700
|
||||
bg-gray-50 dark:bg-gray-800/50'>
|
||||
No tags added yet
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user