Skip to content

Commit 8ffdcb7

Browse files
sajadevosajadevo
committed
update the content
1 parent 79959e2 commit 8ffdcb7

File tree

3 files changed

+87
-80
lines changed

3 files changed

+87
-80
lines changed

‎pages/_app.tsx‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
1+
import Link from "next/link";
12
import { Fragment, useEffect } from "react";
23

34
// next.js components
45
import Script from "next/script";
56

67
// @material-tailwind components
7-
import { ThemeProvider } from "@material-tailwind/react";
8+
import {
9+
Typography,
10+
IconButton,
11+
Menu,
12+
MenuHandler,
13+
MenuItem,
14+
MenuList,
15+
ThemeProvider,
16+
} from "@material-tailwind/react";
817

918
// styles
1019
import "/styles/globals.css";
@@ -34,6 +43,61 @@ function MyApp({ Component, pageProps }) {
3443
<Fragment>
3544
<ThemeProvider>
3645
<Component {...pageProps} />
46+
<div className="fixed top-2/4 right-4 hidden -translate-y-2/4 lg:block">
47+
<Menu placement="left">
48+
<MenuHandler>
49+
<IconButton
50+
size="lg"
51+
color="white"
52+
className="border border-blue-gray-50"
53+
>
54+
<img
55+
src="/img/logos/icon-react.svg"
56+
alt="react-icon"
57+
className="h-20 w-20"
58+
/>
59+
</IconButton>
60+
</MenuHandler>
61+
<MenuList className="p-1.5">
62+
<Link href="/docs/react/installation" target="_blank">
63+
<MenuItem className="flex items-center gap-2">
64+
<img
65+
src="/img/logos/icon-react.svg"
66+
alt="react-icon"
67+
className="h-6 w-6"
68+
/>
69+
<Typography variant="h6" color="blue-gray">
70+
React
71+
</Typography>
72+
</MenuItem>
73+
</Link>
74+
<Link href="/docs/html/installation" target="_blank">
75+
<MenuItem className="flex items-center gap-2">
76+
<img
77+
src="/img/logos/icon-html.svg"
78+
alt="html-icon"
79+
className="h-6 w-6"
80+
/>
81+
<Typography variant="h6" color="blue-gray">
82+
HTML
83+
</Typography>
84+
</MenuItem>
85+
</Link>
86+
<Link href="/figma" target="_blank">
87+
<MenuItem className="flex items-center gap-2">
88+
<img
89+
src="/img/icon-figma.svg"
90+
alt="figma-icon"
91+
className="h-6 w-6"
92+
/>
93+
<Typography variant="h6" color="blue-gray">
94+
Figma
95+
</Typography>
96+
</MenuItem>
97+
</Link>
98+
</MenuList>
99+
</Menu>
100+
</div>
37101
</ThemeProvider>
38102

39103
{/* Global Site Code Pixel - Facebook Pixel */}

‎widgets/sections/hero.tsx‎

Lines changed: 20 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React from "react";
22
import Link from "next/link";
33
import { CopyToClipboard } from "react-copy-to-clipboard";
4-
import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
4+
import { CheckIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
55
import {
66
Chip,
77
Typography,
88
Button,
99
Card,
1010
IconButton,
11-
Menu,
12-
MenuHandler,
13-
MenuItem,
14-
MenuList,
1511
} from "@material-tailwind/react";
1612

1713
interface StatsCardPropsType {
@@ -55,7 +51,7 @@ const stats = [
5551

5652
export function Hero() {
5753
const [copied, setCopied] = React.useState(false);
58-
const [active, setActive] = React.useState(2);
54+
const [isHtml, setIsHtml] = React.useState(false);
5955

6056
return (
6157
<>
@@ -83,53 +79,54 @@ export function Hero() {
8379
bonus!
8480
</Typography>
8581
<div className="flex shrink-0 flex-wrap place-content-center items-center gap-4">
86-
<div className="inline-flex items-center justify-between gap-3 rounded-lg border-[1.5px] border-blue-gray-50 bg-white py-1 px-2 font-medium text-primary">
87-
<Typography variant="h6">
88-
npm i @material-tailwind/react
82+
<div className="inline-flex items-center justify-between gap-0.5 rounded-lg border-[1.5px] border-blue-gray-50 bg-white p-1 font-medium text-primary">
83+
<Typography variant="h6" className="mx-4">
84+
npm i @material-tailwind/{isHtml ? "html" : "react"}
8985
</Typography>
9086
<div>
9187
<CopyToClipboard
9288
onCopy={() => setCopied(true)}
93-
text="npm i @material-tailwind/react"
89+
text={`npm i @material-tailwind/${isHtml ? "html" : "react"}`}
9490
>
9591
<IconButton
9692
color="white"
97-
className={`cursor-pointer ${
98-
active === 1 ? "opacity-100" : "opacity-50"
99-
}`}
93+
variant="text"
10094
onMouseLeave={() => setCopied(false)}
101-
onClick={() => setActive(1)}
10295
>
103-
<DocumentDuplicateIcon className="h-5 w-5 text-gray-700" />
96+
{copied ? (
97+
<CheckIcon className="h-5 w-5 text-green-600" />
98+
) : (
99+
<DocumentDuplicateIcon className="h-5 w-5 text-gray-700" />
100+
)}
104101
</IconButton>
105102
</CopyToClipboard>
106103
</div>
107104
<IconButton
108105
className={`cursor-pointer ${
109-
active === 2 ? "opacity-100" : "opacity-50 grayscale"
106+
!isHtml ? "opacity-100" : "opacity-50 grayscale"
110107
}`}
111-
size="sm"
112108
color="white"
113-
onClick={() => setActive(2)}
109+
variant="text"
110+
onClick={() => setIsHtml(false)}
114111
>
115112
<img
116113
src="/img/logos/icon-react.svg"
117114
alt="react-icon"
118-
className="h-5 w-5"
115+
className="h-6 w-6"
119116
/>
120117
</IconButton>
121118
<IconButton
122119
className={`cursor-pointer ${
123-
active === 3 ? "opacity-100" : "opacity-50 grayscale"
120+
isHtml ? "opacity-100" : "opacity-50 grayscale"
124121
}`}
125-
size="sm"
122+
variant="text"
126123
color="white"
127-
onClick={() => setActive(3)}
124+
onClick={() => setIsHtml(true)}
128125
>
129126
<img
130127
src="/img/logos/icon-html.svg"
131128
alt="html-icon"
132-
className="h-5 w-5"
129+
className="h-6 w-6"
133130
/>
134131
</IconButton>
135132
</div>
@@ -151,57 +148,6 @@ export function Hero() {
151148
</div>
152149
</div>
153150
</div>
154-
<Card className="fixed right-10 top-20 translate-y-[42rem] border border-gray-100 p-3">
155-
<Menu placement="bottom-end">
156-
<MenuHandler>
157-
<IconButton size="lg" color="white">
158-
<img
159-
src="/img/logos/icon-react.svg"
160-
alt="react-icon"
161-
className="h-20 w-20"
162-
/>
163-
</IconButton>
164-
</MenuHandler>
165-
<MenuList className="mt-4">
166-
<Link href="/docs/react/installation" target="_blank">
167-
<MenuItem className="flex items-center gap-2">
168-
<img
169-
src="/img/logos/icon-react.svg"
170-
alt="react-icon"
171-
className="h-6 w-6"
172-
/>
173-
<Typography variant="h6" color="blue-gray">
174-
React
175-
</Typography>
176-
</MenuItem>
177-
</Link>
178-
<Link href="/docs/html/installation" target="_blank">
179-
<MenuItem className="flex items-center gap-2">
180-
<img
181-
src="/img/logos/icon-html.svg"
182-
alt="html-icon"
183-
className="h-6 w-6"
184-
/>
185-
<Typography variant="h6" color="blue-gray">
186-
HTML
187-
</Typography>
188-
</MenuItem>
189-
</Link>
190-
<Link href="/figma" target="_blank">
191-
<MenuItem className="flex items-center gap-2">
192-
<img
193-
src="/img/icon-figma.svg"
194-
alt="figma-icon"
195-
className="h-6 w-6"
196-
/>
197-
<Typography variant="h6" color="blue-gray">
198-
Figma
199-
</Typography>
200-
</MenuItem>
201-
</Link>
202-
</MenuList>
203-
</Menu>
204-
</Card>
205151
</>
206152
);
207153
}

‎widgets/sections/pro.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -132,10 +132,7 @@ export function Pro() {
132132
</Link>
133133
</div>
134134
<div className="mt-16 text-center">
135-
<Link
136-
href="https://www.figma.com/file/UxNLsnbwl4Hps3KdbFvcgK/Material-Tailwind-Figma-v2.0.0?type=design&node-id=916-5781&mode=design&t=WzeVRo5zGAzGdjHv-0"
137-
target="_blank"
138-
>
135+
<Link href="/blocks">
139136
<Button
140137
size="lg"
141138
variant="outlined"
@@ -144,7 +141,7 @@ export function Pro() {
144141
Material Tailwind PRO
145142
</Button>
146143
</Link>
147-
<Link href="/figma#pricing">
144+
<Link href="/blocks#pricing">
148145
<Button
149146
size="lg"
150147
variant="filled"

0 commit comments

Comments
 (0)