Skip to content

Commit ab27f08

Browse files
jsvigneshkannajsvigneshkanna
committed
codepen added
1 parent d95eb4d commit ab27f08

File tree

6 files changed

+111
-3
lines changed

6 files changed

+111
-3
lines changed

‎components/codepen.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* eslint-disable react-hooks/rules-of-hooks */
2+
import {
3+
PrefillEmbed,
4+
PrefillLang,
5+
useCodePenEmbed,
6+
stripIndent,
7+
} from "react-codepen-prefill-embed";
8+
9+
const Codepen = ({htmlText}) => {
10+
useCodePenEmbed();
11+
return (
12+
<PrefillEmbed
13+
className="codepen"
14+
penTitle="My sweet demo"
15+
embedHeight="400"
16+
themeId="319"
17+
editable
18+
description="Renders a barebones React component"
19+
tags={["tailwind", "html", "tailwindcss"]}
20+
htmlClasses={["loading", "no-js"]}
21+
preview
22+
defaultTabs={["result", "HTML"]}
23+
head={
24+
<meta name="viewport" content="width=device-width, initial-scale=1" />
25+
}
26+
scripts={["https://cdn.tailwindcss.com"]}
27+
stylesheets={["https://cdn.tailwindcss.com"]}>
28+
<PrefillLang lang="html">{htmlText}</PrefillLang>
29+
</PrefillEmbed>
30+
);
31+
};
32+
33+
export default Codepen;

‎components/navbar.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Image from 'next/image';
2-
import Link from 'next/link';
1+
import Image from "next/image";
2+
import Link from "next/link";
33

44
const Navbar = () => {
55
return (
@@ -8,7 +8,7 @@ const Navbar = () => {
88
<Image src="/nav_logo.png" alt="logo" width={240} height={36} />
99
<div className="right_contents">
1010
<div className="nav_links">
11-
<Link href="/">Components</Link>
11+
<Link href="/components">Components</Link>
1212
</div>
1313
<div className="nav_links">
1414
<Link href="/">Documentation</Link>

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,17 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"html-to-text": "^8.2.1",
1213
"next": "12.3.1",
1314
"react": "18.2.0",
15+
"react-codepen-prefill-embed": "0.0.2",
1416
"react-dom": "18.2.0"
1517
},
1618
"devDependencies": {
1719
"autoprefixer": "^10.4.12",
1820
"eslint": "8.25.0",
1921
"eslint-config-next": "12.3.1",
22+
"file-loader": "^6.2.0",
2023
"postcss": "^8.4.18",
2124
"tailwindcss": "^3.1.8"
2225
}

‎pages/components.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Head from "next/head";
2+
import Navbar from "../components/navbar";
3+
import Codepen from "../components/codepen";
4+
import {useEffect, useState} from "react";
5+
import {htmlToText} from "html-to-text";
6+
7+
import test from "../tailwind_components/buttons/test_file.jsx";
8+
// const htmlText = htmlToText(test_component);
9+
console.log(htmlToText(test));
10+
11+
const Components = () => {
12+
return (
13+
<div>
14+
<Head>
15+
<title>Tailwind Bootstrap</title>
16+
<meta name="description" content="TailwindCSS ui component bootstrap" />
17+
<link rel="icon" href="/favicon.ico" />
18+
</Head>
19+
20+
<div className=" bg-slate-100 min-h-screen">
21+
<Navbar />
22+
<Codepen htmlText={test} />
23+
</div>
24+
</div>
25+
);
26+
};
27+
28+
export default Components;

‎tailwind_components/buttons/test_file.jsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const test = (
2+
<div class="bg-gray-50">
3+
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
4+
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
5+
<span class="block">Ready to dive in?</span>
6+
<span class="block text-indigo-600">Start your free trial today.</span>
7+
</h2>
8+
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
9+
<div class="inline-flex rounded-md shadow">
10+
<a
11+
href="#"
12+
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">
13+
Get started
14+
</a>
15+
</div>
16+
<div class="ml-3 inline-flex rounded-md shadow">
17+
<a
18+
href="#"
19+
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">
20+
Learn more
21+
</a>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
);
27+
28+
export default test;

‎webpack.config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const path = require("path");
2+
3+
module.exports = {
4+
module: {
5+
rules: [
6+
{
7+
test: /\.(png|jpe?g|gif|html)$/i,
8+
use: [
9+
{
10+
loader: "file-loader",
11+
},
12+
],
13+
},
14+
],
15+
},
16+
};

0 commit comments

Comments
 (0)