Docs by Xabier Lameiro

Members

(constant) GoogleAdsense

The adsense will be rendered only in production mode and horizontal only on mobile

Source:

GoogleAdsense/index.tsx, line 9

Example

<GoogleAdsense slot="1234567890" />;

(constant) useDeploymentStatus

Fetches the deployment status

Source:

DeploymentStatus/index.tsx, line 11

Example

- const { data, isLoading, isError } = useDeploymentStatus();

ArticlePanel(readTime) → {JSX.Element}

Parameters:

Name	Type	Description
`readTime`	string	The read time of the article

Source:

Blog/ArticlePanel/index.tsx, line 43

Returns:

Type: JSX.Element

Example

<ArticlePanel readTime="2" />;

AsidePanel() → {JSX.Element}

Source:

Blog/AsidePanel/index.tsx, line 5

Returns:

Type: JSX.Element

Example

<AsidePanel />;

Avatar(name, description, img, alt) → {JSX.Element}

Parameters:

Name	Type	Description
`name`	string	Name of the user
`description`	string	Description of the user
`img`	string	Image of the user
`alt`	string	Alt text for the image

Source:

Avatar/index.tsx, line 11

Returns:

Avatar component

Type: JSX.Element

Example

<Avatar name="John Doe" description="Lorem ipsum" img="/images/avatar.jpg" alt="John Doe" />;

BackgroundImage() → {JSX.Element}

Source:

BackgroundImage/index.tsx, line 6

Returns:

Type: JSX.Element

Example

<BackgroundImage />;

ControlButtons(disabled, withPadding, onClickClose, onClickMinimise, onClickMaximise) → {JSX.Element}

Parameters:

Name	Type	Description
`disabled`	boolean	If true, the maximise button will be disabled
`withPadding`	boolean	If true, the container will have padding
`onClickClose`	function	Callback function when close button is clicked
`onClickMinimise`	function	Callback function when minimise button is clicked
`onClickMaximise`	function	Callback function when maximise button is clicked

Source:

ControlButtons/index.tsx, line 13

Returns:

Type: JSX.Element

Example

<ControlButtons />;

CountDown(date, caption) → {JSX.Element}

Countdown to date provided in months, days, hours, minutes and seconds

Parameters:

Name	Type	Description
`date`	string	date to countdown to
`caption`	string	caption to display

Source:

CountDown/index.tsx, line 42

Returns:

Type: JSX.Element

CryptoPrice() → {JSX.Element}

Show the current price of XRP in EUR

Source:

CryptoPrice/index.tsx, line 9

Returns:

Type: JSX.Element

Example

<CryptoPrice />

Date(string) → {JSX.Element}

Parameters:

Name	Type	Description
`string`	Date

Source:

Date/index.tsx, line 9

Returns:

Type: JSX.Element

Example

<Date date="01-02-2023" />

DateAndHour(children, minutes) → {JSX.Element}

This component is a Clock and a Weather Widget

Parameters:

Name	Type	Description
`children`	ReactNode	The children
`minutes`	number	The number of minutes to update the clock

Source:

Layout/Header/index.tsx, line 20

Returns:

Type: JSX.Element

DeploymentStatus() → {JSX.Element}

Shows the current deployment status

Source:

DeploymentStatus/index.tsx, line 26

Returns:

DeploymentStatus component

Type: JSX.Element

Example

- <DeploymentStatus />

Dialog(dialogRef, open, withPadding, modalMode, header, body, footer, large) → {JSX.Element}

Parameters:

Name	Type	Description
`dialogRef`	React.RefObject.<HTMLDivElement>	Ref to the dialog element
`open`	boolean	If true, the dialog will be open
`withPadding`	boolean	If true, the dialog will have padding
`modalMode`	boolean	If true, the dialog will be not complete screen
`header`	ReactNode	The header of the dialog
`body`	ReactNode	The body of the dialog
`footer`	ReactNode	The footer of the dialog
`large`	boolean	If true, the dialog will be large

Source:

Dialog/index.tsx, line 17

Returns:

Type: JSX.Element

Example

<Dialog
        dialogRef={dialogRef}
        open={open}
        withPadding={withPadding}
        modalMode={modalMode}
        header={<h1>Header</h1>}
        body={<p>Body</p>}
        footer={<button>Footer</button>}
        large={large}
    />;

Dock()

This component is the dock that appears on the bottom of the screen

Source:

Dock/index.tsx, line 10

Returns:

JSX.Element

GridLayoutControl(routeName) → {JSX.Element}

Parameters:

Name	Type	Description
`routeName`	string	The name of the route

Source:

GridLayoutControl/index.tsx, line 8

Returns:

Type: JSX.Element

Example

<GridLayoutControl routeName="System Preferences" />;

Header navigation bar component with the following features:

Bitcoin logo
Current route
Social links
XRP price
Indexed pages counter
Total views counter
Heating temperature
Date and hour
Weather Widget

Parameters:

Name	Type	Description
`children`	ReactNode	The children to display: ;

Source:

Layout/Header/index.tsx, line 100

Returns:

Type: JSX.Element

Heating() → {JSX.Element}

Shows the current temperature of the house and the outside temperature

Source:

Heating/index.tsx, line 8

Returns:

News component

Type: JSX.Element

Icon(src, alt, testId) → {JSX.Element}

Parameters:

Name	Type	Description
`src`	string	Image source
`alt`	string	Image alt text
`testId`	string	Test id for testing

Source:

Dock/Icon/index.tsx, line 10

Returns:

Type: JSX.Element

Example

<Icon src="/images/nextjs.svg" alt="NextJS" testId="nextjs-icon" />

IconWithName(icon, alt, name, horizontal) → {JSX.Element}

Parameters:

Name	Type	Description
`icon`	string	The path to the icon
`alt`	string	The alt text for the icon
`name`	string	Text to display
`horizontal`	boolean	If true, the icon will be displayed horizontally

Source:

IconWithName/index.tsx, line 13

Returns:

Type: JSX.Element

Example

<IconWithName icon="/images/icons/terminal.svg" alt="Terminal" name="Terminal" />;
    <IconWithName icon="/images/icons/terminal.svg" alt="Terminal" name="Terminal" horizontal />;

IndexedCounter() → {JSX.Element}

This component is used to display the number of indexed pages on Google

Source:

IndexedCounter/index.tsx, line 9

Returns:

Type: JSX.Element

Example

<IndexedCounter />

LangeSelect() → {JSX.Element}

Source:

LangSelect/index.tsx, line 6

Returns:

Type: JSX.Element

Example

<LangSelect />;

Layout(className, children) → {JSX.Element}

Parameters:

Name	Type	Description
`className`	string	The class name for the different pages
`children`	JSX.Element	Content to be rendered

Source:

Layout/index.tsx, line 13

Returns:

Type: JSX.Element

Example

<Layout meta={meta} isBlog={true}>
        <div>Content</div>
    </Layout>;

NavLinks() → {JSX.Element}

Social links component

Source:

Layout/Header/index.tsx, line 77

Returns:

Type: JSX.Element

NavList(title, list, category, isCategory) → {JSX.Element}

Parameters:

Name	Type	Description
`title`	string	The title of the list
`list`	Array.<object>	The list of items
`category`	string	The category has other styles
`isCategory`	boolean	If is category the icon will be a folder

Source:

Blog/NavList/index.tsx, line 17

Returns:

Type: JSX.Element

Example

<NavList title="Categories" list={categories} category={category} isCategory={true} />;

NavigationArrows(hidden, disabledLeft, disabledRight, onClickLeft, onClickRight) → {JSX.Element}

Parameters:

Name	Type	Description
`hidden`	boolean	If true, the arrows will be hidden
`disabledLeft`	boolean	If true, the left arrow will be disabled
`disabledRight`	boolean	If true, the right arrow will be disabled
`onClickLeft`	function	Callback function when left arrow is clicked
`onClickRight`	function	Callback function when right arrow is clicked

Source:

NavigationArrows/index.tsx, line 12

Returns:

Type: JSX.Element

Example

<NavigationArrows />;

News(string) → {JSX.Element}

Show the latest news about the city

Parameters:

Name	Type	Description
`string`	city	City name

Source:

News/index.tsx, line 12

Returns:

News component

Type: JSX.Element

Notification(title, message, type) → {JSX.Element}

Parameters:

Name	Type	Description
`title`	string	The title of the notification
`message`	string	The message of the notification
`type`	string	The type of the notification

Source:

Notification/index.tsx, line 13

Returns:

Type: JSX.Element

Example

<Notification title="Success" message="This is a success message" type="success" />;
    <Notification title="Error" message="This is an error message" type="error" />;

PostList(posts, slug, category) → {JSX.Element}

Parameters:

Name	Type	Description
`posts`	Array.<object>	The list of posts
`slug`	string	The slug is used to highlight the selected post
`category`	string	The category is used to highlight the selected post

Source:

Blog/PostList/index.tsx, line 15

Returns:

Type: JSX.Element

Example

<PostList posts={posts} slug={slug} category={category} />;

RenderManager(boolean, boolean, string, string) → {React.ReactNode}

Renders children or error/loading icon

Parameters:

Name	Type	Description
`boolean`	error	error state
`boolean`	loading	loading state
`string`	errorTitle	Title for error icon
`string`	loadingTitle	Title for loading icon
`React.ReactNode`	children	Children to render

Source:

RenderManager/index.tsx, line 15

Returns:

Returns children or error/loading icon

Type: React.ReactNode

Route() → {JSX.Element}

Translate the route to the current language

Source:

Layout/Header/index.tsx, line 65

Returns:

Type: JSX.Element

SEO(meta, isBlog, noimage) → {JSX.Element}

Parameters:

Name	Type	Description
`meta`	object	The object containing the meta data for SEO
`isBlog`	boolean	Whether the page is a blog post the SEO changes
`noimage`	boolean	Whether to show the image in the SEO

Source:

SEO/index.tsx, line 23

Returns:

Type: JSX.Element

Example

<SEO meta={meta} isBlog={true} />;

SearchInput(value, disabled, onBlur, onChange, placeHolderText) → {JSX.Element}

Parameters:

Name	Type	Description
`value`	string	The value of the input
`disabled`	boolean	If true, the input will be disabled
`onBlur`	function	Callback function when input is blurred
`onChange`	function	Callback function when input is changed
`placeHolderText`	string	The placeholder text for the input

Source:

SearchInput/index.tsx, line 11

Returns:

Type: JSX.Element

Example

<SearchInput />;

ShidesShift(handleClick, leftPosition) → {JSX.Element}

Parameters:

Name	Type	Description
`handleClick`	function	The function to be called when the button is clicked
`leftPosition`	boolean	If true, the button will be positioned on the left

Source:

SidesShift/index.tsx, line 11

Returns:

Type: JSX.Element

Example

<SidesShift />;

StarCounter() → {JSX.Element}

Component that shows the number of stars of the repository

Source:

Blog/StarCounter/index.tsx, line 9

Returns:

Component

Type: JSX.Element

TimeRead(readTime) → {JSX.Element}

Parameters:

Name	Type	Description
`readTime`	string	The read time of the article

Source:

Blog/ArticlePanel/index.tsx, line 18

Returns:

Type: JSX.Element

Example

<TimeRead readTime="2" />;

ViewCounter(all) → {JSX.Element}

Component that shows the number of views of the current page or the totally of website, include de new users

Parameters:

Name	Type	Description
`all`		If true, shows the total of views and new users

Source:

Blog/ViewCounter/index.tsx, line 10

Returns:

Type: JSX.Element

VisibilityManager(hideOnDesktop, hideOnTablet, hideOnMobile) → {ReactElement|null}

Parameters:

Name	Type	Description
`hideOnDesktop`	boolean	If true, the component will be hidden on desktop
`hideOnTablet`	boolean	If true, the component will be hidden on tablet
`hideOnMobile`	boolean	If true, the component will be hidden on mobile

Source:

VisibilityManager/index.tsx, line 11

Returns:

Type: ReactElement | null

Example

<VisibilityManager hideOnDesktop={true}>

Weather(cities, open, handleClose) → {JSX.Element}

Show the weather of array of cities and the last news of each city

Parameters:

Name	Type	Description
`cities`	Array.<string>	Cities to get weather
`open`	boolean	Open or close the component
`handleClose`	function	Function to close the component

Source:

Weather/index.tsx, line 19

Returns:

News component

Type: JSX.Element

calculateTimeLeft(date, setTime, timeLeft) → {Object}

This function is used to calculate the time left until the date

Parameters:

Name	Type	Description
`date`	string	The date to calculate the time left
`setTime`	function	The function to set the time left
`timeLeft`	Object	The time left object

Source:

CountDown/index.tsx, line 11

Returns:

The time left object

Type: Object

Example

calculateTimeLeft('2021-12-31', setTime)

Components

Members

(constant) GoogleAdsense

Example

(constant) useDeploymentStatus

Example

ArticlePanel(readTime) → {JSX.Element}

Parameters:

Returns:

Example

AsidePanel() → {JSX.Element}

Returns:

Example

Avatar(name, description, img, alt) → {JSX.Element}

Parameters:

Returns:

Example

BackgroundImage() → {JSX.Element}

Returns:

Example

ControlButtons(disabled, withPadding, onClickClose, onClickMinimise, onClickMaximise) → {JSX.Element}

Parameters:

Returns:

Example

CountDown(date, caption) → {JSX.Element}

Parameters:

Returns:

CryptoPrice() → {JSX.Element}

Returns:

Example

Date(string) → {JSX.Element}

Parameters:

Returns:

Example

DateAndHour(children, minutes) → {JSX.Element}

Parameters:

Returns:

DeploymentStatus() → {JSX.Element}

Returns:

Example

Dialog(dialogRef, open, withPadding, modalMode, header, body, footer, large) → {JSX.Element}

Parameters:

Returns:

Example

Dock()

Returns:

GridLayoutControl(routeName) → {JSX.Element}

Parameters:

Returns:

Example

Header(children) → {JSX.Element}

Parameters:

Returns:

Heating() → {JSX.Element}

Returns:

Icon(src, alt, testId) → {JSX.Element}

Parameters:

Returns:

Example

IconWithName(icon, alt, name, horizontal) → {JSX.Element}

Parameters:

Returns:

Example

IndexedCounter() → {JSX.Element}

Returns:

Example

LangeSelect() → {JSX.Element}

Returns:

Example

Layout(className, children) → {JSX.Element}

Parameters:

Returns:

Example

NavLinks() → {JSX.Element}

Returns:

NavList(title, list, category, isCategory) → {JSX.Element}

Parameters:

Returns:

Example

NavigationArrows(hidden, disabledLeft, disabledRight, onClickLeft, onClickRight) → {JSX.Element}