From 71e4c2aaab4cbf185e59e71f9cffc51b6e04fb4e Mon Sep 17 00:00:00 2001 From: dbahiense Date: Sat, 20 Jul 2024 12:20:44 -0300 Subject: [PATCH] create project folder structure --- components.json | 17 +++++ components/LeftSideBar.tsx | 13 ++++ components/RightSideBar.tsx | 13 ++++ components/ui/button.tsx | 56 ++++++++++++++ lib/utils.ts | 6 ++ styles/globals.css | 147 ++++++++++++++++++++++++++++++++++++ 6 files changed, 252 insertions(+) create mode 100644 components.json create mode 100644 components/LeftSideBar.tsx create mode 100644 components/RightSideBar.tsx create mode 100644 components/ui/button.tsx create mode 100644 lib/utils.ts create mode 100644 styles/globals.css diff --git a/components.json b/components.json new file mode 100644 index 0000000..15f2b02 --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} \ No newline at end of file diff --git a/components/LeftSideBar.tsx b/components/LeftSideBar.tsx new file mode 100644 index 0000000..d756bc4 --- /dev/null +++ b/components/LeftSideBar.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const LeftSideBar = () => { + return ( +
+ +
+ ) +} + +export default LeftSideBar \ No newline at end of file diff --git a/components/RightSideBar.tsx b/components/RightSideBar.tsx new file mode 100644 index 0000000..70027f8 --- /dev/null +++ b/components/RightSideBar.tsx @@ -0,0 +1,13 @@ +import React from 'react' + +const RightSideBar = () => { + return ( +
+ +
+ ) +} + +export default RightSideBar \ No newline at end of file diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 0000000..0ba4277 --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 0000000..d084cca --- /dev/null +++ b/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/styles/globals.css b/styles/globals.css new file mode 100644 index 0000000..a9c6882 --- /dev/null +++ b/styles/globals.css @@ -0,0 +1,147 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + background-color: #101114; +} + +@layer utilities { + .input-class { + @apply text-16 placeholder:text-16 bg-black-1 rounded-[6px] placeholder:text-gray-1 border-none text-gray-1; + } + .podcast_grid { + @apply grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4; + } + .right_sidebar { + @apply sticky right-0 top-0 flex w-[310px] flex-col overflow-y-hidden border-none bg-black-1 px-[30px] pt-8 max-xl:hidden; + } + .left_sidebar { + @apply sticky left-0 top-0 flex w-fit flex-col justify-between border-none bg-black-1 pt-8 text-white-1 max-md:hidden lg:w-[270px] lg:pl-8; + } + .generate_thumbnail { + @apply mt-[30px] flex w-full max-w-[520px] flex-col justify-between gap-2 rounded-lg border border-black-6 bg-black-1 px-2.5 py-2 md:flex-row md:gap-0; + } + .image_div { + @apply flex-center mt-5 h-[142px] w-full cursor-pointer flex-col gap-3 rounded-xl border-[3.2px] border-dashed border-black-6 bg-black-1; + } + .carousel_box { + @apply relative flex h-fit aspect-square w-full flex-none cursor-pointer flex-col justify-end rounded-xl border-none; + } + .button_bold-16 { + @apply text-[16px] font-bold text-white-1 transition-all duration-500; + } + .flex-center { + @apply flex items-center justify-center; + } + .text-12 { + @apply text-[12px] leading-normal; + } + .text-14 { + @apply text-[14px] leading-normal; + } + .text-16 { + @apply text-[16px] leading-normal; + } + .text-18 { + @apply text-[18px] leading-normal; + } + .text-20 { + @apply text-[20px] leading-normal; + } + .text-24 { + @apply text-[24px] leading-normal; + } + .text-32 { + @apply text-[32px] leading-normal; + } +} + +/* ===== custom classes ===== */ + +.custom-scrollbar::-webkit-scrollbar { + width: 3px; + height: 3px; + border-radius: 2px; +} + +.custom-scrollbar::-webkit-scrollbar-track { + background: #15171c; +} + +.custom-scrollbar::-webkit-scrollbar-thumb { + background: #222429; + border-radius: 50px; +} + +.custom-scrollbar::-webkit-scrollbar-thumb:hover { + background: #555; +} +/* Hide scrollbar for Chrome, Safari and Opera */ +.no-scrollbar::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} +.glassmorphism { + background: rgba(255, 255, 255, 0.25); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); +} +.glassmorphism-auth { + background: rgba(6, 3, 3, 0.711); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); +} +.glassmorphism-black { + background: rgba(18, 18, 18, 0.64); + backdrop-filter: blur(37px); + -webkit-backdrop-filter: blur(37px); +} + +/* ======= clerk overrides ======== */ +.cl-socialButtonsIconButton { + border: 2px solid #222429; +} +.cl-button { + color: white; +} +.cl-socialButtonsProviderIcon__github { + filter: invert(1); +} +.cl-internal-b3fm6y { + background: #f97535; +} +.cl-formButtonPrimary { + background: #f97535; +} +.cl-footerActionLink { + color: #f97535; +} +.cl-headerSubtitle { + color: #c5d0e6; +} +.cl-logoImage { + width: 10rem; + height: 3rem; +} +.cl-internal-4a7e9l { + color: white; +} + +.cl-userButtonPopoverActionButtonIcon { + color: white; +} +.cl-internal-wkkub3 { + color: #f97535; +} \ No newline at end of file