opdavies/inviqa-tailwindcss-example
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor: extract React components

Browse source
This commit is contained in:
Oliver Davies 2022-09-09 18:00:00 +01:00
parent 19705e904d
commit 12f4be8773
5 changed files with 88 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
components/ImageAndText.js Normal file
View file

@ -0,0 +1,57 @@
function Button({ text, ...props }) {
return (
<a
className="inline-block py-2 px-5 mt-4 text-lg font-bold border-2 transition-colors duration-200 ease-in-out hover:bg-white focus:bg-white bg-secondary border-secondary text-tertiary hover:border-quinary hover:text-quinary focus:border-quinary focus:text-quinary"
href="#0"
>
{text}
</a>
);
}
export default function ImageAndText({
buttonText,
children,
imageUrl,
title,
...props
}) {
return (
<>
<div data-theme="teal" className="mx-auto max-w-6xl">
{/* Themes: blue, purple, teal */}
<h2 className="sr-only">Featured case study</h2>
<section className="font-sans text-black">
<div className="lg:flex lg:items-center fancy-corners fancy-corners--large fancy-corners--top-left fancy-corners--bottom-right">
<div className="flex-shrink-0 self-stretch sm:flex-basis-40 md:flex-basis-50 xl:flex-basis-60">
<div className="h-full">
<article className="h-full">
<div className="h-full">
<img
className="object-cover h-full"
src={imageUrl}
width="733"
height="412"
alt='""'
typeof="foaf:Image"
/>
</div>
</article>
</div>
</div>
<div className="p-6 bg-grey">
<div className="leading-relaxed">
<h2 className="text-4xl font-bold leading-tight">{title}</h2>
<div className="mt-4 markup">{children}</div>
<p>
<Button text="Explore this event" />
</p>
</div>
</div>
</div>
</section>
</div>
</>
);
}

1
package.json
View file

@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"next": "12.3.0", "next": "12.3.0",
"postcss-nested": "^5.0.6",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0" "react-dom": "18.2.0"
}, },

69
pages/index.js
View file

@ -1,58 +1,29 @@
import ImageAndText from "../components/ImageAndText";
export default function Home() { export default function Home() {
return ( return (
<div> <div>
<div className="flex flex-col justify-center p-24 min-h-screen bg-white"> <div className="flex flex-col justify-center p-24 min-h-screen bg-white">
{/* Themes: blue, purple, teal */} <ImageAndText
<div data-theme="blue" className="mx-auto max-w-6xl"> buttonText={"Explore this event"}
<h2 className="sr-only">Featured case study</h2> imageUrl={
<section className="font-sans text-black"> "https://inviqa.com/sites/default/files/styles/pullout/public/2020-08/XD-1.jpeg?h=f75d236a&itok=PBoXPDmW"
<div className="lg:flex lg:items-center fancy-corners fancy-corners--large fancy-corners--top-left fancy-corners--bottom-right"> }
<div className="flex-shrink-0 self-stretch sm:flex-basis-40 md:flex-basis-50 xl:flex-basis-60"> title={"CXcon: Experience Transformation"}
<div className="h-full">
<article className="h-full">
<div className="h-full">
<img
className="object-cover h-full"
src="https://inviqa.com/sites/default/files/styles/pullout/public/2020-08/XD-1.jpeg?h=f75d236a&itok=PBoXPDmW"
width="733"
height="412"
alt='""'
typeof="foaf:Image"
/>
</div>
</article>
</div>
</div>
<div className="p-6 bg-grey">
<div className="leading-relaxed">
<h2 className="text-4xl font-bold leading-tight">
CXcon: Experience Transformation
</h2>
<p className="mt-4">
Our second CXcon in October was dedicated to experience
transformation. The free one-day virtual event&nbsp;brought
together 230+ heads of digital, thought leaders, and UX
practitioners to discuss all aspects of experience design..
</p>
<p className="mt-4">
In a jam-packed day filled with keynote sessions, panels,
and virtual networking we explored topics including design
leadership, UX ethics, designing for emotion and innovation
at scale.
</p>
<p>
<a
className="inline-block py-2 px-5 mt-4 text-lg font-bold border-2 transition-colors duration-200 ease-in-out hover:bg-white focus:bg-white bg-secondary border-secondary text-tertiary hover:border-quinary hover:text-quinary focus:border-quinary focus:text-quinary"
href="https://inviqa.com/cxcon-experience-transformation"
> >
Explore this event <p>
</a> Our second CXcon in October was dedicated to experience
transformation. The free one-day virtual event&nbsp;brought together
230+ heads of digital, thought leaders, and UX practitioners to
discuss all aspects of experience design..
</p> </p>
</div>
</div> <p>
</div> In a jam-packed day filled with keynote sessions, panels, and
</section> virtual networking we explored topics including design leadership,
</div> UX ethics, designing for emotion and innovation at scale.
</p>
</ImageAndText>
</div> </div>
</div> </div>
); );

1
postcss.config.js
View file

@ -1,5 +1,6 @@
module.exports = { module.exports = {
plugins: { plugins: {
'postcss-nested': {},
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },

8
styles/globals.css
View file

@ -3,6 +3,12 @@
@tailwind utilities; @tailwind utilities;
@layer components { @layer components {
.markup {
* + * {
@apply mt-4;
}
}
.fancy-corners { .fancy-corners {
position: relative; position: relative;
background-color: #fff; background-color: #fff;
@ -14,7 +20,7 @@
position: absolute; position: absolute;
width: 8em; width: 8em;
height: 8em; height: 8em;
background-color: theme('colors.primary'); background-color: theme("colors.primary");
background-size: 100% 100%; background-size: 100% 100%;
background-position: 0 0; background-position: 0 0;
transform: translateZ(-1px); transform: translateZ(-1px);