Merge pull request #166 from turistikrota/feature/modal-body-rounds

Feature/modal body rounds

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turistikrota/ui",
-  "version": "1.3.5",
+  "version": "1.3.9",
   "description": "the turistikrota ui library for React",
   "main": "./index.js",
   "module": "./index.js",

packages/ui/src/badge/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { FormSize, FullVariant, FullVariantClasses } from '../types'
+import { FormSize, FullSolidVariantClasses, FullVariant, FullVariantClasses } from '../types'
 
 type Props = {
   variant?: FullVariant
   className?: string
   size?: FormSize
+  solid?: boolean
 }
 
 const SizeClasses: Record<FormSize, string> = {
@@ -13,12 +14,18 @@ const SizeClasses: Record<FormSize, string> = {
   lg: 'px-4 py-2 text-base rounded-lg',
 }
 
-const Badge: React.FC<React.PropsWithChildren<Props>> = ({ variant = 'default', size = 'md', className, children }) => {
+const Badge: React.FC<React.PropsWithChildren<Props>> = ({
+  variant = 'default',
+  size = 'md',
+  solid = false,
+  className,
+  children,
+}) => {
   return (
     <span
-      className={`inline-flex items-center font-semibold ${SizeClasses[size]} ${FullVariantClasses[variant]} ${
-        className ? className : ''
-      }`}
+      className={`inline-flex items-center font-semibold ${SizeClasses[size]} ${
+        solid ? FullSolidVariantClasses[variant] : FullVariantClasses[variant]
+      } ${className ? className : ''}`}
     >
       {children}
     </span>

packages/ui/src/breadcrumb/index.tsx

@@ -0,0 +1,104 @@
+import Button from '../button'
+import React, { FC, PropsWithChildren } from 'react'
+
+type Props = PropsWithChildren<{
+  className?: string
+  actions?: React.ReactNode
+}>
+
+export type LinkProps = PropsWithChildren<{
+  href: string
+  className?: string
+}>
+
+type ActionProps = PropsWithChildren<{
+  href: string
+  icon?: string
+  Link?: FC<PropsWithChildren<LinkProps>>
+}>
+
+type ItemProps = PropsWithChildren<{
+  currentPath?: string
+  href?: string
+  icon?: string
+  Link?: FC<PropsWithChildren<LinkProps>>
+}>
+
+type BreadcrumbType = FC<Props> & {
+  Action: FC<ActionProps>
+  Item: FC<ItemProps>
+  Link: FC<LinkProps>
+}
+
+const NativeLink: FC<LinkProps> = ({ href, className, children }) => {
+  return (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  )
+}
+
+const Action: FC<ActionProps> = ({ href, children, icon, Link = NativeLink }) => {
+  return (
+    <div className='flex items-center justify-end px-2 py-2'>
+      <Link href={href}>
+        <Button size='md' className='flex  items-center justify-center gap-1'>
+          {icon && <i className={`bx bx-sm md:bx-xs ${icon}`} />}
+          <span className='hidden md:inline'>{children}</span>
+        </Button>
+      </Link>
+    </div>
+  )
+}
+
+const Item: FC<ItemProps> = ({ href, children, icon, currentPath = '', Link = NativeLink }) => {
+  const active = currentPath === href
+  if (!href)
+    return (
+      <li aria-current='page'>
+        <div className='flex items-center'>
+          <i className={`bx ${icon ? icon : 'bx-chevron-right'} bx-sm text-gray-400 dark:text-gray-200`} />
+          <span className='text-sm font-medium text-gray-500 dark:text-gray-200'>{children}</span>
+        </div>
+      </li>
+    )
+
+  return (
+    <li className='group inline-flex items-center'>
+      <Link
+        href={href}
+        className={`group-hover:text-primary-500 inline-flex items-center text-sm font-medium text-gray-700 transition-colors duration-200 dark:text-gray-300 ${
+          active ? 'text-primary-500' : ''
+        }`}
+      >
+        <i
+          className={`bx ${
+            icon ? icon + ' bx-xs mr-2' : 'bx-chevron-right bx-sm'
+          } group-hover:text-primary-500 text-gray-400 transition-colors duration-200 dark:text-gray-300 ${
+            active ? 'text-primary-500' : ''
+          }`}
+        />
+        {children}
+      </Link>
+    </li>
+  )
+}
+
+const Breadcrumb: BreadcrumbType = ({ className, actions, children }) => {
+  return (
+    <nav
+      className={`bg-second animate-fade-in-from-top flex justify-between rounded-md border text-gray-700 duration-200 dark:text-gray-300 ${
+        className ? className : ''
+      }`}
+    >
+      <ol className='inline-flex flex-wrap items-center gap-x-1 gap-y-2 px-5 py-4'>{children}</ol>
+      {actions}
+    </nav>
+  )
+}
+
+Breadcrumb.Action = Action
+Breadcrumb.Item = Item
+Breadcrumb.Link = NativeLink
+
+export default Breadcrumb

packages/ui/src/modal/index.tsx

@@ -56,7 +56,7 @@ function CloseButton({ onClose, title }: CloseableProps) {
 
 function Body({ children }: React.PropsWithChildren) {
   return (
-    <div className='bg-default scrollbar w-full grow overflow-hidden overflow-y-auto border-l border-r p-2'>
+    <div className='bg-default scrollbar w-full grow overflow-hidden overflow-y-auto border-l border-r p-2  last-of-type:rounded-b-md'>
       {children}
     </div>
   )

packages/ui/src/types/index.ts

@@ -112,6 +112,22 @@ export const FullVariantClasses: Record<FullVariant, string> = {
   teal: 'bg-teal-100 bg-opacity-50 text-teal-500 dark:bg-teal-500 dark:bg-opacity-10 dark:text-teal-100',
 }
 
+export const FullSolidVariantClasses: Record<FullVariant, string> = {
+  success: 'bg-green-500 text-white',
+  warning: 'bg-yellow-500 text-white',
+  danger: 'bg-red-500 text-white',
+  primary: 'bg-blue-500 text-white',
+  default: 'bg-second text-white',
+  secondary: 'bg-secondary-500 text-white',
+  yellow: 'bg-yellow-500 text-white',
+  blue: 'bg-blue-500 text-white',
+  green: 'bg-green-500 text-white',
+  purple: 'bg-purple-500 text-white',
+  orange: 'bg-orange-500 text-white',
+  indigo: 'bg-indigo-500 text-white',
+  teal: 'bg-teal-500 text-white',
+}
+
 export function isSize(size: string): size is Size {
   return Object.keys(TextSize).includes(size)
 }