Link Copied

All Components

List of all components, its types and how to use it.

Page Layouts.

We have 3 page layouts Home, Blog with sidebar and Blog centered.
How to use


    // import PageLayout from components
    import { ..., PageLayout, ... } from "../../../src/components";
    const Article = () => {
        return (
            <PageLayout home >{/* Home page layout */}</PageLayout>
            {/* or */}
            <PageLayout blogwithsidebar >{/* Blog page with sidebar layout */}</PageLayout>
            {/* or */}
            <PageLayout blogcentered >{/* Blog page centered layout */}</PageLayout>
        )		
    }

    export default Article;

Text

Text is used to write Paragraphs, Title, Sub title or Quotes in the article.

Demo

p.Paragraph Example.

h1.Title Example.

h2.Subtitle example.

Quoted text example.

Note: By default we have some standard styles applied to the Text component, so if you need to override like text size, weight you can do as follows:
<Text p className="!text-[20px] !font-bold">Overide text size and weight</Text>
by adding ! in front of the classes we can change the default styles like here font size will be changed to 22px and font weight will change to bold for paragraph

How to use


    // import TextAlign from enums
    import { ..., TextAlign } from "../../src/shared/enums"
    // import Text from components
    import { ..., Text, ... } from "../../../src/components";
    const Article = () => {
        return (
            <Text>By Default its paragraph tag</Text>
            <Text p>Paragraph</Text>
            <Text title>Title</Text>
            <Text subtitle>Subtitle</Text>
            <Text quote>Quoted text</Text>

            {/* Changing default styles */}
            <Text p className="!text-[20px] !font-bold">Overide text size and weight</Text>

            {/* Text Aligns */}
            <Text p textAlign={TextAlign.CENTER}>Text Align Center</Text>
            <Text p textAlign={TextAlign.LEFT}>Text Align Left</Text>
            <Text p textAlign={TextAlign.RIGHT}>Text Align Right</Text>
            <Text p textAlign={TextAlign.JUSTIFY}>Text Align Justify</Text>
            <Text p textAlign={TextAlign.NONE}>Text Align None</Text>

            {/* Text Aligns via tailwind classes */}
            <Text p className="text-left">...</Text>
            <Text p className="text-right">...</Text>

            {/* Change font colors via color="" */}
            <Text p color="red">Text color red</Text>
            <Text p color="#E2904B">Text color #E2904B</Text>

            {/* Change font colors via tailwind classes */}
            <Text p className="font-blue-600">...</Text>
            <Text p className="font-slate-400">...</Text>
        )		
    }

    export default Article;

you can find more tailwind font classes on the official docs here.

Image

To add image in your project, first save the image file in public --> images folder and then add the image path in image tag's src. For demo check /pages/all-components.tsx file in code.

Demo

Default size image with caption

Full size image with caption

Medium size image with caption

Small size image with caption

XS size image with caption

How to use


    // import ImageSize from enums
    import { ..., ImageSize } from "../../src/shared/enums"
    // import Image from components
    import { ..., Image, ... } from "../../../src/components";
    const Article = () => {
        return (
            <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" className="my-5" />
            <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.FUll} className="mb-5" />
            <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.MEDIUM} className="mb-5" />
            <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.SMALL} className="mb-5" />
            <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.XS} className="mb-5" />
        )		
    }

    export default Article;

List

Demo

List with disc
Item
Item

List with number
Item
Item

List without any marker
Item
Item

How to use


    // import ListType from enums
    import { ..., ListType } from "../../src/shared/enums"
    // import List from components
    import { ..., List, ... } from "../../../src/components";
    const Article = () => {
        return (
            <List type={ListType.disc}>
                <li>List with disc</li>
            </List>

            {/* or */}
            <List type={ListType.number}>
                <li>List with number</li>
            </List>

            {/* or */}
            <List type={ListType.none}>
                <li>List with no style</li>
            </List>
        )		
    }

    export default Article;

Section Seperators

<Seperator dots/> or <Seperator line /> these are used to add a section divider as shown below.

Demo

How to use


    // import Seperator from components
    import { ..., Seperator, ... } from "../../../src/components";
    const Article = () => {
        return (
            <Seperator dots />
            {/* or */}
            <Seperator line />
        )		
    }

    export default Article;

LinkTo

<LinkTo href="url" />
This is used to link between your blog pages or external pages.

How to use


    // import LinkTo from components
    import { ..., LinkTo, ... } from "../../../src/components";
    const Article = () => {
        return (
            {/* link between internal pages */}
            <LinkTo href="url" />
            {/* open link in a new tab */}
            <LinkTo href="url" newTab/>
            {/* open an external link */}
            <LinkTo href="url" external/>
        )		
    }

    export default Article;

Image Slider

Demo

How to use


    // import Slider from components
    import { ..., Slider, ... } from "../../../src/components";
    const Article = () => {
        return (
            <Slider
                images={[
                    '/public/images/tutorials/demo-image.jpg',
                    '/public/images/tutorials/demo-image.jpg',
                    '/public/images/tutorials/demo-image.jpg',
                    '/public/images/tutorials/demo-image.jpg'
                ]}
            />
        )		
    }

    export default Article;

Accordian

Demo

Accordian Title

Accordian content

How to use


    // import Accordian from components
    import { ..., Accordian, ... } from "../../../src/components";
    const Article = () => {
        return (
            <Accordian title="Accordian Title" />
                Accordian Content
            </Accordian>
            {/* or if you want to keep it open by default */}
            <Accordian title="Accordian Title" keepOpen />
                Accordian Content open by default
            </Accordian>
        )		
    }

    export default Article;

Video Player

Demo

How to use


    // import VideoPlayer from components
    import { ..., VideoPlayer, ... } from "../../../src/components";
    const Article = () => {
        return (
            <VideoPlayer url="/public/videos/mov_bbb.mp4" />
        )		
    }

    export default Article;

For any any queries related to this project / template feel free to connect with us at webexpe13@gmail.com. You can also post any comments on our github discussions.