6 |
7 |
8 | )
9 | }
10 |
11 | export default CanvasArea
12 |
--------------------------------------------------------------------------------
/src/components/Editor/Editor.scss:
--------------------------------------------------------------------------------
1 | .editor {
2 | height: 100vh;
3 | width: 100vw;
4 | display: flex;
5 | flex-direction: column;
6 | background: #ecf0f1;
7 | flex: 1;
8 | > .section-two {
9 | display: flex;
10 | flex: 1;
11 | > .section-three {
12 | flex: 1;
13 | display: flex;
14 | flex-direction: column;
15 | }
16 | }
17 | }
18 |
19 | .editor-canvas {
20 | flex: 1;
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/Editor/Editor.tsx:
--------------------------------------------------------------------------------
1 | import Navbar from '@components/Editor/Navbar/Navbar'
2 | import Panels from '@components/Editor/Panels/Panels'
3 | import FooterMenu from '@components/Editor/FooterMenu/FooterMenu'
4 | import Toolbox from '@components/Editor/Toolbox/Toolbox'
5 | import CanvasArea from '@components/Editor/CanvasArea/CanvasArea'
6 | import './Editor.scss'
7 |
8 | function Editor() {
9 | return (
10 |
11 |
21 | )
22 | }
23 |
24 | export default Editor
25 |
--------------------------------------------------------------------------------
/src/components/Editor/FooterMenu/FooterMenu.scss:
--------------------------------------------------------------------------------
1 | .footermenu {
2 | height: 50px;
3 | background: #ffffff;
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/Editor/FooterMenu/FooterMenu.tsx:
--------------------------------------------------------------------------------
1 | import './FooterMenu.scss'
2 | function FooterMenu() {
3 | return (
4 |
13 |
20 |
15 |
19 |
5 |
7 | )
8 | }
9 |
10 | export default FooterMenu
11 |
--------------------------------------------------------------------------------
/src/components/Editor/Navbar/Navbar.scss:
--------------------------------------------------------------------------------
1 | .navbar {
2 | background: linear-gradient(90deg, #00c4cc, #7d2ae8);
3 | height: 60px;
4 | display: flex;
5 | align-items: center;
6 | justify-content: space-between;
7 | padding: 0 1.36rem;
8 | }
9 |
10 | .navbar-left {
11 | color: #fff;
12 | display: flex;
13 | svg {
14 | width: 36px;
15 | height: 36px;
16 | }
17 | }
18 |
19 | .navbar-action-items {
20 | color: #fff;
21 | display: flex;
22 | }
23 |
24 | .navbar-icon {
25 | border-radius: 4px;
26 | padding: 0.5rem;
27 | background: rgba($color: #fff, $alpha: 0.15);
28 | margin-left: 1rem;
29 | cursor: pointer;
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/Editor/Navbar/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import './Navbar.scss'
2 | import { DownloadIcon, LogoIcon, GithubIcon } from './NavbarIcons'
3 |
4 | function Navbar() {
5 | return (
6 | FooterMenu
6 |
7 |
17 | )
18 | }
19 |
20 | export default Navbar
21 |
--------------------------------------------------------------------------------
/src/components/Editor/Navbar/NavbarIcons.tsx:
--------------------------------------------------------------------------------
1 | export function GithubIcon() {
2 | return (
3 |
8 |
10 |
11 |
16 |
4 |
7 |
8 | )
9 | }
10 |
11 | export function DownloadIcon() {
12 | return (
13 |
14 |
20 |
21 | )
22 | }
23 |
24 | export function LogoIcon() {
25 | return (
26 |
58 | )
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/ClosePanel.tsx:
--------------------------------------------------------------------------------
1 | interface ClosePanelProp {
2 | closePanel: () => void
3 | }
4 |
5 | function ClosePanel({ closePanel }: ClosePanelProp) {
6 | return (
7 |
8 |
28 | )
29 | }
30 |
31 | export default ClosePanel
32 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/ImagesPanel/ImagesPanel.tsx:
--------------------------------------------------------------------------------
1 | import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
2 | import { SearchIcon } from '@chakra-ui/icons'
3 |
4 | function ImagesPanel() {
5 | return (
6 | <>
7 |
9 |
15 |
16 |
17 |
26 |
27 |
8 |
9 |
12 |
13 |
14 | )
15 | }
16 | export default ImagesPanel
17 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/MusicPanel/MusicPanel.tsx:
--------------------------------------------------------------------------------
1 | import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
2 | import { SearchIcon } from '@chakra-ui/icons'
3 |
4 | function MusicPanel() {
5 | return (
6 | <>
7 |
8 |
9 |
12 |
13 |
14 | )
15 | }
16 | export default MusicPanel
17 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/ObjectsPanel/ObjectsPanel.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
3 | import { SearchIcon } from '@chakra-ui/icons'
4 | import { getImage, getImages } from '@services/iconscout'
5 | import { useCanvasContext } from '@components/Canvas/hooks'
6 | import { useDebounce } from 'use-debounce'
7 |
8 | import { fabric } from 'fabric'
9 |
10 | function ObjectsPanel() {
11 | const [search, setSearch] = useState('')
12 | const [objects, setObjects] = useState downloadImage(obj.uuid)} key={obj.uuid}>
33 | 
34 |
35 | )
36 | })
37 | }
38 | const downloadImage = uuid => {
39 | getImage(uuid)
40 | .then(url => {
41 | fabric.loadSVGFromURL(url, (objects, options) => {
42 | const object = fabric.util.groupSVGElements(objects, options)
43 | //@ts-ignore
44 | const workarea = canvas.getObjects().find(obj => obj.id === 'workarea')
45 | canvas.add(object)
46 | object.scaleToHeight(300)
47 | object.center()
48 | object.clipPath = workarea
49 | canvas.renderAll()
50 | })
51 | })
52 | .catch(console.log)
53 | }
54 |
55 | return (
56 | <>
57 |
58 |
59 |
67 |
68 |
69 | {renderItems()}
70 |
71 |
72 | )
73 | }
74 | export default ObjectsPanel
75 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/PanelItem/PanelItem.scss:
--------------------------------------------------------------------------------
1 | .panel-item-container {
2 | width: 0;
3 | transition: width 0.5s;
4 | position: relative;
5 | overflow: hidden;
6 | display: flex;
7 | &.open {
8 | width: 360px;
9 | }
10 | }
11 | .panel-item {
12 | flex: 1;
13 | }
14 |
15 | .objects-list {
16 | display: grid;
17 | grid-template-columns: repeat(3, 1fr);
18 | // grid-auto-rows: minmax(100px, auto);
19 | // gap: 1rem;
20 | padding: 1rem 0;
21 | }
22 |
23 | .object-item {
24 | // height: 6rem;
25 | // background: rebeccapurple;
26 | }
27 |
28 | .object-item-container {
29 | // background: red;
30 | transition: background 0.4s;
31 | cursor: pointer;
32 | padding: 1rem;
33 | &:hover {
34 | background: rgba($color: #fff, $alpha: 0.1);
35 | }
36 | }
37 |
38 | // Panel Text
39 | .panel-text {
40 | width: 360px;
41 | color: #fff;
42 | .add-text-items {
43 | display: grid;
44 | gap: 0.5rem;
45 | }
46 | .label {
47 | font-weight: 600;
48 | padding: 0.8rem 0;
49 | font-size: 0.84rem;
50 | }
51 | .add-text-item {
52 | background: rgba($color: #fff, $alpha: 0.1);
53 | height: 50px;
54 | display: flex;
55 | align-items: center;
56 | padding-left: 1rem;
57 | cursor: pointer;
58 | transition: background 0.4s;
59 | &:hover {
60 | background: rgba($color: #fff, $alpha: 0.15);
61 | }
62 | }
63 | .add-heading {
64 | font-weight: 700;
65 | font-size: 1.66rem;
66 | }
67 | .add-subheading {
68 | background: rgba($color: #fff, $alpha: 0.1);
69 | font-size: 1.12rem;
70 | font-weight: 500;
71 | }
72 | .add-body-text {
73 | background: rgba($color: #fff, $alpha: 0.1);
74 | font-size: 0.76rem;
75 | font-weight: 400;
76 | color: rgba($color: #fff, $alpha: 0.9);
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/PanelItem/PanelItem.tsx:
--------------------------------------------------------------------------------
1 | import ImagesPanel from '../ImagesPanel/ImagesPanel'
2 | import MusicPanel from '../MusicPanel/MusicPanel'
3 | import ObjectsPanel from '../ObjectsPanel/ObjectsPanel'
4 | import TemplatesPanel from '../TemplatesPanel/TemplatesPanel'
5 | import TextPanel from '../TextPanel/TextPanel'
6 | import VideosPanel from '../VideosPanel/VideosPanel'
7 | import { Scrollbars } from 'react-custom-scrollbars'
8 | import classNames from 'classnames'
9 | import './PanelItem.scss'
10 |
11 | interface Props {
12 | panelOpen: boolean
13 | activeTab: string
14 | }
15 | function PanelItem({ panelOpen, activeTab }: Props) {
16 | const className = classNames({
17 | 'panel-item-container': true,
18 | open: panelOpen,
19 | })
20 |
21 | return (
22 |
23 |
37 | )
38 | }
39 |
40 | export default PanelItem
41 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/Panels.scss:
--------------------------------------------------------------------------------
1 | @import '../../../theme/colors.scss';
2 |
3 | .panels {
4 | position: relative;
5 | background: $dark-2;
6 | box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.5);
7 | display: flex;
8 | user-select: none;
9 | font-family: 'Lexend';
10 | }
11 |
12 | .panel-item-close {
13 | cursor: pointer;
14 | position: absolute;
15 | top: 50%;
16 | right: 0;
17 | transform: translate(100%, -50%);
18 | z-index: 2;
19 | }
20 |
21 | .c1 {
22 | margin-left: -6px;
23 | cursor: pointer;
24 | border: none;
25 | background: none;
26 | overflow: hidden;
27 | pointer-events: none;
28 | position: relative;
29 | color: #fff;
30 | right: -5px;
31 | }
32 |
33 | .c2 {
34 | margin-left: -6px;
35 | border: none;
36 | right: 8px;
37 | position: relative;
38 | justify-content: center;
39 | position: absolute;
40 | color: #fff;
41 | top: 50%;
42 | transform: translate(100%, -50%);
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/Panels.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import ClosePanel from './ClosePanel'
3 | import PanelItemsList from './PanelsList/PanelsList'
4 | import PanelItem from './PanelItem/PanelItem'
5 | import './Panels.scss'
6 |
7 | function Panels() {
8 | const [panelOpen, setPanelOpen] = useState(true)
9 | const [activeTab, setActiveTab] = useState('objects')
10 |
11 | const closePanel = () => {
12 | setPanelOpen(!panelOpen)
13 | }
14 | return (
15 |
24 | }
26 | autoHide
27 | >
28 | {activeTab === 'text' &&
35 |
36 |
16 |
25 | )
26 | }
27 |
28 | export default Panels
29 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/PanelsList/PanelItemIcon.tsx:
--------------------------------------------------------------------------------
1 | function TemplateIcon() {
2 | return (
3 |
10 | )
11 | }
12 |
13 | function ObjectIcon() {
14 | return (
15 |
21 | )
22 | }
23 |
24 | function TextIcon() {
25 | return (
26 |
33 | )
34 | }
35 |
36 | function ImageIcon() {
37 | return (
38 |
44 | )
45 | }
46 |
47 | function VideoIcon() {
48 | return (
49 |
57 | )
58 | }
59 |
60 | function AudioIcon() {
61 | return (
62 |
70 | )
71 | }
72 |
73 | const PanelIcons = {
74 | templates: {
75 | render: () =>
19 | }
21 | autoHide
22 | >
23 | {tabItems.map(tabItem => (
24 |
36 |
37 | )
38 | }
39 |
40 | export default PanelItems
41 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/PanelsList/PanelsListItem.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames'
2 | import PanelItemIcon from './PanelItemIcon'
3 | // import "./Item.less"
4 |
5 | interface Props {
6 | activeTab: string
7 | label: string
8 | icon: string
9 | name: string
10 | panelOpen: boolean
11 | setActiveTab: React.Dispatch {
26 | setPanelOpen(true)
27 | setActiveTab(name)
28 | }}
29 | >
30 | {PanelItemIcon[icon].render()}
31 | {label}
32 |
33 | )
34 | }
35 |
36 | export default PanelItem
37 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/PanelsList/tabItems.ts:
--------------------------------------------------------------------------------
1 | export const tabItems = [
2 | {
3 | icon: 'templates',
4 | label: 'Şablonlar',
5 | name: 'templates',
6 | },
7 | {
8 | icon: 'images',
9 | label: 'Fotoğraf',
10 | name: 'images',
11 | },
12 | {
13 | icon: 'texts',
14 | label: 'Metin',
15 | name: 'text',
16 | },
17 | {
18 | icon: 'objects',
19 | label: 'Nesneler',
20 | name: 'objects',
21 | },
22 | {
23 | icon: 'musics',
24 | label: 'Müzik',
25 | name: 'musics',
26 | },
27 | {
28 | icon: 'videos',
29 | label: 'Videolar',
30 | name: 'videos',
31 | },
32 | ]
33 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/TemplatesPanel/TemplatesPanel.tsx:
--------------------------------------------------------------------------------
1 | import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
2 | import { SearchIcon } from '@chakra-ui/icons'
3 |
4 | function TemplatesPanel() {
5 | return (
6 | <>
7 |
8 |
9 |
12 |
13 |
14 | )
15 | }
16 | export default TemplatesPanel
17 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/TextPanel/TextPanel.tsx:
--------------------------------------------------------------------------------
1 | import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
2 | import { SearchIcon } from '@chakra-ui/icons'
3 | import { useCoreHandler } from '@/components/Canvas/handlers'
4 |
5 | function TextPanel() {
6 | const { addObject } = useCoreHandler()
7 | const addHeading = () => {
8 | const options = {
9 | type: 'text',
10 | text: 'Add a heading',
11 | fontSize: 32,
12 | width: 320,
13 | fontWeight: 700,
14 | fontFamily: 'Lexend',
15 | textAlign: 'center',
16 | }
17 | addObject(options)
18 | }
19 |
20 | const addSubheading = () => {
21 | const options = {
22 | type: 'text',
23 | text: 'Add a subheading',
24 | fontSize: 24,
25 | width: 320,
26 | fontWeight: 500,
27 | fontFamily: 'Lexend',
28 | textAlign: 'center',
29 | }
30 | addObject(options)
31 | }
32 |
33 | const addTextBody = () => {
34 | const options = {
35 | type: 'text',
36 | text: 'Add a little bit of body text',
37 | fontSize: 18,
38 | width: 320,
39 | fontWeight: 300,
40 | fontFamily: 'Lexend',
41 | textAlign: 'center',
42 | }
43 | addObject(options)
44 | }
45 | return (
46 | <>
47 |
48 |
49 |
52 |
65 |
66 | )
67 | }
68 | export default TextPanel
69 |
--------------------------------------------------------------------------------
/src/components/Editor/Panels/VideosPanel/VideosPanel.tsx:
--------------------------------------------------------------------------------
1 | import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
2 | import { SearchIcon } from '@chakra-ui/icons'
3 |
4 | function VideosPanel() {
5 | return (
6 | <>
7 | Click text to add to page
53 |
54 |
64 |
55 | Add a heading
56 |
57 |
58 | Add a subheading
59 |
60 |
61 | Add a litle bit of body text
62 |
63 |
8 |
9 |
12 |
13 |
14 | )
15 | }
16 | export default VideosPanel
17 |
--------------------------------------------------------------------------------
/src/components/Editor/Toolbox/DefaultToolbox/DefaultToobox.scss:
--------------------------------------------------------------------------------
1 | .editor-toolbox.default {
2 | align-items: center;
3 | display: flex;
4 | }
5 |
--------------------------------------------------------------------------------
/src/components/Editor/Toolbox/DefaultToolbox/DefaultToolbox.tsx:
--------------------------------------------------------------------------------
1 | import { useCoreHandler } from '@/components/Canvas/handlers'
2 | import { CSSProperties, useState } from 'react'
3 | import { TwitterPicker } from 'react-color'
4 | import emptyColorPlaceholder from '@/assets/images/base-color-picker.png'
5 | import './DefaultToobox.scss'
6 | // import './Toolbox.css'
7 |
8 | function VerticalSeparator() {
9 | return
10 | }
11 |
12 | function Toolbox() {
13 | const [dropdown, setDropdown] = useState({
14 | displayColorPicker: false,
15 | })
16 | const [options, setOptions] = useState({
17 | backgroundColor: '#ffffff',
18 | })
19 | const { setCanvasBackgroundColor } = useCoreHandler()
20 |
21 | const handleClick = () => {
22 | setDropdown({ ...dropdown, displayColorPicker: !dropdown.displayColorPicker })
23 | }
24 | const handleClose = () => {
25 | setDropdown({ ...dropdown, displayColorPicker: false })
26 | }
27 |
28 | const popover: CSSProperties = {
29 | position: 'absolute',
30 | zIndex: 2,
31 | }
32 | const cover: CSSProperties = {
33 | position: 'fixed',
34 | top: '0px',
35 | right: '0px',
36 | bottom: '0px',
37 | left: '0px',
38 | }
39 |
40 | const onColorChange = color => {
41 | setCanvasBackgroundColor(color.hex)
42 | setOptions({ ...options, backgroundColor: color.hex })
43 | }
44 | return (
45 |
46 |
70 | )
71 | }
72 |
73 | export default Toolbox
74 |
--------------------------------------------------------------------------------
/src/components/Editor/Toolbox/TextToolbox/TextToolbox.scss:
--------------------------------------------------------------------------------
1 | .editor-toolbox.text {
2 | height: 54px;
3 | background: #ffffff;
4 | border-bottom: 1px solid rgba(57, 76, 96, 0.15);
5 | display: flex;
6 | align-items: center;
7 | position: relative;
8 | justify-content: space-between;
9 | .section-two {
10 | display: flex;
11 | }
12 | }
13 |
14 | .list-item {
15 | height: 46px;
16 | display: flex;
17 | align-items: center;
18 | cursor: pointer;
19 | &:hover {
20 | background: rgba($color: #000000, $alpha: 0.03);
21 | }
22 | }
23 |
24 | .font-family-selector {
25 | width: 180px;
26 | cursor: pointer;
27 | border: 1px solid rgba($color: #000000, $alpha: 0.2);
28 | height: 36px;
29 | padding-left: 0.5rem;
30 | padding-right: 0.5rem;
31 | display: flex;
32 | align-items: center;
33 | border-radius: 4px;
34 | justify-content: space-between;
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/Editor/Toolbox/TextToolbox/TextToolbox.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { ChevronDownIcon } from '@chakra-ui/icons'
3 | import { useCanvasContext } from '@/components/Canvas/hooks'
4 | import { useEffect, useState } from 'react'
5 | import { Popover, PopoverTrigger, PopoverContent, PopoverBody } from '@chakra-ui/react'
6 | import './TextToolbox.scss'
7 | import { useCoreHandler } from '@/components/Canvas/handlers'
8 |
9 | const fontsList = ['Open Sans', 'Lexend', 'Comic Neue', 'Patrick Hand']
10 |
11 | function TextTool() {
12 | const { activeObject } = useCanvasContext()
13 | const { setProperty } = useCoreHandler()
14 | const [options, setOptions] = useState({
15 | fontFamily: 'Lexend',
16 | fontSize: 1,
17 | fontWeight: 2,
18 | textAlign: 'center',
19 | textDecoration: 'none',
20 | })
21 |
22 | useEffect(() => {
23 | if (activeObject) {
24 | const updatedOptions = {
25 | fontFamily: activeObject.fontFamily,
26 | fontSize: activeObject.fontSize,
27 | fontWeight: activeObject.fontWeight,
28 | textAlign: activeObject.textAlign,
29 | }
30 | setOptions({ ...options, ...updatedOptions })
31 | }
32 | }, [activeObject])
33 |
34 | const onChangeFontFamily = fontFamily => {
35 | setProperty('fontFamily', fontFamily)
36 | setOptions({ ...options, fontFamily })
37 | }
38 |
39 | return (
40 |
47 |
69 |
48 |
67 |
49 | {options.backgroundColor === '#ffffff' ? (
50 | 
55 | ) : (
56 |
57 | )}
58 |
59 |
60 | {dropdown.displayColorPicker ? (
61 |
62 |
63 |
65 | ) : null}
66 |
41 |
72 | )
73 | }
74 |
75 | function OpacityIcon() {
76 | return (
77 |
98 | )
99 | }
100 |
101 | function DeleteIcon() {
102 | return (
103 |
109 | )
110 | }
111 | export default TextTool
112 |
--------------------------------------------------------------------------------
/src/components/Editor/Toolbox/Toolbox.scss:
--------------------------------------------------------------------------------
1 | .editor-color-holder {
2 | height: 30px;
3 | width: 30px;
4 | }
5 |
6 | .vertical-separator {
7 | background: rgba(57, 76, 96, 0.15);
8 | width: 1px;
9 | height: 30px;
10 | margin: 0 12px;
11 | }
12 |
13 | .editor-toolbox {
14 | height: 54px;
15 | background: #ffffff;
16 | border-bottom: 1px solid rgba(57, 76, 96, 0.15);
17 | padding: 0 0.8rem;
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/Editor/Toolbox/Toolbox.tsx:
--------------------------------------------------------------------------------
1 | import { useCanvasContext } from '@/components/Canvas/hooks'
2 | import DefaultToolbox from './DefaultToolbox/DefaultToolbox'
3 | import TextToolbox from './TextToolbox/TextToolbox'
4 |
5 | import './Toolbox.scss'
6 |
7 | function Toolbox() {
8 | const { activeObject } = useCanvasContext()
9 | if (!activeObject) {
10 | return
42 |
71 |
43 |
44 |
45 |
50 |
51 |
52 | {fontsList.map(fontItem => (
53 |
63 |
64 |
65 |
66 |
46 |
49 | {options.fontFamily}
47 | onChangeFontFamily(fontItem)}
55 | style={{ fontFamily: fontItem }}
56 | className="list-item"
57 | key={fontItem}
58 | >
59 | {fontItem}
60 |
61 | ))}
62 |
67 |
70 | {activeObjectType === 'textbox' ?
15 | }
16 |
17 | export default Toolbox
18 |
--------------------------------------------------------------------------------
/src/components/Editor/index.ts:
--------------------------------------------------------------------------------
1 | import Editor from './Editor'
2 |
3 | export default Editor
4 |
--------------------------------------------------------------------------------
/src/i18n/i18nClient.ts:
--------------------------------------------------------------------------------
1 | import i18n from 'i18next'
2 | // import LanguageDetector from "i18next-browser-languagedetector"
3 | import enLocale from './locales/en-EN.json'
4 | import trLocale from './locales/tr-TR.json'
5 |
6 | const i18nClient = i18n.init({
7 | load: 'all',
8 | whitelist: ['en', 'en-US', 'tr', 'tr-TR'],
9 | lng: 'en',
10 | // nonExplicitWhitelist: false,
11 | resources: {
12 | en: {
13 | translation: enLocale,
14 | },
15 | tr: {
16 | translation: trLocale,
17 | },
18 | },
19 | })
20 |
21 | export default i18nClient
22 |
--------------------------------------------------------------------------------
/src/i18n/index.ts:
--------------------------------------------------------------------------------
1 | export { default as i18nClient } from "./i18nClient"
2 |
--------------------------------------------------------------------------------
/src/i18n/locales/en-EN.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor": {
3 | "panel": {
4 | "items": {
5 | "formats": "Formats",
6 | "templates": "Templates",
7 | "images": "Images",
8 | "text": "Text",
9 | "documents": "Documents",
10 | "objects": "Objects",
11 | "musics": "Music",
12 | "videos": "Videos",
13 | "graphics": "Graphics",
14 | "layers": "layers",
15 | "folders": "Folders",
16 | "help": "Help"
17 | }
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/i18n/locales/tr-TR.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor": {
3 | "panel": {
4 | "items": {
5 | "formats": "Formatlar",
6 | "templates": "Şablonlar",
7 | "images": "Fotoğraf",
8 | "text": "Metin",
9 | "documents": "Doküman",
10 | "objects": "Nesneler",
11 | "musics": "Müzik",
12 | "videos": "Videolar",
13 | "graphics": "Grafikler",
14 | "layers": "Katmanlar",
15 | "folders": "Dosyalarım",
16 | "help": "Yardım"
17 | }
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
4 | 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom'
2 | import Editor from '@components/Editor'
3 | import reportWebVitals from './reportWebVitals'
4 | import { CanvasProvider } from '@components/Canvas'
5 | import { ChakraProvider } from '@chakra-ui/react'
6 |
7 | import 'focus-visible/dist/focus-visible'
8 | import './i18n/index'
9 | import './index.css'
10 |
11 | ReactDOM.render(
12 |