Skip to content

Commit 4ea2096

Browse files
AbbeyafolabyAbbeyafolaby
authored
feat: added buttons for Tailwind code options (#410)
1 parent 6ec5251 commit 4ea2096

14 files changed

+626
-234
lines changed

‎index.html

Lines changed: 211 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1179,7 +1179,16 @@ <h2>
11791179
style="color: white; margin-right: 5px"
11801180
width="20"
11811181
></iconify-icon>
1182-
Get Code
1182+
Get CSS Code
1183+
</div>
1184+
<div class="btn" data-download="input-range-tailwind">
1185+
<iconify-icon
1186+
inline
1187+
icon="bx:code-alt"
1188+
style="color: white; margin-right: 5px"
1189+
width="20"
1190+
></iconify-icon>
1191+
Get Tailwind
11831192
</div>
11841193
</div>
11851194
</div>
@@ -1228,16 +1237,26 @@ <h2>Results</h2>
12281237
Download Svg
12291238
</button>
12301239
</div>
1231-
1232-
<button class="btn" data-download="pic-text-code">
1233-
<iconify-icon
1234-
inline
1235-
icon="bx:code-alt"
1236-
style="color: white; margin-right: 5px"
1237-
width="20"
1238-
></iconify-icon>
1239-
Get Code
1240-
</button>
1240+
<div class="btn-container">
1241+
<button class="btn" data-download="pic-text-code">
1242+
<iconify-icon
1243+
inline
1244+
icon="bx:code-alt"
1245+
style="color: white; margin-right: 5px"
1246+
width="20"
1247+
></iconify-icon>
1248+
Get CSS Code
1249+
</button>
1250+
<button class="btn" data-download="pic-text-tailwind">
1251+
<iconify-icon
1252+
inline
1253+
icon="bx:code-alt"
1254+
style="color: white; margin-right: 5px"
1255+
width="20"
1256+
></iconify-icon>
1257+
Get Tailwind
1258+
</button>
1259+
</div>
12411260
</div>
12421261
</div>
12431262
<!-- End of Pic Text Result -->
@@ -1267,118 +1286,209 @@ <h2>Results</h2>
12671286
Download Svg
12681287
</button>
12691288
</div>
1270-
1271-
<button class="btn" data-download="gradient-text-code">
1272-
<iconify-icon
1273-
inline
1274-
icon="bx:code-alt"
1275-
style="color: white; margin-right: 5px"
1276-
width="20"
1277-
></iconify-icon>
1278-
Get Code
1279-
</button>
1289+
<div class="btn-container">
1290+
<button class="btn" data-download="gradient-text-code">
1291+
<iconify-icon
1292+
inline
1293+
icon="bx:code-alt"
1294+
style="color: white; margin-right: 5px"
1295+
width="20"
1296+
></iconify-icon>
1297+
Get CSS Code
1298+
</button>
1299+
<button class="btn" data-download="gradient-text-tailwind">
1300+
<iconify-icon
1301+
inline
1302+
icon="bx:code-alt"
1303+
style="color: white; margin-right: 5px"
1304+
width="20"
1305+
></iconify-icon>
1306+
Get Tailwind
1307+
</button>
1308+
</div>
12801309
</div>
12811310
</div>
12821311
<!-- End of Gradient Text Result -->
12831312

12841313
<!-- Gradient Border Result -->
12851314
<div class="download-output" data-result="gradient-border">
12861315
<div class="output gradient-border"></div>
1287-
<div class="download-btn">
1288-
<button class="btn" data-download="gradient-border-code">
1289-
<iconify-icon
1290-
inline
1291-
icon="bx:code-alt"
1292-
style="color: white; margin-right: 5px"
1293-
width="20"
1294-
></iconify-icon>
1295-
Get Code
1296-
</button>
1316+
<div class="btn-container">
1317+
<div class="download-btn">
1318+
<button class="btn" data-download="gradient-border-code">
1319+
<iconify-icon
1320+
inline
1321+
icon="bx:code-alt"
1322+
style="color: white; margin-right: 5px"
1323+
width="20"
1324+
></iconify-icon>
1325+
Get CSS Code
1326+
</button>
1327+
</div>
1328+
<div class="download-btn">
1329+
<button class="btn" data-download="gradient-border-tailwind">
1330+
<iconify-icon
1331+
inline
1332+
icon="bx:code-alt"
1333+
style="color: white; margin-right: 5px"
1334+
width="20"
1335+
></iconify-icon>
1336+
Get Tailwind
1337+
</button>
1338+
</div>
12971339
</div>
12981340
</div>
12991341
<!-- End of Gradient Border Result -->
13001342

13011343
<!-- Gradient Background Result -->
13021344
<div class="download-output" data-result="gradient-background">
13031345
<div class="output"></div>
1304-
<div class="download-btn">
1305-
<button class="btn" data-download="gradient-background-code">
1306-
<iconify-icon
1307-
inline
1308-
icon="bx:code-alt"
1309-
style="color: white; margin-right: 5px"
1310-
width="20"
1311-
></iconify-icon>
1312-
Get Code
1313-
</button>
1346+
<div class="btn-container">
1347+
<div class="download-btn">
1348+
<button class="btn" data-download="gradient-background-code">
1349+
<iconify-icon
1350+
inline
1351+
icon="bx:code-alt"
1352+
style="color: white; margin-right: 5px"
1353+
width="20"
1354+
></iconify-icon>
1355+
Get CSS Code
1356+
</button>
1357+
</div>
1358+
<div class="download-btn">
1359+
<button
1360+
class="btn"
1361+
data-download="gradient-background-tailwind"
1362+
>
1363+
<iconify-icon
1364+
inline
1365+
icon="bx:code-alt"
1366+
style="color: white; margin-right: 5px"
1367+
width="20"
1368+
></iconify-icon>
1369+
Get Tailwind
1370+
</button>
1371+
</div>
13141372
</div>
13151373
</div>
13161374
<!-- End of Gradient Background Result -->
13171375

13181376
<!-- Animation Result -->
13191377
<div class="download-output" data-result="animation">
13201378
<div class="output"></div>
1321-
<div class="download-btn">
1322-
<button class="btn" data-download="animation-code">
1323-
<iconify-icon
1324-
inline
1325-
icon="bx:code-alt"
1326-
style="color: white; margin-right: 5px"
1327-
width="20"
1328-
></iconify-icon
1329-
>Get Code
1330-
</button>
1379+
<div class="btn-container">
1380+
<div class="download-btn">
1381+
<button class="btn" data-download="animation-code">
1382+
<iconify-icon
1383+
inline
1384+
icon="bx:code-alt"
1385+
style="color: white; margin-right: 5px"
1386+
width="20"
1387+
></iconify-icon
1388+
>Get CSS Code
1389+
</button>
1390+
</div>
1391+
<div class="download-btn">
1392+
<button class="btn" data-download="animation-tailwind">
1393+
<iconify-icon
1394+
inline
1395+
icon="bx:code-alt"
1396+
style="color: white; margin-right: 5px"
1397+
width="20"
1398+
></iconify-icon
1399+
>Get Tailwind
1400+
</button>
1401+
</div>
13311402
</div>
13321403
</div>
13331404
<!-- End of Animation Result -->
13341405

13351406
<!-- Border Radius Result -->
13361407
<div class="download-output" data-result="border-radius">
13371408
<div class="output"></div>
1338-
<div class="download-btn">
1339-
<button class="btn" data-download="border-radius-code">
1340-
<iconify-icon
1341-
inline
1342-
icon="bx:code-alt"
1343-
style="color: white; margin-right: 5px"
1344-
width="20"
1345-
></iconify-icon
1346-
>Get Code
1347-
</button>
1409+
<div class="btn-container">
1410+
<div class="download-btn">
1411+
<button class="btn" data-download="border-radius-code">
1412+
<iconify-icon
1413+
inline
1414+
icon="bx:code-alt"
1415+
style="color: white; margin-right: 5px"
1416+
width="20"
1417+
></iconify-icon
1418+
>Get CSS Code
1419+
</button>
1420+
</div>
1421+
<div class="download-btn">
1422+
<button class="btn" data-download="border-radius-tailwind">
1423+
<iconify-icon
1424+
inline
1425+
icon="bx:code-alt"
1426+
style="color: white; margin-right: 5px"
1427+
width="20"
1428+
></iconify-icon
1429+
>Get Tailwind Code
1430+
</button>
1431+
</div>
13481432
</div>
13491433
</div>
13501434
<!-- End of Border Radius Result -->
13511435

13521436
<!-- Box-Shadow Result -->
13531437
<div class="download-output" data-result="box-shadow">
13541438
<div class="output box-shadow"></div>
1355-
<div class="download-btn">
1356-
<button class="btn" data-download="box-shadow-code">
1357-
<iconify-icon
1358-
inline
1359-
icon="bx:code-alt"
1360-
style="color: white; margin-right: 5px"
1361-
width="20"
1362-
></iconify-icon>
1363-
Get Code
1364-
</button>
1439+
<div class="btn-container">
1440+
<div class="download-btn">
1441+
<button class="btn" data-download="box-shadow-code">
1442+
<iconify-icon
1443+
inline
1444+
icon="bx:code-alt"
1445+
style="color: white; margin-right: 5px"
1446+
width="20"
1447+
></iconify-icon>
1448+
Get CSS Code
1449+
</button>
1450+
</div>
1451+
<div class="download-btn">
1452+
<button class="btn" data-download="box-shadow-tailwind">
1453+
<iconify-icon
1454+
inline
1455+
icon="bx:code-alt"
1456+
style="color: white; margin-right: 5px"
1457+
width="20"
1458+
></iconify-icon>
1459+
Get Tailwind
1460+
</button>
1461+
</div>
13651462
</div>
13661463
</div>
13671464
<!-- End of Box-Shadow Result -->
13681465

13691466
<!-- Transform Result -->
13701467
<div class="download-output" data-result="transform">
13711468
<div class="output transform-output"></div>
1372-
<div class="download-btn">
1373-
<button class="btn" data-download="transform-code">
1374-
<iconify-icon
1375-
inline
1376-
icon="bx:code-alt"
1377-
style="color: white; margin-right: 5px"
1378-
width="20"
1379-
></iconify-icon>
1380-
Get Code
1381-
</button>
1469+
<div class="btn-container">
1470+
<div class="download-btn">
1471+
<button class="btn" data-download="transform-code">
1472+
<iconify-icon
1473+
inline
1474+
icon="bx:code-alt"
1475+
style="color: white; margin-right: 5px"
1476+
width="20"
1477+
></iconify-icon>
1478+
Get CSS Code
1479+
</button>
1480+
</div>
1481+
<div class="download-btn">
1482+
<button class="btn" data-download="transform-tailwind">
1483+
<iconify-icon
1484+
inline
1485+
icon="bx:code-alt"
1486+
style="color: white; margin-right: 5px"
1487+
width="20"
1488+
></iconify-icon>
1489+
Get Tailwind
1490+
</button>
1491+
</div>
13821492
</div>
13831493
</div>
13841494
<!-- End of Transform Result -->
@@ -1408,16 +1518,26 @@ <h2>Results</h2>
14081518
Download Svg
14091519
</button>
14101520
</div>
1411-
1412-
<button class="btn" data-download="text-shadow-code">
1413-
<iconify-icon
1414-
inline
1415-
icon="bx:code-alt"
1416-
style="color: white; margin-right: 5px"
1417-
width="20"
1418-
></iconify-icon>
1419-
Get Code
1420-
</button>
1521+
<div class="btn-container">
1522+
<button class="btn" data-download="text-shadow-code">
1523+
<iconify-icon
1524+
inline
1525+
icon="bx:code-alt"
1526+
style="color: white; margin-right: 5px"
1527+
width="20"
1528+
></iconify-icon>
1529+
Get CSS Code
1530+
</button>
1531+
<button class="btn" data-download="text-shadow-tailwind">
1532+
<iconify-icon
1533+
inline
1534+
icon="bx:code-alt"
1535+
style="color: white; margin-right: 5px"
1536+
width="20"
1537+
></iconify-icon>
1538+
Get Tailwind
1539+
</button>
1540+
</div>
14211541
</div>
14221542
</div>
14231543
<!-- End Text Shadow Result -->

‎src/lib/getElements.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ export const getResultPage = (): HTMLElement =>
1010
export const getCopyCodeButton = (attribute: string): HTMLElement =>
1111
document.querySelector(`[data-download=${attribute}-code]`) as HTMLElement;
1212

13+
export const getTailwindButton = (attribute: string): HTMLElement =>
14+
document.querySelector(
15+
`[data-download=${attribute}-tailwind]`
16+
) as HTMLElement;
17+
1318
export const getPNGButton = (attribute: string): HTMLElement =>
1419
document.querySelector(`[data-download=${attribute}-PNG]`) as HTMLElement;
1520

0 commit comments

Comments
 (0)