Skip to content

Commit

Permalink
Add shadcn library
Browse files Browse the repository at this point in the history
  • Loading branch information
KrupaPanchal2527 committed May 21, 2024
1 parent 88fe1a5 commit 652a747
Show file tree
Hide file tree
Showing 9 changed files with 294 additions and 187 deletions.
17 changes: 17 additions & 0 deletions frontend/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/index.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
234 changes: 103 additions & 131 deletions frontend/package-lock.json

Large diffs are not rendered by default.

8 changes: 7 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,19 @@
"dependencies": {
"@aadeshk/medium-common": "^1.0.2",
"axios": "^1.6.8",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.378.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-quill": "^2.0.0",
"react-router-dom": "^6.23.0",
"react-toastify": "^10.0.5"
"react-toastify": "^10.0.5",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/node": "^20.12.12",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
Expand Down
13 changes: 6 additions & 7 deletions frontend/src/components/Appbar.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState } from "react";
import { Avatar } from "./BlogCard";
import { Link, useNavigate } from "react-router-dom";
import WriteIcon from "./icons/Write";
import { Avatar } from "./BlogCard";

interface AppbarProps {
skipAuthCheck?: boolean;
Expand All @@ -27,11 +27,11 @@ const Appbar = ({
</Link>

<Link
className=" hidden ml-auto focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium sm:flex items-center gap-2 rounded-lg text-sm px-2 py-2.5 me-2 mb-2 mx-12"
to="/contributors"
>
Contributors
</Link>
className=" hidden ml-auto focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium sm:flex items-center gap-2 rounded-lg text-sm px-2 py-2.5 me-2 mb-2 mx-12"
to="/contributors"
>
Contributors
</Link>

{isUserLoggedIn ? (
<div className="flex gap-4 items-center md:gap-8">
Expand All @@ -50,7 +50,6 @@ const Appbar = ({
</div>
) : (
<>

<Link
to="/signin"
className="focus:outline-none text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 mx-12"
Expand Down
109 changes: 69 additions & 40 deletions frontend/src/index.css
Original file line number Diff line number Diff line change
@@ -1,47 +1,76 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind components;
@tailwind utilities;

@layer base {
body {
font-family: "Noto Sans", sans-serif;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;

--radius: 0.5rem;
}

/* Keep adding variants for button here */
button.primary {
@apply block text-white bg-green-700 text-sm rounded-3xl px-4 py-2 m-0 hover:bg-green-800;
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}

button.primary:disabled {
@apply opacity-60 pointer-events-none;
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

.ql-editor {
@apply font-noto-serif text-lg !p-0 md:p-4;
}

.ql-editor.ql-blank::before {
@apply inset-0 not-italic text-gray-400 font-light text-xl;
}

.quill {
min-height: 500px;
}

.blog-card .quill {
min-height: 50px;
}

.blog-card .ql-editor {
padding: 0;
}

.blog-card .ql-editor p,
.blog-card .ql-editor h1,
.blog-card .ql-editor h2,
.blog-card .ql-editor h3 {
@apply text-sm
}
}
6 changes: 6 additions & 0 deletions frontend/src/lib/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
73 changes: 71 additions & 2 deletions frontend/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,85 @@ import defaultTheme from "tailwindcss/defaultTheme";

/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
"./index.html",
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
fontFamily: {
"noto-serif": [
'"Noto Serif Georgian"',
...defaultTheme.fontFamily.serif,
],
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [],
plugins: [import("tailwindcss-animate")],
};
8 changes: 6 additions & 2 deletions frontend/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2021.String","ES2020", "DOM", "DOM.Iterable"],
"lib": ["ES2021.String", "ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,

Expand All @@ -18,7 +18,11 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
Expand Down
13 changes: 9 additions & 4 deletions frontend/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});

0 comments on commit 652a747

Please sign in to comment.