funuicss 1.1.0

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "funuicss",
+  "version": "1.1.0",
+  "description": "React ui framework for creating reponsive and nice looking websites and apps.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "author": "FunInc",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "style-loader": "^3.3.2",
+    "webpack": "^5.80.0",
+    "webpack-cli": "^5.0.2"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/src/Components/Alert.js

@@ -0,0 +1,68 @@
+import React from 'react'
+export default function Alert({message, funcss , type , outlined}) {
+return (
+<div>
+{
+outlined ?
+<div className={`alert ${type}-outline`}>
+<div className="alert-icon">
+{
+type === "success" &&
+<i className="fa fa-check"></i>
+}
+{
+type === "info" &&
+<i className="fa fa-info-circle"></i>
+}
+{
+type === "warning" &&
+<i className="fa fa-exclamation-triangle"></i>
+}
+{
+type === "danger" &&
+<i className="far fa-times-circle" ></i>
+}
+</div>
+<div className="alert-text">
+{message}
+</div>
+</div>
+:""
+}
+
+{
+!outlined ?
+
+<div className={`alert ${funcss} ${type} `}>
+<div className="alert-icon">
+{
+type === "success" &&
+<i className="fa fa-check"></i>
+}
+{
+type === "info" &&
+<i className="fa fa-info-circle"></i>
+}
+{
+type === "warning" &&
+<i className="fa fa-exclamation-triangle"></i>
+}
+{
+type === "danger" &&
+<i className="far fa-times-circle" ></i>
+}
+</div>
+<div className="alert-text">
+{message}
+</div>
+</div>
+:""
+}
+</div>
+
+
+)
+
+
+
+}

package/src/Components/Anchor.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import Link  from 'next/link';
+const Anchor = ({children ,funcss , href , text}) => {
+return ( 
+<Link href={href}>
+<a className={` ${funcss}`}>
+{children} {text}
+</a>
+</Link>
+);
+}
+export default Anchor;

package/src/Components/Avatar.js

@@ -0,0 +1,11 @@
+import React from 'react'
+export default function Avatar({funcss ,children , width, height , bg , content}) {
+  return (
+    <button className={`button circle padding ${funcss} ${bg}`} style={{
+        width:`${width}`,
+        height:`${height}`
+    }}>
+        {children}{content}
+    </button>
+  )
+}

package/src/Components/Bg.js

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

package/src/Components/Breadcrumb.js

@@ -0,0 +1,24 @@
+import React from 'react'
+
+export default function Breadcumb({type , funcss}) {
+  return (
+   <span>
+       {
+           type === "slash" &&
+           <span className={`text-bold padding-left-5 padding-right-5 ${funcss}`}> / </span>
+       } 
+       {
+           type === "greater" &&
+           <span className={`text-bold padding-left-5 padding-right-5 ${funcss}`}> {`>`} </span>
+       } 
+       {
+           type === "less" &&
+           <span className={`text-bold padding-left-5 padding-right-5 ${funcss}`}> {`<`} </span>
+       } 
+       {
+           type === "straight" &&
+           <span className={`text-bold padding-left-5 padding-right-5 ${funcss}`}> {`|`} </span>
+       } 
+   </span>
+  )
+}

package/src/Components/Button.js

@@ -0,0 +1,44 @@
+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>
+)
+}
+
+

package/src/Components/Card.js

@@ -0,0 +1,37 @@
+const Card = ({
+color,
+bg , 
+width, 
+height, 
+minHeight ,
+minWidth,
+margin,
+padding,
+funcss,
+children,
+roundEdge,
+maxHeight,
+maxWidth
+// fab
+}) => {
+return ( 
+<div className={`card text-${color} ${bg} ${funcss} ${roundEdge ? "round-edge" : ""}`}
+style={{
+width:`${width ? width : ""}`, 
+height:`${height ? height : ""}`,
+minHeight:`${minHeight ? minHeight : ""}`,
+minWidth:`${minWidth ? minWidth : ""}`,
+maxHeight:maxHeight ? maxHeight : "",
+maxWidth:maxWidth ? maxWidth : "",
+margin:`${margin ? margin : ""}`,
+padding:`${padding ? padding : ""}`
+
+}}
+>
+{children}
+
+</div>
+);
+}
+
+export default Card;

package/src/Components/CloseModal.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Icon from './Icon';
+
+export default function CloseModal({funcss , onClick}) {
+  return (
+    <div className={`${funcss} closeModal`} onClick={onClick}>
+    <Icon icon="fas fa-times" /> 
+    </div>
+  )
+}

package/src/Components/Col.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Col({sm,md,lg,children , funcss}) {
+  return (
+    <div className={`col sm-${sm} md-${md} lg-${lg} ${funcss}`}>
+      {children}
+    </div>
+  )
+}

package/src/Components/Color.js

@@ -0,0 +1,6 @@
+import React from 'react'
+export default function Color({color ,children}) {
+  return (
+    <span className={`text-${color}`}>{children}</span>
+  )
+}

package/src/Components/Container.js

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

package/src/Components/Div.js

@@ -0,0 +1,31 @@
+import React from 'react'
+const Container = ({
+    children ,
+    funcss , 
+    content, 
+    minHeight, 
+    maxHeight, 
+    maxWidth, 
+    minWidth, 
+    height,
+    width,
+    padding,
+    margin,
+    fit
+}) => {
+return ( 
+<div className={`${fit ? "width-100-p height-100-p" : ""} ${funcss}`} style={{
+    height:height ? height : "",
+    maxHeight:maxHeight ? maxHeight : "",
+    minHeight:minHeight ? minHeight : "",
+    maxWidth:maxWidth ? maxWidth : "",
+    minWidth:minWidth ? minWidth : "",
+    width:width ? width : "",
+    padding:padding ? padding : "",
+    margin:margin  ? margin : ""
+}}>
+{children} {content}
+</div>
+);
+}
+export default Container;

package/src/Components/DropAction.js

@@ -0,0 +1,8 @@
+import React from 'react'
+export default function DropAction({children , funcss}) {
+  return (
+   <div className={`drop-button ${funcss}`}>
+       {children}
+   </div>
+  )
+}

package/src/Components/DropMenu.js

@@ -0,0 +1,8 @@
+import React from 'react'
+export default function DropMenu({children , funcss  , hoverable , duration , animation}) {
+  return (
+   <div className={`drop-menu ${funcss} item-${hoverable}`} style={{animation:` ${duration}s ${animation}`}}>
+       {children}
+   </div>
+  )
+}

package/src/Components/Dropdown.js

@@ -0,0 +1,9 @@
+import React from "react"
+const Dropdown = ({funcss, children})=>{
+    return(
+        <div className={`dropdown-hover ${funcss}`}>
+            {children}
+        </div>
+    )
+}
+export default Dropdown

package/src/Components/Dropitem.js

@@ -0,0 +1,8 @@
+import React from 'react'
+export default function DropItem({children , funcss}) {
+  return (
+   <div className={`${funcss} drop-item`}>
+       {children}
+   </div>
+  )
+}

package/src/Components/Dropup.js

@@ -0,0 +1,9 @@
+import React from "react"
+const Dropup = ({funcss, children})=>{
+    return(
+        <div className={`dropup-hover ${funcss}`}>
+            {children}
+        </div>
+    )
+}
+export default Dropup

package/src/Components/Ellipsis.js

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

package/src/Components/Footer.js

@@ -0,0 +1,62 @@
+import Link from "next/link";
+import Logo from "./Logo"
+import Button from "../Funcss/Components/Button"
+import Card from "../Funcss/Components/Card"
+function Footer() {
+    const year = new Date().getFullYear()
+    return (
+        <footer  className="padding-top-50 padding-bottom-20 text-small">
+          <div className="container">
+            <div className="row">
+              <div className="col sm-12 md-8 lg-8 padding">
+              <div className="section">
+              <div><Logo /></div>
+              Fun css is a modern responsive css framework, it will ease your work in developing
+              websites, it comes with pre-defined class names which are use to style your website. 
+              {/* You can download the framework for free and use our website themes and components for free. */}
+              <div className="section">
+              <a href="/app/funcss.apk">
+              {/* <button className="button success text-white">
+              <i className="fab fa-android"></i> Download Android
+              </button> */}
+              <Card>
+              <Button color="indigo" text="Download Android"/>
+                </Card>
+              </a>
+              </div>
+          
+            </div>
+              </div>
+              <div className="col sm-12 md-4 lg-4">
+                <div className="padding">
+                <div className="h4 padding">Guides</div>
+                <div className="hr"></div>
+                <Link href="/gettingstarted">
+                  <a className="text-black"><div className="button padding">Getting Started</div></a>
+                </Link>
+                <Link href="/themes">
+                  <a className="text-black"><div className="button padding">Our Themes</div></a>
+                </Link>
+                <a className="text-black"  href="https://github.com/fun-css"><div className="button padding">Our Github Repo</div></a>
+                </div>
+              </div>
+            </div>
+
+          <div className="row">
+              <div className="col sm-12 md-8 lg-8">
+              <div className="padding">
+                &copy;{year} Funcss, All rights reserved
+            </div>
+              </div>
+              <div className="col sm-12 md-4 lg-4">
+               <div className="padding">
+                 <a className="text-black" href="https://github.com/fun-css/funcss/blob/main/LICENSE">MIT License</a>
+               </div>
+              </div>
+          </div>
+          </div>
+        </footer>
+    );
+}
+
+export default Footer;

package/src/Components/Grid.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default function Grid({children , funcss , gap , centered}) {
+  return (
+    <div className={`row ${funcss} ${gap ? "gap" : ""} `}
+    style={{justifyContent:centered ? "center" : ""}}
+    >
+        {children}
+    </div>
+  )
+}

package/src/Components/Hr.js

@@ -0,0 +1,9 @@
+import React from 'react'
+const Hr = ({children}) => {
+return ( 
+<div className='hr'>
+{children}
+</div>
+);
+}
+export default Hr;

package/src/Components/Icon.js

@@ -0,0 +1,6 @@
+import React from 'react'
+export default function Icon({funcss,icon,color,size }) {
+  return (
+    <i className={`icon ${icon} ${funcss} text-${color} size-${size} `} ></i>
+  )
+}

package/src/Components/IconicInput.js

@@ -0,0 +1,22 @@
+import React from 'react'
+export default function IconicInput({funcss , children , position, icon , input ,iconicBg}) {
+  return (
+    <div className={`icon-container ${funcss} ${position}`}>
+      {
+        position == "left" ?
+      <div className={`leftIcon`} 
+      style={{backgroundColor:iconicBg ? iconicBg : ""}}
+      >{position == "left" ? icon : ""}</div>
+      :""
+      }
+      {children} {input} 
+     {
+      position == "right" ?
+      <div className="rightIcon"
+      style={{backgroundColor:iconicBg ? iconicBg : ""}}
+      >{position == "right" ? icon : ""}</div>
+      :""
+     }
+    </div>
+  )
+}

package/src/Components/Input.js

@@ -0,0 +1,150 @@
+
+import React , {Component} from "react"
+export default class Input extends Component{
+render(){
+if(this.props.select){
+    if(this.props.bordered){
+        return ( 
+        <select className={`
+        input
+        ${this.props.funcss}
+        bordered
+        `} 
+        onChange={this.props.onChange}
+        defaultValue = {this.props.defaultValue}
+        type={this.props.type}
+        name={this.props.name}
+  
+        style={{
+            borderRadius:`${this.props.rounded ? "400rem" : ""}`,
+            width:`${this.props.fullWidth ? "100%" : ""}`
+
+        }}
+        value={this.props.value}
+        >
+        {
+            this.props.options ? this.props.options.map(doc=>(
+                <option value={doc.value} key={doc.value}>{doc.text}</option>
+            )):""
+        }
+        </select>
+        );   
+        }else if (this.props.bordereless){
+        return ( 
+        <select className={`
+        input
+        ${this.props.funcss}
+        borderless
+        `} 
+        onChange={this.props.onChange}
+        defaultValue = {this.props.defaultValue}
+        type={this.props.type}
+        placeholder={this.props.label}
+        name={this.props.name}
+        value={this.props.value}
+        style={{
+            borderRadius:`${this.props.rounded ? "400rem" : ""}`,
+            width:`${this.props.fullWidth ? "100%" : ""}`
+
+        }}
+        >
+      {
+            this.props.options ? this.props.options.map(doc=>(
+                <option value={doc.value} key={doc.value}>{doc.text}</option>
+            )):""
+        }
+        </select>
+        );
+        }else{
+        return ( 
+        <select className={`
+        input
+        ${this.props.funcss}
+        `} 
+        onChange={this.props.onChange}
+        defaultValue = {this.props.defaultValue}
+        type={this.props.type}
+        placeholder={this.props.label}
+        name={this.props.name}
+        value={this.props.value}
+        style={{
+            borderRadius:`${this.props.rounded ? "400rem" : ""}`,
+            width:`${this.props.fullWidth ? "100%" : ""}`
+
+        }}
+        >
+     {
+            this.props.options ? this.props.options.map(doc=>(
+                <option value={doc.value} key={doc.value}>{doc.text}</option>
+            )):""
+        }
+        </select>
+        
+        );
+        }   
+}else{
+    if(this.props.bordered){
+        return ( 
+        <input className={`
+        input
+        ${this.props.funcss}
+        bordered
+        `} 
+        onChange={this.props.onChange}
+        defaultValue = {this.props.defaultValue}
+        type={this.props.type}
+        placeholder={this.props.label}
+        name={this.props.name}
+        style={{
+            borderRadius:`${this.props.rounded ? "400rem" : ""}`,
+            width:`${this.props.fullWidth ? "100%" : ""}`
+        }}
+        value={this.props.value}
+        />
+        
+        );   
+        }else if (this.props.bordereless){
+        return ( 
+        <input className={`
+        input
+        ${this.props.funcss}
+        borderless
+        `} 
+        onChange={this.props.onChange}
+        defaultValue = {this.props.defaultValue}
+        type={this.props.type}
+        placeholder={this.props.label}
+        name={this.props.name}
+        value={this.props.value}
+        style={{
+            borderRadius:`${this.props.rounded ? "400rem" : ""}`,
+            width:`${this.props.fullWidth ? "100%" : ""}`
+
+        }}
+        />
+        
+        );
+        }else{
+        return ( 
+        <input className={`
+        input
+        ${this.props.funcss}
+        `} 
+        onChange={this.props.onChange}
+        defaultValue = {this.props.defaultValue}
+        type={this.props.type}
+        placeholder={this.props.label}
+        name={this.props.name}
+        value={this.props.value}
+        style={{
+            borderRadius:`${this.props.rounded ? "400rem" : ""}`,
+            width:`${this.props.fullWidth ? "100%" : ""}`
+
+        }}
+        />
+        
+        );
+        }
+}
+}
+}

package/src/Components/Layout.js

@@ -0,0 +1,30 @@
+import Sidebar from './Sidebar';
+import Navbar from './Navbar';
+import Footer from './Footer';
+import Head  from 'next/head';
+import Script from 'next/script'
+import { useEffect, useState } from 'react';
+const Layout = ({children}) => {
+
+    return (  
+        <div  lang="en">
+      <Script src="/js/ads.js" />
+    
+      {/* <Script src="/js/jQuery.js"/> */}
+      <Script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossOrigin="anonymous" />
+     
+ 
+            <Navbar />
+        <div className="Page">
+            <Sidebar />
+            <div className="Content">
+
+                {children}
+            </div>
+         
+        </div>
+        </div>
+    );
+}
+ 
+export default Layout;