Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CREATE] badges #170

Merged
merged 1 commit into from
Oct 21, 2022
Merged

[CREATE] badges #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,426 changes: 4,418 additions & 8 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 14 additions & 2 deletions pages/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
/* eslint-disable @next/next/no-html-link-for-pages */

import Head from "next/head";
import { useEffect, useState } from "react";
import { BallTriangle } from "react-loader-spinner";
import Navbar from "../../components/navbar";
import {BallTriangle} from "react-loader-spinner";
import {useState, useRef, useEffect} from "react";
const Components = () => {
const [loading, setloading] = useState(false);
useEffect(() => {
Expand Down Expand Up @@ -92,6 +92,18 @@ const Components = () => {
Alerts are used in website due user actions 💭
</p>
</a>
<a className="component_card" href="/components/badges">
<p className="new_ribbon">New Component ⚡</p>
<img
src="/badges_component_img.png"
alt="alert_component"
className="container_card_img"
/>
<h2 className="component_name">Badges Components</h2>
<p className="component_brief">
Badges are used in website some singular word 💭
</p>
</a>
<a className="component_card" href="/components/navbars">
<p className="in_dev_ribbon">Need Contributors 🙏</p>
<img
Expand Down
Binary file added public/Screen Shot 2022-10-21 at 21.05.02.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/badges_component_img.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions tailwind_components/badges/collection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import test from "../navbars/test_file";
import exampleBadges from "./colorful_badge";

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

export default badgeCollection;
50 changes: 50 additions & 0 deletions tailwind_components/badges/colorful_badge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { stripIndent } from "react-codepen-prefill-embed";

const badgeExample = stripIndent`<div class="bg-gray-50">
<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">
<div class="flex mt-8 lg:mt-0 lg:flex-shrink-0">
<div class="flex flex-row gap-2 rounded-md shadow">
<div class="flex flex-col gap-2">
<h6 class="text-center text-black">Small</h6>
<hr />
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div>
<div class="flex flex-col gap-2">
<h6 class="text-center text-black">Base</h6>
<hr />
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div><div class="flex flex-col gap-2">
<h6 class="text-center text-black">Large</h6>
<hr />
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div>
</div>
</div>
</div>
`;

export default badgeExample;
28 changes: 0 additions & 28 deletions tailwind_components/badges/test_file.jsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion tailwind_components/navbars/test_file.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {stripIndent} from "react-codepen-prefill-embed";
import { stripIndent } from "react-codepen-prefill-embed";

const test = stripIndent`<div class="bg-gray-50">
<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">
Expand Down
Loading