diff --git a/package.json b/package.json index 5117bbd64..681bfc3ae 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react": "^18.2.0", "react-app-polyfill": "^3.0.0", "react-dom": "^18.2.0", + "react-icons": "^4.4.0", "react-redux": "^8.0.2", "react-router-dom": "^6.3.0", "redux": "4.2.0", diff --git a/src/_nav.js b/src/_nav.js index 8f3d730db..eb747665b 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,305 +1,298 @@ import React from 'react' import CIcon from '@coreui/icons-react' -import { - cilBell, - cilCalculator, - cilChartPie, - cilCursor, - cilDescription, - cilDrop, - cilNotes, - cilPencil, - cilPuzzle, - cilSpeedometer, - cilStar, -} from '@coreui/icons' +import { cilHeart, cilCloudUpload } from '@coreui/icons' +// import {MdCloudUpload} from 'react-icons/md' import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react' const _nav = [ { component: CNavItem, - name: 'Dashboard', - to: '/dashboard', - icon: , + name: 'Upload File', + to: '/upload', + icon: , badge: { color: 'info', text: 'NEW', }, }, - { - component: CNavTitle, - name: 'Theme', - }, - { - component: CNavItem, - name: 'Colors', - to: '/theme/colors', - icon: , - }, - { - component: CNavItem, - name: 'Typography', - to: '/theme/typography', - icon: , - }, - { - component: CNavTitle, - name: 'Components', - }, - { - component: CNavGroup, - name: 'Base', - to: '/base', - icon: , - items: [ - { - component: CNavItem, - name: 'Accordion', - to: '/base/accordion', - }, - { - component: CNavItem, - name: 'Breadcrumb', - to: '/base/breadcrumbs', - }, - { - component: CNavItem, - name: 'Cards', - to: '/base/cards', - }, - { - component: CNavItem, - name: 'Carousel', - to: '/base/carousels', - }, - { - component: CNavItem, - name: 'Collapse', - to: '/base/collapses', - }, - { - component: CNavItem, - name: 'List group', - to: '/base/list-groups', - }, - { - component: CNavItem, - name: 'Navs & Tabs', - to: '/base/navs', - }, - { - component: CNavItem, - name: 'Pagination', - to: '/base/paginations', - }, - { - component: CNavItem, - name: 'Placeholders', - to: '/base/placeholders', - }, - { - component: CNavItem, - name: 'Popovers', - to: '/base/popovers', - }, - { - component: CNavItem, - name: 'Progress', - to: '/base/progress', - }, - { - component: CNavItem, - name: 'Spinners', - to: '/base/spinners', - }, - { - component: CNavItem, - name: 'Tables', - to: '/base/tables', - }, - { - component: CNavItem, - name: 'Tooltips', - to: '/base/tooltips', - }, - ], - }, - { - component: CNavGroup, - name: 'Buttons', - to: '/buttons', - icon: , - items: [ - { - component: CNavItem, - name: 'Buttons', - to: '/buttons/buttons', - }, - { - component: CNavItem, - name: 'Buttons groups', - to: '/buttons/button-groups', - }, - { - component: CNavItem, - name: 'Dropdowns', - to: '/buttons/dropdowns', - }, - ], - }, - { - component: CNavGroup, - name: 'Forms', - icon: , - items: [ - { - component: CNavItem, - name: 'Form Control', - to: '/forms/form-control', - }, - { - component: CNavItem, - name: 'Select', - to: '/forms/select', - }, - { - component: CNavItem, - name: 'Checks & Radios', - to: '/forms/checks-radios', - }, - { - component: CNavItem, - name: 'Range', - to: '/forms/range', - }, - { - component: CNavItem, - name: 'Input Group', - to: '/forms/input-group', - }, - { - component: CNavItem, - name: 'Floating Labels', - to: '/forms/floating-labels', - }, - { - component: CNavItem, - name: 'Layout', - to: '/forms/layout', - }, - { - component: CNavItem, - name: 'Validation', - to: '/forms/validation', - }, - ], - }, + // { + // component: CNavTitle, + // name: 'Theme', + // }, + // { + // component: CNavItem, + // name: 'Colors', + // to: '/theme/colors', + // icon: , + // }, + // { + // component: CNavItem, + // name: 'Typography', + // to: '/theme/typography', + // icon: , + // }, + // { + // component: CNavTitle, + // name: 'Components', + // }, + // { + // component: CNavGroup, + // name: 'Base', + // to: '/base', + // icon: , + // items: [ + // { + // component: CNavItem, + // name: 'Accordion', + // to: '/base/accordion', + // }, + // { + // component: CNavItem, + // name: 'Breadcrumb', + // to: '/base/breadcrumbs', + // }, + // { + // component: CNavItem, + // name: 'Cards', + // to: '/base/cards', + // }, + // { + // component: CNavItem, + // name: 'Carousel', + // to: '/base/carousels', + // }, + // { + // component: CNavItem, + // name: 'Collapse', + // to: '/base/collapses', + // }, + // { + // component: CNavItem, + // name: 'List group', + // to: '/base/list-groups', + // }, + // { + // component: CNavItem, + // name: 'Navs & Tabs', + // to: '/base/navs', + // }, + // { + // component: CNavItem, + // name: 'Pagination', + // to: '/base/paginations', + // }, + // { + // component: CNavItem, + // name: 'Placeholders', + // to: '/base/placeholders', + // }, + // { + // component: CNavItem, + // name: 'Popovers', + // to: '/base/popovers', + // }, + // { + // component: CNavItem, + // name: 'Progress', + // to: '/base/progress', + // }, + // { + // component: CNavItem, + // name: 'Spinners', + // to: '/base/spinners', + // }, + // { + // component: CNavItem, + // name: 'Tables', + // to: '/base/tables', + // }, + // { + // component: CNavItem, + // name: 'Tooltips', + // to: '/base/tooltips', + // }, + // ], + // }, + // { + // component: CNavGroup, + // name: 'Buttons', + // to: '/buttons', + // icon: , + // items: [ + // { + // component: CNavItem, + // name: 'Buttons', + // to: '/buttons/buttons', + // }, + // { + // component: CNavItem, + // name: 'Buttons groups', + // to: '/buttons/button-groups', + // }, + // { + // component: CNavItem, + // name: 'Dropdowns', + // to: '/buttons/dropdowns', + // }, + // ], + // }, + // { + // component: CNavGroup, + // name: 'Forms', + // icon: , + // items: [ + // { + // component: CNavItem, + // name: 'Form Control', + // to: '/forms/form-control', + // }, + // { + // component: CNavItem, + // name: 'Select', + // to: '/forms/select', + // }, + // { + // component: CNavItem, + // name: 'Checks & Radios', + // to: '/forms/checks-radios', + // }, + // { + // component: CNavItem, + // name: 'Range', + // to: '/forms/range', + // }, + // { + // component: CNavItem, + // name: 'Input Group', + // to: '/forms/input-group', + // }, + // { + // component: CNavItem, + // name: 'Floating Labels', + // to: '/forms/floating-labels', + // }, + // { + // component: CNavItem, + // name: 'Layout', + // to: '/forms/layout', + // }, + // { + // component: CNavItem, + // name: 'Validation', + // to: '/forms/validation', + // }, + // ], + // }, + // { + // component: CNavItem, + // name: 'Charts', + // to: '/charts', + // icon: , + // }, + // { + // component: CNavGroup, + // name: 'Icons', + // icon: , + // items: [ + // { + // component: CNavItem, + // name: 'CoreUI Free', + // to: '/icons/coreui-icons', + // badge: { + // color: 'success', + // text: 'NEW', + // }, + // }, + // { + // component: CNavItem, + // name: 'CoreUI Flags', + // to: '/icons/flags', + // }, + // { + // component: CNavItem, + // name: 'CoreUI Brands', + // to: '/icons/brands', + // }, + // ], + // }, + // { + // component: CNavGroup, + // name: 'Notifications', + // icon: , + // items: [ + // { + // component: CNavItem, + // name: 'Alerts', + // to: '/notifications/alerts', + // }, + // { + // component: CNavItem, + // name: 'Badges', + // to: '/notifications/badges', + // }, + // { + // component: CNavItem, + // name: 'Modal', + // to: '/notifications/modals', + // }, + // { + // component: CNavItem, + // name: 'Toasts', + // to: '/notifications/toasts', + // }, + // ], + // }, + // { + // component: CNavItem, + // name: 'Widgets', + // to: '/widgets', + // icon: , + // badge: { + // color: 'info', + // text: 'NEW', + // }, + // }, + // { + // component: CNavTitle, + // name: 'Extras', + // }, + // { + // component: CNavGroup, + // name: 'Pages', + // icon: , + // items: [ + // { + // component: CNavItem, + // name: 'Login', + // to: '/login', + // }, + // { + // component: CNavItem, + // name: 'Register', + // to: '/register', + // }, + // { + // component: CNavItem, + // name: 'Error 404', + // to: '/404', + // }, + // { + // component: CNavItem, + // name: 'Error 500', + // to: '/500', + // }, + // ], + // }, { component: CNavItem, - name: 'Charts', - to: '/charts', - icon: , - }, - { - component: CNavGroup, - name: 'Icons', - icon: , - items: [ - { - component: CNavItem, - name: 'CoreUI Free', - to: '/icons/coreui-icons', - badge: { - color: 'success', - text: 'NEW', - }, - }, - { - component: CNavItem, - name: 'CoreUI Flags', - to: '/icons/flags', - }, - { - component: CNavItem, - name: 'CoreUI Brands', - to: '/icons/brands', - }, - ], - }, - { - component: CNavGroup, - name: 'Notifications', - icon: , - items: [ - { - component: CNavItem, - name: 'Alerts', - to: '/notifications/alerts', - }, - { - component: CNavItem, - name: 'Badges', - to: '/notifications/badges', - }, - { - component: CNavItem, - name: 'Modal', - to: '/notifications/modals', - }, - { - component: CNavItem, - name: 'Toasts', - to: '/notifications/toasts', - }, - ], - }, - { - component: CNavItem, - name: 'Widgets', - to: '/widgets', - icon: , + name: 'About Us', + to: '/about', + icon: , badge: { - color: 'info', - text: 'NEW', + // color: 'danger', + text: '🎈', }, }, - { - component: CNavTitle, - name: 'Extras', - }, - { - component: CNavGroup, - name: 'Pages', - icon: , - items: [ - { - component: CNavItem, - name: 'Login', - to: '/login', - }, - { - component: CNavItem, - name: 'Register', - to: '/register', - }, - { - component: CNavItem, - name: 'Error 404', - to: '/404', - }, - { - component: CNavItem, - name: 'Error 500', - to: '/500', - }, - ], - }, - { - component: CNavItem, - name: 'Docs', - href: 'https://coreui.io/react/docs/templates/installation/', - icon: , - }, ] export default _nav diff --git a/src/assets/brand/logo-negative.js b/src/assets/brand/logo-negative.js index 114a6a047..d3a73808a 100644 --- a/src/assets/brand/logo-negative.js +++ b/src/assets/brand/logo-negative.js @@ -1,33 +1,9 @@ export const logoNegative = [ '608 134', ` - coreui react pro logo - - - - - - - - - - - - - - - - - - - - - - - - - - + Youtube your podcast + + -`, + `, ] diff --git a/src/assets/brand/logo.js b/src/assets/brand/logo.js index 7a2d7e0b3..5485173ca 100644 --- a/src/assets/brand/logo.js +++ b/src/assets/brand/logo.js @@ -1,32 +1,9 @@ export const logo = [ '608 134', ` - coreui react pro - - - - - - - - - - - - - - - - - - - - - - - - - + Youtube your podcast + + `, ] diff --git a/src/assets/brand/sygnet.js b/src/assets/brand/sygnet.js index 3a57fbdd4..32978889c 100644 --- a/src/assets/brand/sygnet.js +++ b/src/assets/brand/sygnet.js @@ -1,12 +1,9 @@ export const sygnet = [ '160 160', ` - coreui logo - - - - - + Youtube your podcast logo + + `, ] diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js index 75132f279..84fc32d07 100644 --- a/src/components/AppFooter.js +++ b/src/components/AppFooter.js @@ -5,15 +5,15 @@ const AppFooter = () => { return (
- - CoreUI + + Audio2Video - © 2022 creativeLabs. + © 2022 SeenLab.
diff --git a/src/routes.js b/src/routes.js index d168b1ca4..d7b1f9701 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,8 +1,11 @@ import React from 'react' +const About = React.lazy(() => import('./views/about/About')) const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard')) const Colors = React.lazy(() => import('./views/theme/colors/Colors')) const Typography = React.lazy(() => import('./views/theme/typography/Typography')) +// const Upload = React.lazy(() => import('./views/notifications/modals/Modals')) +const Upload = React.lazy(() => import('./views/upload-dialog/UploadDialog')) // /Users/zhouqiangw/Desktop/studio/coreui-react-admin/src/views/upload-dialog/index.js // Base const Accordion = React.lazy(() => import('./views/base/accordion/Accordion')) @@ -52,7 +55,8 @@ const Widgets = React.lazy(() => import('./views/widgets/Widgets')) const routes = [ { path: '/', exact: true, name: 'Home' }, - { path: '/dashboard', name: 'Dashboard', element: Dashboard }, + { path: '/about', name: 'About', element: About }, + { path: '/upload', name: 'Upload', element: Upload }, { path: '/theme', name: 'Theme', element: Colors, exact: true }, { path: '/theme/colors', name: 'Colors', element: Colors }, { path: '/theme/typography', name: 'Typography', element: Typography }, diff --git a/src/views/about/About.js b/src/views/about/About.js new file mode 100644 index 000000000..b7c440445 --- /dev/null +++ b/src/views/about/About.js @@ -0,0 +1,32 @@ +import React from 'react' +import { + CCard, + CCardBody, + CContainer, + // CInputGroupText, + CRow, +} from '@coreui/react' + +const About = () => { + return ( +
+ + + + +
+

About Us

+

+ We are using AI to generate a Video for your podcast, let the world watch your + podcast! +

+
+
+
+
+
+
+ ) +} + +export default About diff --git a/src/views/upload-dialog/UploadDialog.js b/src/views/upload-dialog/UploadDialog.js new file mode 100644 index 000000000..598b45951 --- /dev/null +++ b/src/views/upload-dialog/UploadDialog.js @@ -0,0 +1,48 @@ +import React, { useState } from 'react' +import { + CButton, + CLink, + CModal, + CModalHeader, + CModalTitle, + CModalBody, + CPopover, + CTooltip, + CModalFooter, +} from '@coreui/react' + +const UploadDialog = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}>Launch demo modal + setVisible(false)}> + + Upload Your Audio File. + + +
Online
+

+ This could be  + + Google Drive + {' '} + and  + + Dropbox + {' '} + links. +

+
+ + Choose from computer + setVisible(false)}> + Close + + +
+ + ) +} + +export default UploadDialog