Skip to content

Commit 6a959b2

Browse files
jsvigneshkannajsvigneshkanna
authored
Merge pull request #170 from alkhimch/dev-badges
[CREATE] badges
2 parents c4e4b6c + e7d17d5 commit 6a959b2

File tree

9 files changed

+6839
-2120
lines changed

9 files changed

+6839
-2120
lines changed

‎package-lock.json‎

Lines changed: 4418 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pages/components/index.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
/* eslint-disable @next/next/no-html-link-for-pages */
33

44
import Head from "next/head";
5+
import { useEffect, useState } from "react";
6+
import { BallTriangle } from "react-loader-spinner";
57
import Navbar from "../../components/navbar";
6-
import {BallTriangle} from "react-loader-spinner";
7-
import {useState, useRef, useEffect} from "react";
88
const Components = () => {
99
const [loading, setloading] = useState(false);
1010
useEffect(() => {
@@ -92,6 +92,18 @@ const Components = () => {
9292
Alerts are used in website due user actions 💭
9393
</p>
9494
</a>
95+
<a className="component_card" href="/components/badges">
96+
<p className="new_ribbon">New Component ⚡</p>
97+
<img
98+
src="/badges_component_img.png"
99+
alt="alert_component"
100+
className="container_card_img"
101+
/>
102+
<h2 className="component_name">Badges Components</h2>
103+
<p className="component_brief">
104+
Badges are used in website some singular word 💭
105+
</p>
106+
</a>
95107
<a className="component_card" href="/components/navbars">
96108
<p className="in_dev_ribbon">Need Contributors 🙏</p>
97109
<img

‎public/Screen Shot 2022-10-21 at 21.05.02.png‎

53.3 KB
Loading

‎public/badges_component_img.png‎

53.3 KB
Loading

‎tailwind_components/badges/collection.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import test from "../navbars/test_file";
1+
import exampleBadges from "./colorful_badge";
22

3-
const badgeCollection = [{componentName: "Sample dev Badges", component: test}];
3+
const badgeCollection = [{componentName: "Example of Badges", component: exampleBadges}];
44

55
export default badgeCollection;

‎tailwind_components/badges/colorful_badge.jsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { stripIndent } from "react-codepen-prefill-embed";
2+
3+
const badgeExample = stripIndent`<div class="bg-gray-50">
4+
<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">
5+
<div class="flex mt-8 lg:mt-0 lg:flex-shrink-0">
6+
<div class="flex flex-row gap-2 rounded-md shadow">
7+
<div class="flex flex-col gap-2">
8+
<h6 class="text-center text-black">Small</h6>
9+
<hr />
10+
<a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"> Badge rounded-full </a>
11+
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"> Badge rounded-md </a>
12+
<a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"> Badge rounded-xs </a>
13+
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-2 py-2 text-xs font-medium text-white hover:bg-blue-700"> Badge blue </a>
14+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-2 py-2 text-xs font-medium text-white hover:bg-lime-700"> Badge lime </a>
15+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-2 py-2 text-xs font-medium text-white hover:bg-cyan-700"> Badge cyan </a>
16+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-2 py-2 text-xs font-medium text-white hover:bg-violet-700"> Badge violet </a>
17+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-2 py-2 text-xs font-medium text-white hover:bg-sky-700"> Badge sky </a>
18+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-2 py-2 text-xs font-medium text-white hover:bg-emerald-700"> Badge emerald </a>
19+
</div>
20+
<div class="flex flex-col gap-2">
21+
<h6 class="text-center text-black">Base</h6>
22+
<hr />
23+
<a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"> Badge rounded-full </a>
24+
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"> Badge rounded-md </a>
25+
<a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"> Badge rounded-xs </a>
26+
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-3 py-4 text-base font-medium text-white hover:bg-blue-700"> Badge blue </a>
27+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-3 py-4 text-base font-medium text-white hover:bg-lime-700"> Badge lime </a>
28+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-3 py-4 text-base font-medium text-white hover:bg-cyan-700"> Badge cyan </a>
29+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-3 py-4 text-base font-medium text-white hover:bg-violet-700"> Badge violet </a>
30+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-3 py-4 text-base font-medium text-white hover:bg-sky-700"> Badge sky </a>
31+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-3 py-4 text-base font-medium text-white hover:bg-emerald-700"> Badge emerald </a>
32+
</div><div class="flex flex-col gap-2">
33+
<h6 class="text-center text-black">Large</h6>
34+
<hr />
35+
<a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"> Badge rounded-full </a>
36+
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"> Badge rounded-md </a>
37+
<a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"> Badge rounded-xs </a>
38+
<a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-4 text-lg font-medium text-white hover:bg-blue-700"> Badge blue </a>
39+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-4 py-4 text-lg font-medium text-white hover:bg-lime-700"> Badge lime </a>
40+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-4 py-4 text-lg font-medium text-white hover:bg-cyan-700"> Badge cyan </a>
41+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-4 py-4 text-lg font-medium text-white hover:bg-violet-700"> Badge violet </a>
42+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-4 py-4 text-lg font-medium text-white hover:bg-sky-700"> Badge sky </a>
43+
<a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-4 py-4 text-lg font-medium text-white hover:bg-emerald-700"> Badge emerald </a>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
`;
49+
50+
export default badgeExample;

‎tailwind_components/badges/test_file.jsx‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎tailwind_components/navbars/test_file.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {stripIndent} from "react-codepen-prefill-embed";
1+
import { stripIndent } from "react-codepen-prefill-embed";
22

33
const test = stripIndent`<div class="bg-gray-50">
44
<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">

0 commit comments

Comments
 (0)