"}
80 |
{")"}
81 |
{'}'}
82 |
{'export'} default Header
83 |
84 |
85 |
86 |
87 | Nusxa olish
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | )
96 | }
97 |
98 | export default HomeReact
--------------------------------------------------------------------------------
/src/components/homeVideo/homeVideo.jsx:
--------------------------------------------------------------------------------
1 | import { Box } from '@chakra-ui/react'
2 | import { video } from '../../assets'
3 |
4 | const HomeVideo = () => {
5 | return (
6 |
7 |
8 |
9 |
11 |
12 |
13 | )
14 | }
15 |
16 | export default HomeVideo
--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MOdevco/MOdevcoSchool/d95f3bac432350122dc1f39f89e6bb98fc629737/src/components/index.js
--------------------------------------------------------------------------------
/src/components/komment/komment.jsx:
--------------------------------------------------------------------------------
1 | import { ChevronDownIcon, DeleteIcon } from '@chakra-ui/icons'
2 | import { Avatar, Box, Button, Divider, Heading, Text } from '@chakra-ui/react'
3 | import axios from 'axios'
4 | import { useEffect, useState } from 'react'
5 | import {
6 | Popover,
7 | PopoverTrigger,
8 | PopoverContent,
9 | PopoverHeader,
10 | PopoverBody,
11 | PopoverFooter,
12 | PopoverArrow,
13 | PopoverCloseButton,
14 | PopoverAnchor,
15 | } from '@chakra-ui/react'
16 |
17 |
18 | const Komment = () => {
19 | const API = 'http://localhost:3000/komment'
20 | const [data , setData] = useState([])
21 |
22 | useEffect(() => {
23 | axios.get(API).then((res) => {
24 | setData(res.data)
25 | })
26 | } ,[API])
27 |
28 |
29 | const handleDlete = async (id) => {
30 | await axios.delete('http://localhost:3000/komment/' + id).then((res) => {
31 | axios.get(API).then((res) => {
32 | setData(res.data)
33 | })
34 | })
35 | }
36 |
37 |
38 | return (
39 |
40 |
41 |
42 |
43 |
44 | Kommentariyalar
45 |
46 |
47 |
48 | {data && data.map((item , i) => (
49 |
50 |
51 |
52 | Foidalanuvchi
54 |
55 |
56 |
57 |
58 |
60 |
61 | Ma'lumotni tozalash
64 |
65 | handleDlete(item.id)} bg={'red'} _hover={{bg: 'red.500'}}>
66 |
67 |
68 |
69 |
70 |
71 |
74 | {item.komment}
75 |
76 |
77 | ))}
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 | )
86 | }
87 |
88 | export default Komment
--------------------------------------------------------------------------------
/src/components/lessonCards/lessonCards.jsx:
--------------------------------------------------------------------------------
1 | import { Box , Heading , Text , Button, useDisclosure } from '@chakra-ui/react'
2 | import { Link } from 'react-router-dom'
3 | import {
4 | Modal,
5 | ModalOverlay,
6 | ModalContent,
7 | ModalHeader,
8 | ModalFooter,
9 | ModalBody,
10 | ModalCloseButton,
11 | } from '@chakra-ui/react'
12 |
13 | const LessonCards = ({title ,text , bg , color , cardBg , cardColor , linkLess}) => {
14 | const { isOpen, onOpen, onClose } = useDisclosure()
15 | return (
16 |
17 |
18 |
19 |
21 | Ma'lumot
22 |
24 |
25 | Bu bo'limda hozircha darsliklar mavjut emas , tez orada bo'lim to'ldiriladi😊
26 |
27 |
28 |
29 |
30 | {title}
31 | {text}
32 | BOSHLASH
34 |
35 |
36 |
37 | )
38 | }
39 |
40 | export default LessonCards
--------------------------------------------------------------------------------
/src/components/mainTitle/mainTitle.css:
--------------------------------------------------------------------------------
1 |
2 | .center {
3 | display: flex;
4 | justify-content: flex-start;
5 | align-items: center ;
6 |
7 | }
--------------------------------------------------------------------------------
/src/components/modal/modal.jsx:
--------------------------------------------------------------------------------
1 | // import { Box, useDisclosure } from '@chakra-ui/react'
2 | // import {
3 | // Modal,
4 | // ModalOverlay,
5 | // ModalContent,
6 | // ModalHeader,
7 | // ModalFooter,
8 | // ModalBody,
9 | // ModalCloseButton,
10 | // } from '@chakra-ui/react'
11 | // const Modal = ({ isOpen}) => {
12 |
13 | // return (
14 | //
15 |
16 |
17 |
18 | //
19 | // )
20 | // }
21 |
22 | // export default Modal
--------------------------------------------------------------------------------
/src/components/opacityCard/opacityCard.jsx:
--------------------------------------------------------------------------------
1 | import { Box, Text, useToast } from '@chakra-ui/react'
2 | import React from 'react'
3 | import { useState } from 'react'
4 | import CopyToClipboard from 'react-copy-to-clipboard'
5 |
6 | const OpacityCard = ({text, opacity}) => {
7 | const [clipboard , setClipboard] = useState(false)
8 | const toast = useToast()
9 | const handleClip = () => {
10 | setClipboard(true)
11 | toast({
12 | position: 'top-right',
13 | render: () => (
14 |
15 | {text}dan Nusxa olindi!
16 |
17 | ),
18 | })
19 | }
20 | return (
21 |
22 |
23 |
24 |
25 | {text}
26 |
27 |
28 |
29 | )
30 | }
31 |
32 | export default OpacityCard
33 |
--------------------------------------------------------------------------------
/src/components/outlineProps/OutlineProps.jsx:
--------------------------------------------------------------------------------
1 | import { Box, Text } from '@chakra-ui/react'
2 | import React from 'react'
3 |
4 | const OutlineProps = ({borderStyle, text, borderColor, width, top, left, right, bottom}) => {
5 | return (
6 |
7 | {text}
8 |
9 | )
10 | }
11 |
12 | export default OutlineProps
13 |
--------------------------------------------------------------------------------
/src/components/particl.jsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@chakra-ui/react";
2 | import { useCallback } from "react";
3 | import Particles from "react-tsparticles";
4 | import { loadSlim } from "tsparticles-slim";
5 |
6 | const Particl = () => {
7 | const particlesInit = useCallback(async engine => {
8 | await loadSlim(engine);
9 | }, []);
10 |
11 | const particlesLoaded = useCallback(async container => {
12 | }, []);
13 |
14 | return (
15 |
16 |
87 | )
88 | }
89 |
90 | export default Particl
--------------------------------------------------------------------------------
/src/components/propsColor/propsColor.jsx:
--------------------------------------------------------------------------------
1 | import {Box , Text} from '@chakra-ui/react'
2 |
3 |
4 | const PropsColor = ({bgColor , colorName}) => {
5 | return (
6 |
7 |
8 | {colorName}
9 |
10 |
11 | )
12 | }
13 |
14 | export default PropsColor
15 |
--------------------------------------------------------------------------------
/src/components/rgbVal/rgbVal.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import {Box, Text, useToast} from '@chakra-ui/react'
3 | import CopyToClipboard from 'react-copy-to-clipboard'
4 | const RgbVal = ({bgColor, colorName, text}) => {
5 | const [clipboard , setClipboard] = useState(false)
6 | const toast = useToast()
7 | const handleClip = () => {
8 | setClipboard(true)
9 | toast({
10 | position: 'top-right',
11 | render: () => (
12 |
13 | {colorName}dan Nusxa olindi!
14 |
15 | ),
16 | })
17 | }
18 | return (
19 |
20 |
21 |
22 |
23 |
24 | {colorName}
25 |
26 |
27 |
28 |
29 |
30 | )
31 | }
32 |
33 | export default RgbVal
34 |
--------------------------------------------------------------------------------
/src/components/sidebarAdmi/sidebarAdmin.jsx:
--------------------------------------------------------------------------------
1 | import { DragHandleIcon } from '@chakra-ui/icons'
2 | import { Box, Button, useToast } from '@chakra-ui/react'
3 | // import HodimQoshish from '../hodimQo\'shish/hodimQo\'shish'
4 | import { FormControl, FormLabel, Input, useDisclosure } from '@chakra-ui/react'
5 | import {
6 | Modal,
7 | ModalOverlay,
8 | ModalContent,
9 | ModalHeader,
10 | ModalFooter,
11 | ModalBody,
12 | ModalCloseButton,
13 | } from '@chakra-ui/react'
14 | import axios from 'axios'
15 | import React, { useState } from 'react'
16 | import { value } from '../../assets'
17 |
18 | const SidebarAdmin = ({setData , data , handleAll , handleTaklif , handleXodim , handleKomment}) => {
19 | const { isOpen, onOpen, onClose } = useDisclosure()
20 | const initialRef = React.useRef(null)
21 | const finalRef = React.useRef(null)
22 | const [user , setUser] = useState({name: '' , lastname: '' , phone: '' , email: ''})
23 | const API = 'http://localhost:3000/users'
24 | const toast = useToast()
25 | const audio = () => {
26 | new Audio(value).play()
27 | }
28 | const handleSubmit = async () => {
29 | await axios.post(API , user).then((res) => {
30 | axios.get(API).then((res) => {
31 | setData(res.data)
32 | })
33 | toast({
34 | position: 'top-right',
35 | duration: 3000,
36 | render: () => (
37 |
38 | Ma'lumot qo'shildi
39 |
40 | ),
41 | })
42 | audio()
43 | })
44 | setUser("")
45 | }
46 | return (
47 |
48 |
49 | BARCHASI
50 | XODIMLAR
51 | TAKLIFLAR
52 | KOMMENTARIYALAR
53 | XODIM QO'SHISH
54 |
55 |
56 |
62 |
64 | Hodim Qo'shish
65 |
67 |
68 | Ism
69 |
71 |
72 |
73 | Familiya
74 |
76 |
77 |
78 | Telefon Raqam
79 |
81 |
82 |
83 | Elektron Manzil
84 |
86 |
87 |
88 |
89 | {
90 | onClose()
91 | handleSubmit()
92 | }} colorScheme='blue' mr={3}>
93 | Saqlash
94 |
95 | Bekor Qilish
96 |
97 |
98 |
99 |
100 |
101 |
102 | )
103 | }
104 |
105 | export default SidebarAdmin
--------------------------------------------------------------------------------
/src/components/takliflar/takliflar.jsx:
--------------------------------------------------------------------------------
1 | import { Box, Button, Heading, Text, Textarea } from '@chakra-ui/react'
2 | import axios from 'axios'
3 | import React, { useEffect, useState } from 'react'
4 | import {
5 | Table,
6 | Thead,
7 | Tbody,
8 | Tfoot,
9 | Tr,
10 | Th,
11 | Td,
12 | TableCaption,
13 | TableContainer,
14 | } from '@chakra-ui/react'
15 | import { DeleteIcon } from '@chakra-ui/icons'
16 | import { err } from '../../assets'
17 | const Takliflar = () => {
18 | const API = 'http://localhost:3000/taklif'
19 | const [data , setData] = useState([])
20 | const audio = () => {
21 | new Audio(err).play()
22 | }
23 |
24 | useEffect(() => {
25 | axios.get(API).then((res) => {
26 | setData(res.data)
27 | })
28 | } ,[API])
29 |
30 |
31 | const handleDelete = (id) => {
32 | axios.delete('http://localhost:3000/taklif/' + id).then((res) => {
33 | axios.get(API).then((res) => {
34 | setData(res.data)
35 | })
36 | audio()
37 | })
38 | }
39 | return (
40 |
41 |
42 |
43 |
44 |
45 |
46 | Takliflar
47 |
48 |
49 | {data.map((res , i) => (
50 |
51 |
52 |
53 |
54 |
55 |
56 | Ism
57 | Email
58 | Mavzu
59 |
60 |
61 |
62 |
63 | {res.ism}
64 | {res.email}
65 | {res.mavzu}
66 |
67 |
68 |
69 |
70 |
71 | {/* Ism: {res.ism}Email: {res.email}Mavzu: {res.mavzu}Xabar:
75 |
63 | { Jo'natish }
64 |
65 |
66 |
67 |
69 |
70 |
71 |
72 |
73 |
74 | )
75 | }
76 |
77 | export default Fikr
--------------------------------------------------------------------------------
/src/pages/html.jsx:
--------------------------------------------------------------------------------
1 | import { Box , Flex ,Button , Heading , Text} from '@chakra-ui/react'
2 | import { useEffect, useState } from 'react'
3 | import Sidebar from '../components/sidebarhtml/sidebarhtml'
4 | import { HamburgerIcon , CloseIcon} from '@chakra-ui/icons'
5 | import {
6 | Drawer,
7 | DrawerBody,
8 | DrawerFooter,
9 | DrawerHeader,
10 | DrawerOverlay,
11 | DrawerContent,
12 | DrawerCloseButton,
13 | useDisclosure,
14 | useToast
15 | } from '@chakra-ui/react'
16 | import AccordionItenm from '../components/accordion/accordion'
17 | import CopyToClipboard from 'react-copy-to-clipboard'
18 | const Html = () => {
19 | const { isOpen, onOpen, onClose } = useDisclosure()
20 | const [placement, setPlacement] = useState('left')
21 | const [size, setSize] = useState('')
22 | const [clipboard , setClipboard] = useState(false)
23 | const toast = useToast()
24 |
25 | const handleClip = () => {
26 | setClipboard(true)
27 | toast({
28 | position: 'top-right',
29 | render: () => (
30 |
31 | Nusxa olindi!
32 |
33 | ),
34 | })
35 | }
36 |
37 | const handleClick = (newSize) => {
38 | setSize(newSize)
39 | onOpen()
40 | }
41 | const nandleClose = () => {
42 | onClose()
43 | }
44 | const sizes = ['md']
45 | useEffect(() => {
46 | window.scroll(0,0)
47 | }, [])
48 |
49 | return (
50 |
51 |
52 |
53 | {onOpen &&
54 | }
56 |
57 | {sizes.map((size) => (
58 | handleClick(size)} bg={'#233242'} _hover={{bg: '#222'}} display={{base: 'block' , md: 'none'}}>
59 |
61 |
62 | ))}
63 |
64 |
66 |
67 |
70 |
71 |
72 |
73 |
74 | HTML DARSLARI
75 |
76 |
77 |
78 |
79 |
80 |
81 | HTML veb-sahifalar uchun standart belgilash tilidir.
82 | HTML yordamida siz o'z veb-saytingizni yaratishingiz mumkin.
83 | HTMLni o'rganish juda oson - bu sizga yoqadi!
84 |
85 |
86 |
87 | HTML nima?
88 |
89 |
90 |
91 |
92 | HTML stands for Hyper Text Markup Language
93 | HTML veb-sahifalarni yaratish uchun standart belgilash tilidir
94 | HTML Web-sahifaning tuzilishini tavsiflaydi
95 | HTML bir qator elementlardan iborat
96 | HTML elementlari brauzerga kontentni qanday ko'rsatishni aytadi
97 | HTML elementlari "bu sarlavha", "bu paragraf",
98 |
99 |
100 |
101 |
102 |
103 |
104 | HTML bilan oson o'rganish "O'zingiz sinab ko'ring"
105 |
106 |
107 | "O'zingiz sinab ko'ring" muharririmiz yordamida siz HTML kodni tahrirlashingiz va natijani ko'rishingiz mumkin:
108 |
109 |
110 |
111 |
112 | Misol
113 |
114 | {`{`html>`}
115 | {``}
116 | {``} <span style={{color: 'white'}}>Html darslari</span> {` `}
117 | {``}
118 | {``} Bu heading {` `}
119 | {``} Bu paragraph {`
`}
120 | {``}
121 | {``}
122 |
123 |
124 |
125 | Nusxa olish
126 |
127 |
128 |
129 |
130 |
131 | )
132 | }
133 |
134 | export default Html
--------------------------------------------------------------------------------
/src/pages/html1dars.jsx:
--------------------------------------------------------------------------------
1 | import { Box , Flex , Heading , Button , Text , Image} from '@chakra-ui/react'
2 | import { HamburgerIcon , CloseIcon } from '@chakra-ui/icons'
3 | import Sidebar from '../components/sidebarhtml/sidebarhtml'
4 | import {
5 | Drawer,
6 | DrawerBody,
7 | DrawerFooter,
8 | DrawerHeader,
9 | DrawerOverlay,
10 | DrawerContent,
11 | DrawerCloseButton,
12 | useDisclosure,
13 | useToast,Divider
14 | } from '@chakra-ui/react'
15 | import AccordionItenm from '../components/accordion/accordion'
16 | import CopyToClipboard from 'react-copy-to-clipboard'
17 | import { useEffect, useState } from 'react'
18 | import { video, vsc, vsp } from '../assets'
19 | const Html1dars = () => {
20 | const { isOpen, onOpen, onClose } = useDisclosure()
21 | const [placement, setPlacement] = useState('left')
22 | const [size, setSize] = useState('')
23 | const [clipboard , setClipboard] = useState(false)
24 | const toast = useToast()
25 |
26 | const handleClip = () => {
27 | setClipboard(true)
28 | toast({
29 | position: 'top-right',
30 | render: () => (
31 |
32 | Nusxa olindi!
33 |
34 | ),
35 | })
36 | }
37 | const handleClick = (newSize) => {
38 | setSize(newSize)
39 | onOpen()
40 | }
41 | const nandleClose = () => {
42 | onClose()
43 | }
44 | const sizes = ['md']
45 | useEffect(() => {
46 | window.scroll(0,0)
47 | }, [])
48 | return (
49 |
50 |
51 |
52 | {onOpen &&
53 | }
55 |
56 | {sizes.map((size) => (
57 | handleClick(size)} bg={'#233242'} _hover={{bg: '#222'}} display={{base: 'block' , md: 'none'}}>
58 |
60 |
61 | ))}
62 |
63 |
65 |
66 |
69 |
70 |
71 |
72 |
73 | HTML O’rnatish
74 |
75 |
76 |
77 |
79 |
80 | 1-Qadam
81 | Visuale studio dasturini yusklash
82 |
84 |
85 |
89 |
90 | 2-Qadam
91 | VS code ga kirish va papka ochish
92 |
94 |
95 |
100 |
101 | 3-Qadam
102 | Papkadan so’ng file ochish fileni nomi har doim projectda bitta index.html bo’lish kerak bo’ladi chunki brouser faqar index filenigina tushunadi html tehnalogiyasini o’rganyotdanizda file nomi ohiri tehnalogiya nomi bilan tugashi shart bo’ladi yani index.html
103 |
105 |
106 |
111 |
112 | 4-Qadam
113 | File ichiga kiriladi va boshlang’ich kodlar chaqirildi kodlarni ! shu belgi yoki html5 buyrug’i yordamida chiqiriladi.
114 |
115 | Misol
116 |
117 | {`{`html`} {`>`}
118 | {`lang= "en" {`>`}
119 | {` `}
120 |
121 | {`{`>`}
122 | {`{`content=`} {`"IE=edge"`} {`>`}
123 | {`content= "width=device-width, initial-scale=1.0" {`>`}
124 | {` `} <span style={{color: 'white'}}> Document</span> {` `}
125 | {` `}
126 | {` `}
127 | Kod yoziladi
128 | {` `}
129 | {` `}
130 |
131 |
132 |
133 | Nusxa olish
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 | )
142 | }
143 |
144 | export default Html1dars
--------------------------------------------------------------------------------
/src/pages/html2dars.jsx:
--------------------------------------------------------------------------------
1 | import { Box , Flex , Heading , Button , Text , Image} from '@chakra-ui/react'
2 | import { HamburgerIcon , CloseIcon } from '@chakra-ui/icons'
3 | import Sidebar from '../components/sidebarhtml/sidebarhtml'
4 | import {
5 | Drawer,
6 | DrawerBody,
7 | DrawerFooter,
8 | DrawerHeader,
9 | DrawerOverlay,
10 | DrawerContent,
11 | DrawerCloseButton,
12 | useDisclosure,
13 | useToast,Divider
14 | } from '@chakra-ui/react'
15 | import AccordionItenm from '../components/accordion/accordion'
16 | import CopyToClipboard from 'react-copy-to-clipboard'
17 | import { useEffect, useState } from 'react'
18 |
19 | const Html2dars = () => {
20 | const { isOpen, onOpen, onClose } = useDisclosure()
21 | const [placement, setPlacement] = useState('left')
22 | const [size, setSize] = useState('')
23 | const [clipboard , setClipboard] = useState(false)
24 | const toast = useToast()
25 |
26 | const handleClip = () => {
27 | setClipboard(true)
28 | toast({
29 | position: 'top-right',
30 | render: () => (
31 |
32 | Nusxa olindi!
33 |
34 | ),
35 | })
36 | }
37 | const handleClick = (newSize) => {
38 | setSize(newSize)
39 | onOpen()
40 | }
41 | const nandleClose = () => {
42 | onClose()
43 | }
44 | const sizes = ['md']
45 | useEffect(() => {
46 | window.scroll(0,0)
47 | }, [])
48 | return (
49 |
50 |
51 |
52 | {onOpen &&
53 | }
55 |
56 | {sizes.map((size) => (
57 | handleClick(size)} bg={'#233242'} _hover={{bg: '#222'}} display={{base: 'block' , md: 'none'}}>
58 |
60 |
61 | ))}
62 |
63 |
65 |
66 |
69 |
70 |
71 |
72 |
73 | HTML asosiy misollar
74 |
75 |
76 |
77 |
80 |
81 | HTML hujjatlar
82 | Barcha HTML hujjatlari hujjat turi deklaratsiyasi bilan boshlanishi kerak: {`.`}
83 | HTML hujjatining o'zi {` bilan boshlanadi va `} bilan tugaydi.
84 | HTML hujjatining ko'rinadigan qismi {` va `} orasida joylashgan.
85 |
86 |
87 |
88 |
89 |
90 | Misol
91 |
92 | {`{`html`} {`>`}
93 | {`lang= "en" {`>`}
94 | {` `}
95 |
96 | {` `} <span style={{color: 'white'}}> Document</span> {` `}
97 | {` `}
98 | {` `}
99 |
100 | {` `} Shu holatda {` `}
101 | {` `}Shu holatda {`
`}
102 |
103 | {` `}
104 | {` `}
105 |
106 |
107 |
108 | Nusxa olish
109 |
110 |
111 |
112 |
113 |
114 |
115 |
119 |
120 | {` Deklaratsiyasi`}
121 | {``} deklaratsiyasi hujjat turini ifodalaydi va brauzerlarga veb-sahifalarni to'g'ri ko'rsatishga yordam beradi.U faqat bir marta, sahifaning yuqori qismida (har qanday HTML teglaridan oldin) paydo bo'lishi kerak.
123 | {``} deklaratsiyasi katta-kichik harflarga sezgir emas.HTML5 uchun {``} deklaratsiyasi:
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 | {` {`html `} {`>`}
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 | )
146 | }
147 |
148 | export default Html2dars
--------------------------------------------------------------------------------
/src/pages/html3dars.jsx:
--------------------------------------------------------------------------------
1 | import { Box , Flex , Heading , Button , Text , Image} from '@chakra-ui/react'
2 | import { HamburgerIcon , CloseIcon } from '@chakra-ui/icons'
3 | import Sidebar from '../components/sidebarhtml/sidebarhtml'
4 | import {
5 | Drawer,
6 | DrawerBody,
7 | DrawerFooter,
8 | DrawerHeader,
9 | DrawerOverlay,
10 | DrawerContent,
11 | DrawerCloseButton,
12 | useDisclosure,
13 | useToast,Divider
14 | } from '@chakra-ui/react'
15 | import AccordionItenm from '../components/accordion/accordion'
16 | import CopyToClipboard from 'react-copy-to-clipboard'
17 | import { useEffect, useState } from 'react'
18 | import { vsc, vsp } from '../assets'
19 |
20 | const Html3dars = () => {
21 | const { isOpen, onOpen, onClose } = useDisclosure()
22 | const [placement, setPlacement] = useState('left')
23 | const [size, setSize] = useState('')
24 | const [clipboard , setClipboard] = useState(false)
25 | const toast = useToast()
26 |
27 | const handleClip = () => {
28 | setClipboard(true)
29 | toast({
30 | position: 'top-right',
31 | render: () => (
32 |
33 | Nusxa olindi!
34 |
35 | ),
36 | })
37 | }
38 | const handleClick = (newSize) => {
39 | setSize(newSize)
40 | onOpen()
41 | }
42 | const nandleClose = () => {
43 | onClose()
44 | }
45 | const sizes = ['md']
46 | useEffect(() => {
47 | window.scroll(0,0)
48 | }, [])
49 | return (
50 |
51 |
52 |
53 | {onOpen &&
54 | }
56 |
57 | {sizes.map((size) => (
58 | handleClick(size)} bg={'#233242'} _hover={{bg: '#222'}} display={{base: 'block' , md: 'none'}}>
59 |
61 |
62 | ))}
63 |
64 |
66 |
67 |
70 |
71 |
72 |
73 |
74 | HTML Hedinglar
75 |
76 |
77 |
78 |
79 |
81 |
82 | HTML sarlavhalari veb-sahifada ko'rsatmoqchi bo'lgan sarlavhalar yoki subtitrlardir.
83 |
84 |
85 |
88 |
89 |
90 | Misol
91 |
92 | Heading 1
93 | Heading 2
94 | Heading 3
95 | Heading 4
96 | Heading 5
97 | Heading 6
98 |
99 |
100 | Nusxa olish
101 |
102 |
103 |
104 |
105 |
109 |
110 | HTML Hedinglar
111 | HTML sarlavhalari {` dan `} teglari bilan belgilanadi.
112 | {` eng muhim sarlavhani belgilaydi. `} eng muhim sarlavhani belgilaydi.
113 |
114 |
115 |
116 |
117 |
118 | Misol
119 |
120 | {``} Heading 1 {` `}
121 | {``} Heading 2 {` `}
122 | {``} Heading 3 {` `}
123 | {``} Heading 4 {` `}
124 | {``} Heading 5 {` `}
125 | {``} Heading 6 {` `}
126 |
127 |
128 | Nusxa olish
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 | )
138 | }
139 |
140 | export default Html3dars
--------------------------------------------------------------------------------
/src/pages/htmlCode.jsx:
--------------------------------------------------------------------------------
1 | import { Box , Flex , Heading , Button , Text , Image , Input , FormLabel, HStack, Radio, RadioGroup} from '@chakra-ui/react'
2 | import { HamburgerIcon , CloseIcon } from '@chakra-ui/icons'
3 | import Sidebar from '../components/sidebarhtml/sidebarhtml'
4 | import {
5 | Drawer,
6 | DrawerBody,
7 | DrawerFooter,
8 | DrawerHeader,
9 | DrawerOverlay,
10 | DrawerContent,
11 | DrawerCloseButton,
12 | useDisclosure,
13 | useToast,Divider,
14 | UnorderedList,
15 | ListItem
16 | } from '@chakra-ui/react'
17 | import AccordionItenm from '../components/accordion/accordion'
18 | import CopyToClipboard from 'react-copy-to-clipboard'
19 | import { useEffect, useState } from 'react'
20 | import {
21 | Table,
22 | Thead,
23 | Tbody,
24 | Tfoot,
25 | Tr,
26 | Th,
27 | Td,
28 | TableCaption,
29 | TableContainer,
30 | } from '@chakra-ui/react'
31 | import { Search2Icon } from '@chakra-ui/icons'
32 | import { data } from '../htmlCode'
33 | const HtmlCode = () => {
34 | const { isOpen, onOpen, onClose } = useDisclosure()
35 | const [placement, setPlacement] = useState('left')
36 | const [size, setSize] = useState('')
37 | const [clipboard , setClipboard] = useState(false)
38 | const toast = useToast()
39 | const [search , setSearch] = useState("")
40 | const handleClip = () => {
41 | setClipboard(true)
42 | toast({
43 | position: 'top-right',
44 | render: () => (
45 |
46 | Nusxa olindi!
47 |
48 | ),
49 | })
50 | }
51 | const handleClick = (newSize) => {
52 | setSize(newSize)
53 | onOpen()
54 | }
55 | const nandleClose = () => {
56 | onClose()
57 | }
58 | const sizes = ['md']
59 | useEffect(() => {
60 | window.scroll(0,0)
61 | }, [])
62 |
63 |
64 | let input = document.querySelector('#inp')
65 | document.addEventListener('keyup', e => {
66 | if(e.ctrlKey && e.key == "/"){
67 | input.focus();
68 | }
69 | })
70 | return (
71 |
72 |
73 |
74 | {onOpen &&
75 | }
77 |
78 | {sizes.map((size , i) => (
79 | handleClick(size)} bg={'#233242'} _hover={{bg: '#222'}} display={{base: 'block' , md: 'none'}}>
80 |
82 |
83 | ))}
84 |
85 |
87 |
88 |
91 |
92 |
93 |
94 |
95 | HTML Teglari Alifbo Tartibida Tartiblangan
96 |
97 |
98 |
99 |
105 |
106 | Ctrl + /
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 | Turi
118 | Tavsif
119 |
120 |
121 |
122 | {data.filter((item => {
123 | return search.toLowerCase() == '' ? item : item.tag.toLowerCase().includes(search)
124 | })).map((item) => (
125 |
126 | {item.tag}
127 | {item.desc}
128 |
129 |
130 | ))}
131 |
132 |
133 |
134 |
135 |
136 |
137 | Taglar soni {data.length} ta dan iborat
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 | )
150 | }
151 |
152 | export default HtmlCode
--------------------------------------------------------------------------------
/src/pages/pageNotFound.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | createStyles,
3 | Image,
4 | Container,
5 | Title,
6 | Text,
7 | Button,
8 | SimpleGrid,
9 | rem,
10 | } from '@mantine/core';
11 | import { notFound} from '../assets'
12 | import { Link } from 'react-router-dom';
13 | import { Box } from '@chakra-ui/react';
14 | import { ArrowBackIcon } from '@chakra-ui/icons';
15 |
16 | const useStyles = createStyles((theme) => ({
17 | root: {
18 | paddingTop: rem(80),
19 | paddingBottom: rem(80),
20 | },
21 |
22 | title: {
23 | fontWeight: 900,
24 | fontSize: rem(34),
25 | marginBottom: theme.spacing.md,
26 | fontFamily: `Greycliff CF, ${theme.fontFamily}`,
27 |
28 | [theme.fn.smallerThan('sm')]: {
29 | fontSize: rem(32),
30 | },
31 | },
32 |
33 | control: {
34 | [theme.fn.smallerThan('sm')]: {
35 | width: '100%',
36 | },
37 | },
38 |
39 | mobileImage: {
40 | [theme.fn.largerThan('sm')]: {
41 | display: 'none',
42 | },
43 | },
44 |
45 | desktopImage: {
46 | [theme.fn.smallerThan('sm')]: {
47 | display: 'none',
48 | },
49 | },
50 | }));
51 |
52 | const PageNotFound = () => {
53 | const { classes } = useStyles();
54 |
55 | return (
56 |
57 |
58 |
59 |
60 |
62 |
Nimadir noto‘g‘ri...
63 |
64 | Siz ochmoqchi bo'lgan sahifa mavjud emas. Siz manzilni yoki manzilni noto'g'ri kiritgan bo'lishingiz mumkin
65 | sahifa boshqa URL manziliga ko'chirildi. Agar buni xato deb hisoblasangiz, qo'llab-quvvatlash xizmatiga murojaat qiling.
66 |
67 |
68 |
71 |
73 |
75 |
76 |
77 |
78 | );
79 | }
80 |
81 |
82 | export default PageNotFound
83 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------