


This is a section of a textarea with a white background and a blue border. It has a blue div on the left with a white WorkImage and a blue ProjectHead, then a red flex with a white gap-6, a green my-14, and a yellow flex with a white gap-6. The Github and Live Buttons are blue and have white text.

test component

Nextjs with tailwind



In this code, the screens property of the document specifies three different CSS rules, each with a different maximum width.

The first screen rule, '2xl', has a maximum width of 1535px.

The second screen rule, 'xl', has a maximum width of 1279px.

The third screen rule, 'lg', has a maximum width of 1023px.

The fourth screen rule, 'md', has a maximum width of 767px.

The fifth screen rule, 'sm', has a maximum width of 639px.

Tailwind screens for responsiveness

Nextjs two state update using effect


The code in this gist imports an image from the "next/image" module and prints some text about the image to the console.

Nextjs About Component



This code creates a section with a col-md-14 class and a col-sm-6 class. The section contains a div with a col-md-9 class, a col-sm-9 class, and a gap-14 class. The div contains an EventCard with a col-sm-8 class and a key of "0".

Nextjs Section with rendered cards



In this code, the Page function exports an async function getStaticProps(). The getStaticProps function takes in an object as its only parameter and returns that object's props property.

Nextjs Page with getStaticProps


constantsObjectName is an object that stores key-value pairs. The key is a string and the value is a string.

Constant object



The following code snippet shows how to use the Button component. In this code, the button icon is set to an image and the title is set to "Button". The button color is set to white, so the background color of the button is set to white.

Nextjs Button Component with mutiple options



Link imports from next/link . The SeeMoreButton function takes in two arguments, url and align . align is an optional string that defaults to bottom if not provided. If provided, align will determine the position of the SeeMoreButton within the containing DOM.

The SeeMoreButton function returns a <Link> element with the href attribute set to the provided url and the a className attribute set to the provided align value. The align value can be one of bottom , top-10 , top-40 , or relativeTop-10 , relativeTop-40 , depending on what the value of align is. The font-extrabold and font-primary classes are also provided, depending on the value of align . Finally, the md:my-6 , md:mx-auto , and mr-32 classes are provided, depending on the font-size of the <Link> element.

See more button component

Nextjs Timer Component

Nextjs profile card component



The getStaticProps() function will return an object with the following properties: data: the data retrieved from the airtable table, props: an object with the following properties: data: the data retrieved from the airtable table, revalidate: a time in seconds that will be used to validate the data when it is requested again, and }

Nextjs getStaticProps fetch airtable data



The code is creating a custom document. It has a render function that will return HTML. In the render function, it will start by creating a head element. Then it will put your head content, meta tags, and any linkable content in the head. It will also create a body element and put the Main content in the body. The NextScript element will be placed after the body.

Nextjs doument file class




The code above will create an HTML head, title and body for a document view. The document view will be an <iframe src="public document shared link here " className='w-half m-auto sm:w-quarter_past' height='700px' allow="autoplay"></iframe> which will be 700px wide and 300px high.

Nextjs Drive document viewer page



Card.js

import React, { Component } from 'react';
import { Link, Element, Legend, Text } from 'react-router';

export default class Card extends Component {

render() {

return (

<Link href={this.props.url} key={this.props.name}><a target='_blank'>

<div className='relative flex items-center justify-center group'>

<Image src={bgImageHere} alt="outer hexa" />

<div className='absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center'><Image src={secondBgImageHere} alt="inner hexa" /></div>

<div className='absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center group-hover:scale-110 transition-all duration-300'><Image src={data.icon.src} alt={data.name} height={data.icon.height} width={data.icon.width}/> </div>

</div>

</a></Link>
}).

Nextjs Card component



In the code, the className is set to h-48 w-48 rounded-full bg-bgShade blur-lg absolute top-24 if the alignment is left, or right-10 otherwise.

nextjs bg shade component



In the code above, the get ServerSideProps() function will call the axiosClient.get() function which will use the URL provided to get the data from the server. The function will then return an object with the properties props (which will hold the data from the server) and data (which will be the actual data received from the server).

Nextjs Data fetch in getServerSideProps



The code above creates a section heading for a section in a page. It takes an object with the section name as a parameter. The object has the following properties: 

- className: This is the section's main class. It will be applied to the entire section, including the heading. 
- justify-center: This sets the alignment of the heading within the section. It can be left or right aligned, and the default is right aligned. 
- mr-1: This sets the margin-right for the heading. 
- gap-2: This sets the margin-left for the heading. 
- font-family: This sets the font family for the heading. 
- font-size: This sets the font size for the heading. 
- text-5xl: This sets the text size for the heading to be 5xl. 
- text-3xl: This sets the text size for the heading to be 3xl. 
- md-auto: This sets the display mode for the heading to be auto.

Nextjs Customized Section heading



This code tells the web browser to open the page at the pathname router.pathname/work.query in a new tab or window. The browser will also load the link's destination URL, which is the slug work.query.

Nextjs dynamic route lik redirector

Nextjs footer component



NextScript is an interface that Document provides to allow scripts to be run in the document.

Nextjs required imports for document file



The code imports the MainLayout from the src/components/layouts directory and then uses it to create a component. The component uses the pageProps that were passed into it.

Nextjs app wrapped in main layout



This code imports the SectionHead and ContactForm modules, and exports a function named ContactSection. Inside of this function, there is a section with the class name "my-14 mx-20 md:mx-10 mt-32". Inside of that, there is a SectionHead with the name "Contact me" and a <ContactForm> element.

Nextjs Contact Page parent Component



import Link from "next/link"

Button({url, name}) {

return (

<Link href={url}><a className="uppercase text-white flex items-center justify-center text-center text-md font-bold bg-gradient-to-r from-primary to-primary2 rounded-3xl px-8 py-2 border-2 border-mainbg hover:border-white hover:bg-none transition-all duration-200">{name}</a></Link>

)

}

Nextjs Button with Gradient



The code in the above snippet creates a section with a white background, col-sized text, centered in the viewport, and a large uppercase heading. The heading has tracking-wider set to true, meaning it will adjust its width to fit the container it is contained in. The h1 is styled with a font-bold class, and the h3 text is styled with a font-bold uppercase class.

Nextjs Custom 404




export defaultHeroSection;


This file has a function that takes in an object with two properties: first name and last name. It prints out a section with a heading and some content.

The first line in the code exports the HeroSection function. This function returns an <section> element with the class name "select-none text-white flex flex-col items-center relative w-full mt-32". The <section> element contains a <div> element, which contains the following:

<h1 className="text-center text-3xl m-auto sm:text-lg">Hey I m</h1>

<h1 className="font-bold text-8xl font-primary md:text-6xl sm:text-2xl text-center"><span>First name here</span><span className="outline-text-bold "> Last name here</span></h1>

The <h1> elements will be larger in size than the other elements because they are centered. The font-size of the <h1> element is set to be 3x larger than the font-size of the other elements. The

Nextjs hero section with tailwind



The code above creates a layout where the Header and Footer sections are linked at the top and bottom of every page, respectively.

Nextjs

This cookbook contains code snippets/recipes for discord applications development

discordjs


This code creates a bot with the following capabilities:

shards: “auto”

restGlobalRateLimit: 50

makeCache: Options.cacheWithLimits({
   MessageManager: 1,
  }),

intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES, Intents.FLAGS.GUILD_VOICE_STATES, Intents.FLAGS.GUILD_MESSAGE_REACTIONS, Intents.FLAGS.GUILD_MEMBERS],

The bot’s build method will attempt to use the Discord bot.config file to configure the bot. The build method then calls the bot.run function.

When the user invokes the bot’s GUILDS, GUILD_MESSAGES, GUILD_VOICE_STATES, and GUILD_MEMBERS intents, Discord will attempt to find a matching message in the user’s chat server. If there is no matching message, Discord will attempt to find a matching message in the chat server for the guild the user is a member of. If

Name	Created	Popularity
test component	4/24/2022	0
Tailwind screens for responsiveness	4/17/2022	0
Nextjs two state update using effect	4/17/2022	0
Nextjs About Component	4/17/2022	2
Nextjs Section with rendered cards	4/17/2022	0
Nextjs Page with getStaticProps	4/17/2022	0
Constant object	4/17/2022	0
Nextjs Button Component with mutiple options	4/17/2022	0
See more button component	4/17/2022	0
Nextjs Timer Component	4/17/2022	5
Nextjs profile card component	4/17/2022	0
Nextjs getStaticProps fetch airtable data	4/17/2022	0
Nextjs doument file class	4/17/2022	0
Nextjs Drive document viewer page	4/17/2022	0
Nextjs Card component	4/17/2022	6
nextjs bg shade component	4/17/2022	0
Nextjs Data fetch in getServerSideProps	4/17/2022	0
Nextjs Customized Section heading	4/17/2022	0
Nextjs dynamic route lik redirector	4/17/2022	0
Nextjs footer component	4/17/2022	0
Nextjs required imports for document file	4/17/2022	0
Nextjs app wrapped in main layout	4/17/2022	0
Nextjs Contact Page parent Component	4/17/2022	0
Nextjs Button with Gradient	4/17/2022	0
Nextjs Custom 404	4/17/2022	0
Nextjs hero section with tailwind	4/17/2022	1
Nextjs	4/17/2022	1
discordjs	4/17/2022	0

sarthakjdev

Javascript

Coding Assistant