funuicss 1.1.0 → 1.2.0

package/src/Components/Modal.js

@@ -1,39 +0,0 @@
-import React from 'react'
-
-export default function Modal({
-    children , 
-    funcss , 
-    animation , 
-    duration , 
-    open,
-    maxWidth,
-    maxHeight,
-    height,
-    width,
-    backdrop
-}) {
-if(open){
-return (
-<div 
-className={`${funcss} modal ${backdrop ? "backdrop" : ""}`} 
-
->
-<div className="modal-content"
-style={{
-    animation:` ${duration}s ${animation}`,
-    maxWidth:maxWidth ? maxWidth : "",
-    maxHeight:maxHeight ? maxHeight : "",
-    width:width ? width : "",
-    height:height ? height : ""
-    }}
-    >
-{children}
-</div> 
-</div>
-)
-}{
-return (
-<div></div>
-)
-}
-}

package/src/Components/Modalaction.js

@@ -1,6 +0,0 @@
-import React from 'react'
-export default function Modalaction({funcss,children}) {
-  return (
-    <div className={`${funcss} modal-action`}>{children}</div>
-  )
-}

package/src/Components/Modalcontent.js

@@ -1,13 +0,0 @@
-import React from 'react'
-export default function Modalcontent({funcss,children,
-  maxWidth,
-  maxHeight,
-  height,
-  width,}) {
-  return (
-    <div className={`modal-body ${funcss} `}style={{
-      maxHeight:maxHeight ? maxHeight : "",
-      height:height ? height : ""
-      }}>{children}</div>
-  )
-}

package/src/Components/Modalheader.js

@@ -1,12 +0,0 @@
-import React from 'react'
-import Div  from './Div';
-import Icon from './Icon';
-export default function Modalheader({funcss,children,close}) {
-  return (
-    <div className={`${funcss} modal-title`}>
-         <Div funcss="fit relative">
-      {children} {close}
-   </Div> 
-      </div>
-  )
-}

package/src/Components/NavBar.jsx

@@ -1,12 +0,0 @@
-
-function Navbar({children ,  fixed , funcss , padding}) {
-return (
-<div>
-<nav className={`navigation-bar ${funcss} ${fixed ? "fixedTop" : ""}`}  style={{padding:`${padding ? padding : ""}`}}>
-{children}
-</nav>
-</div>
-    );
-}
-
-export default Navbar;

package/src/Components/NavLink.jsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import Link  from 'next/link';
-const NavLink = ({children ,funcss , href , text , hoverable}) => {
-return ( 
-<Link href={href}>
-<div  className={`navbar-link ${funcss} ${hoverable ? "hover" : ""}`}>{children} {text}</div>
-</Link>
-);
-}
-export default NavLink;

package/src/Components/NavLogo.js

@@ -1,15 +0,0 @@
-import React , {Component} from "react"
-export default class NavLogo extends Component{
-render(){
-return ( 
-<div className={`
-nav-logo
-${this.props.bg} 
-${this.props.funcss}
-`} 
->
-{this.props.children}
-</div>
-);
-}
-}

package/src/Components/Navcenter.js

@@ -1,14 +0,0 @@
-import React , {Component} from "react"
-export default class Navcenter extends Component{
-render(){
-return ( 
-<div className={`
-${this.props.bg} 
-${this.props.funcss}
-`} 
->
-{this.props.children}
-</div>
-);
-}
-}

package/src/Components/Navleft.js

@@ -1,14 +0,0 @@
-import React , {Component} from "react"
-export default class Navleft extends Component{
-render(){
-return ( 
-<div className={`
-${this.props.bg} 
-${this.props.funcss}
-`} 
->
-{this.props.children}
-</div>
-);
-}
-}

package/src/Components/Panelcontent.js

@@ -1,11 +0,0 @@
-
-import React , {Component} from "react"
-export default class Panelcontent extends Component{
-render(){
-return ( 
-<div className={`slide-panel-content ${this.props.funcss}`}>
-{this.props.children}
-</div>     
-);
-}
-}

package/src/Components/Panelfront.js

@@ -1,11 +0,0 @@
-
-import React , {Component} from "react"
-export default class Panelfront extends Component{
-render(){
-return ( 
-<div className={`slide-panel-image ${this.props.funcss}`}>
-{this.props.children}
-</div>     
-);
-}
-}

package/src/Components/ProgressBar.js

@@ -1,18 +0,0 @@
-import React from 'react'
-export default function ProgressBar({funcss , progress , height , children , content , bg , lined}) {
-  return (
-    <>
-    {
-      lined ?
-      <div  className={` ${funcss} progressBar lined ${bg}`} >
-        {children} {content}
-      <div className={` ${funcss} ${bg} linedProgress text-smaller`}  style={{width:`${progress}%` , height:`${height}px`}}></div>
-  </div>
-  :
-  <div className='progressBar'>
-  <div className={` ${funcss} progressInner ${bg} text-smaller`} style={{width:`${progress}%` , height:`${height}px` , padding:`${parseInt(progress) > 0 ? "0 1rem" : ""}`}}>{children} {content}</div>
-</div>
-    }
-    </> 
-  )
-}

package/src/Components/Roller.js

@@ -1,10 +0,0 @@
-import React from 'react'
-export default function LoadSpan({funcss , width , height}) {
-  return (
-    <div className="roller" style={{width:`${width}px` , height:`${height}px`}}>
-        <div className={`${funcss}`}></div>
-        <div className={`${funcss}`}></div>
-        <div className={`${funcss}`}></div>
-    </div>
-  )
-}

package/src/Components/RowFlex.js

@@ -1,9 +0,0 @@
-import React from 'react'
-const RowFlex = ({children ,funcss , content , justify}) => {
-return ( 
-<div className={`row-flex ${funcss} ${justify}`}>
-{children} {content}
-</div>
-);
-}
-export default RowFlex;

package/src/Components/Section.js

@@ -1,9 +0,0 @@
-import React from 'react'
-const Section = ({children , funcss}) => {
-return ( 
-<div className={funcss} style={{paddingTop:"5px" , paddingBottom:"5px"}}>
-{children}
-</div>
-);
-}
-export default Section;

package/src/Components/Sidebar.js

@@ -1,203 +0,0 @@
-import React from 'react';
-import Logo from './Logo';
-import {useState} from "react"
-import { useRouter } from 'next/router';
-import Link from "next/link"
-function Sidebar() {
-   const Router = useRouter()
-   let links = [
-    {
-        text:"Home",
-        path:""
-    } ,
-    {
-        text:"Components",
-        path:"components"
-    } ,
-        {
-            text:"Getting Started",
-            path:"gettingstarted"
-        } ,
-        {
-            text:"Colors",
-            path:"colors"
-        } ,
-        {
-            text:"Typography",
-            path:"typography"
-        } ,
-        {
-            text:"Helpers",
-            path:"helpers"
-        },
-        {
-            text:"Show And Hide",
-            path:"show-hide"
-        },
-        {
-            text:"Icons",
-            path:"icons"
-        } ,
-        {
-            text:"Container",
-            path:"container"
-        } ,
-        {
-            text:"Grid",
-            path:"grid"
-        } ,
-        {
-            text:"Buttons",
-            path:"buttons"
-        } ,
-        {
-            text:"Card",
-            path:"card"
-        },
-        {
-            text:"Slide Panel",
-            path:"slidepanel"
-        } ,
-        {
-            text:"Inputs",
-            path:"input"
-        } ,
-        {
-            text:"Table",
-            path:"table"
-        } ,
-        {
-            text:"List",
-            path:"list"
-        } ,
-        {
-            text:"Alerts",
-            path:"alerts"
-        } ,
-        {
-            text:"Modal",
-            path:"modal"
-        } ,
-        {
-            text:"Dropdown",
-            path:"dropdown"
-        },
-        {
-            text:"Progress Bar",
-            path:"progress"
-        },
-        {
-            text:"Snackbar",
-            path:"snackbars"
-        },
-        {
-            text:"Tooltip",
-            path:"tooltip"
-        },
-        {
-            text:"Navigation bar",
-            path:"navigation"
-        },
-        // {
-        //     text:"Slider",
-        //     path:"slider"
-        // },
-        {
-            text:"About",
-            path:"about"
-        } 
-    ]
-
-    //handlesidebar
-    const [width, setwidth] = useState("0px");
-    const [display, setdisplay] = useState('none');
-    const Handlesidebar = ()=>{
-     if(width === "200px"){
-         setwidth("0px")
-    }else{
-         setwidth("200px")
-    }
-    }
-    const [search, setsearch] = useState('');
-    return (
-        <div className="">
-
-              <div className="open-sidebar">
-            <span className="material-icons icon size-2 pointer" onClick={Handlesidebar} >
-               menu
-            </span>
-              </div>
-              <div className="SideBar glass">
-              <div className="section padding ">
-                      <input className="input search width-100-p padding-top-10 padding-bottom-10 text-center" onChange={(e)=>setsearch(e.target.value)} placeholder="Search..." />
-             </div>
-
-                <div className="sidecontent ">
-                  
-                <div className="section padding">
-
-{
-   links.filter(text=>{
-   if(search === ''){
-       return links;
-   }else if (
-   text.text.toLowerCase().trim().includes(search.toLowerCase().trim())
-   ){
-       return links
-   }
-   }).map(link=>(
-  <div className="padding" key={link.text.trim()}>
-      <Link href={`/${link.path}`}>
-          <a className="sidebar-link">
-              <div>{link.text}</div>
-        </a>
-      </Link>
-
-  </div>
-    ))
-}
-
-</div>
-                </div>
-   
-              </div>
-              <div className="SideBar fixed" style={{width : `${width}`}}>
-              <div className="section padding ">
-                      <input className="input search width-100-p padding-top-10 padding-bottom-10 text-center" onChange={(e)=>setsearch(e.target.value)} placeholder="Search..." />
-             </div>
-
-                <div className="sidecontent">
-                  
-                <div className="section padding">
-
-{
-   links.filter(text=>{
-   if(search === ''){
-       return links;
-   }else if (
-   text.text.toLowerCase().trim().includes(search.toLowerCase().trim())
-   ){
-       return links
-   }
-   }).map(link=>(
-  <div  className="sidebar-link" key={link.text.trim()}>
-      
-      <Link href={`/${link.path}`}>
-          <a className='text-black hover-text-indigo'>
-          <div className='padding'>{link.text}</div>
-          </a>
-      </Link>
-
-  </div>
-    ))
-}
-
-</div>
-                </div>
-   
-              </div>
-        </div>
-    );
-}
-
-export default Sidebar;

package/src/Components/SidebarTrigger.js

@@ -1,15 +0,0 @@
-import React , {Component} from "react"
-export default class SidebarTrigger extends Component{
-render(){
-return ( 
-<div className={`
-sidebar-trigger
-${this.props.funcss}
-`} 
-onClick={this.props.onClick}
->
-{this.props.children}{this.props.content}
-</div>
-);
-}
-}

package/src/Components/Slidepanel.js

@@ -1,11 +0,0 @@
-
-import React , {Component} from "react"
-export default class Slidepanel extends Component{
-render(){
-return ( 
-<div className={`slide-panel slide-${this.props.slide} ${this.props.funcss}`}>
-{this.props.children}
-</div>     
-);
-}
-}

package/src/Components/Snackbar.js

@@ -1,28 +0,0 @@
-import { useEffect,useState } from "react"
-const Snackbar = ({message, close , timeOut , open ,position , funcss , animation , duration}) => {
-
-
-if(open){
-return ( 
-<div>
-<div className={`snackbar ${position} ${funcss}`} style={{animation:` ${duration}s ${animation}`}}>
-<div className="snackbar-content">
-<div className="snackbar-body">
-{message}
-</div>
-<div>
-<span className="close-snackbar">
-<span>{close}</span>
-</span>
-</div>
-
-</div>
-</div>
-</div>
-);
-}else{
-    <div></div>
-}
-}
-
-export default Snackbar;

package/src/Components/Table.js

@@ -1,17 +0,0 @@
-import React from 'react'
-const Table = ({children , funcss , bordered , stripped , hoverable , showTotal , data}) => {
-return ( 
-<table className={`table ${funcss}  ${bordered ? "border" : ""}  ${stripped ? "stripped" : ""}  ${hoverable ? "hoverable" : ""}`}>
-{children}
-
-
-{
-    showTotal &&
-<tr className="borderless">
-<td className="padding borderless text-bold">  Total  {children.length - 1} </td>
-</tr>
-}
-</table>
-);
-}
-export default Table;

package/src/Components/TableBody.js

@@ -1,9 +0,0 @@
-import React from 'react'
-const TableBody = ({children , funcss}) => {
-return ( 
-<tbody className={`${funcss}`}>
-{children}
-</tbody>
-);
-}
-export default TableBody;

package/src/Components/TableData.js

@@ -1,9 +0,0 @@
-import React from 'react'
-const TableData = ({children , funcss}) => {
-return ( 
-<td className={`${funcss}`}>
-{children}
-</td>
-);
-}
-export default TableData;

package/src/Components/TableHead.js

@@ -1,9 +0,0 @@
-import React from 'react'
-const TableHead = ({children , funcss}) => {
-return ( 
-<thead className={`${funcss}`}>
-{children}
-</thead>
-);
-}
-export default TableHead;

package/src/Components/TableRow.js

@@ -1,9 +0,0 @@
-import React from 'react'
-const TableRow = ({children , funcss}) => {
-return ( 
-<tr className={`${funcss}`}>
-{children}
-</tr>
-);
-}
-export default TableRow;

package/src/Components/Tip.js

@@ -1,7 +0,0 @@
-import React from 'react'
-
-export default function Tip({tip , funcss, children , content , animation , duration }) {
-  return (
-    <span className={`tip-${tip} tip ${funcss}`}  style={{animation:` ${duration}s ${animation}`}}>{children} {content}</span>
-  )
-}

package/src/Components/ToolTip.js

@@ -1,9 +0,0 @@
-const ToolTip = ({funcss , children}) => {
-    return ( 
-    <span className={`tooltip ${funcss}`}>
-        {children}
-    </span> 
-    );
-}
- 
-export default ToolTip;

package/src/Components/Typography.js

@@ -1,38 +0,0 @@
-import React from 'react'
-export default function Typography({size ,
-    bg ,
-    color, 
-    children , 
-    hoverBg, 
-    hoverText , 
-    text , 
-    heading , 
-    funcss, 
-    emp,
-    bold,
-    block
-}) {
-return (
-<span className={`
-text-${size} 
-text-${color}
-${bg}
-hover-text-${hoverText}
-hover-${hoverBg}
-${heading}
-${funcss}
-${emp ? "emp" : ""}
-${bold ? "bold" : ""}
-`}
-style={{
-    display:block ? "block" : "",
-    transition:"0.2s linear",
-    fontWeight:`${bold ? "bold" : ""}`
-}}
->
-{children}
-{text}
-</span>
-)
-}
-

package/src/index.js

@@ -1,44 +0,0 @@
-import React from 'react'
-
-export default function Button({color , 
-    bg, 
-    funcss , 
-    size, 
-    onChange , 
-    onClick, 
-    startIcon, 
-    endIcon , 
-    children, 
-    text,
-    rounded,
-    raised,
-    height,
-    width,
-    float
-}) {
-return (
-<button className={`button
-text-${color}
-${bg} 
-${funcss}
-${size}
-${rounded ? "roundBtn" : ""}
-${float ? "floatBtn" : ""}
-${raised ? "card" : ""}
-`} 
-onClick={onClick}
-onChange={onChange}
-style={{
-    height:height ? height : "",
-    width:width ? width : ""
-}}
->
-{startIcon} &nbsp;
-{text}
-{children} &nbsp;
-{endIcon}
-</button>
-)
-}
-
-