Skip to content

Commit

Permalink
StarterKitSlide for use in starterkit
Browse files Browse the repository at this point in the history
  • Loading branch information
winzamark123 committed Jan 19, 2025
1 parent a061524 commit b91a4b7
Show file tree
Hide file tree
Showing 86 changed files with 541 additions and 228 deletions.
2 changes: 1 addition & 1 deletion app/(pages)/(hackers)/(index)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { SessionProvider } from 'next-auth/react';

import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
import ProtectedDisplay from '../../_components/ProtectedDisplay/ProtectedDisplay';

export default function Layout({ children }: { children: React.ReactNode }) {
return (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Card, CardContent } from '@globals/components/ui/card';

interface StarterKitSlideProps {
subtitle: string;
title: string;
children: React.ReactNode;
}

export default function StarterKitSlide({
title,
subtitle,
children,
}: StarterKitSlideProps) {
return (
<Card className="tw-h-fit tw-p-4 tw-bg-transparent">
<CardContent className="tw-p-4">
<p className="tw-text-sm tw-font-jakarta tw-tracking-[0.02em]">
{subtitle}
</p>
<h2 className="tw-text-2xl tw-font-bold tw-font-metropolis tw-tracking-[0.02em] tw-mb-4">
{title}
</h2>
{children}
</CardContent>
</Card>
);
}
22 changes: 22 additions & 0 deletions app/(pages)/(hackers)/(index)/starter-kit/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,29 @@
import StarterKitSlide from './_components/StarterKitSlide';
import Image from 'next/image';

export default function Page() {
return (
<main>
<div>Start Kit Page</div>
<StarterKitSlide title="Hacking 101 Workshop" subtitle="JOIN US FOR OUR">
<Image
src="/hackers/crossing_cow.svg"
alt="Example Image"
width={100}
height={100}
/>
</StarterKitSlide>
<StarterKitSlide
title="In case you missed it..."
subtitle="HERE's A RECAP OF THE WORKSHOP"
>
<Image
src="/hackers/flag_duck.svg"
alt="Example Image"
width={100}
height={100}
/>
</StarterKitSlide>
</main>
);
}
86 changes: 86 additions & 0 deletions app/(pages)/_globals/components/ui/card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import * as React from 'react';

import { cn } from '@globals/lib/utils';

const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
'tw-rounded-xl tw-border tw-bg-card tw-text-card-foreground tw-shadow',
className
)}
{...props}
/>
));
Card.displayName = 'Card';

const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('tw-flex tw-flex-col tw-space-y-1.5 tw-p-6', className)}
{...props}
/>
));
CardHeader.displayName = 'CardHeader';

const CardTitle = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
'tw-font-semibold tw-leading-none tw-tracking-tight',
className
)}
{...props}
/>
));
CardTitle.displayName = 'CardTitle';

const CardDescription = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('tw-text-sm tw-text-muted-foreground', className)}
{...props}
/>
));
CardDescription.displayName = 'CardDescription';

const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn('tw-p-6 tw-pt-0', className)} {...props} />
));
CardContent.displayName = 'CardContent';

const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('tw-flex tw-items-center tw-p-6 tw-pt-0', className)}
{...props}
/>
));
CardFooter.displayName = 'CardFooter';

export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardDescription,
CardContent,
};
9 changes: 7 additions & 2 deletions app/(pages)/_globals/fonts.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Inter, Montserrat } from 'next/font/google';
import { Inter, Montserrat, Plus_Jakarta_Sans } from 'next/font/google';

const inter = Inter({
subsets: ['latin'],
Expand All @@ -10,7 +10,12 @@ const montserrat = Montserrat({
variable: '--font-montserrat',
});

const fonts = [inter, montserrat];
const jakarta = Plus_Jakarta_Sans({
subsets: ['latin'],
variable: '--font-jakarta',
});

const fonts = [inter, montserrat, jakarta];

const font_variables = fonts.map((font) => font.variable);
const font_string = font_variables.join(' ');
Expand Down
119 changes: 99 additions & 20 deletions app/(pages)/_globals/globals.scss
Original file line number Diff line number Diff line change
@@ -1,33 +1,56 @@
@use "./mixins";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
* {
@apply tw-border-border;
}
body {
@apply tw-bg-background tw-text-foreground;
}
}

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova/ProximaNova-Regular.ttf') format('truetype');
font-weight: 500;
font-family: 'Metropolis';
src: url('/fonts/Metropolis/TrueType/Metropolis-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}

@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova/ProximaNova-Medium.ttf') format('truetype');
font-weight: 600;
}
@font-face {
font-family: 'Metropolis';
src: url('/fonts/Metropolis/TrueType/Metropolis-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova/ProximaNova-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Metropolis';
src: url('/fonts/Metropolis/TrueType/Metropolis-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova/ProximaNova-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Metropolis';
src: url('/fonts/Metropolis/TrueType/Metropolis-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Metropolis';
src: url('/fonts/Metropolis/TrueType/Metropolis-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Metropolis';
src: url('/fonts/Metropolis/TrueType/Metropolis-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
}

:root {
/* variables */
Expand Down Expand Up @@ -78,8 +101,8 @@ html {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Proxima Nova";
color: var(--text-dark);
font-family: var(--font-jakarta);
}

a {
Expand Down Expand Up @@ -129,3 +152,59 @@ button {
color: #173a52;
cursor: pointer;
}

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
6 changes: 6 additions & 0 deletions app/(pages)/_globals/lib/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
2 changes: 1 addition & 1 deletion app/(pages)/admin/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
import ProtectedDisplay from '../_components/ProtectedDisplay/ProtectedDisplay';
import { Metadata } from 'next';
import { SessionProvider } from 'next-auth/react';

Expand Down
2 changes: 1 addition & 1 deletion app/(pages)/judges/(index)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Metadata } from 'next';
import { SessionProvider } from 'next-auth/react';

import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
import ProtectedDisplay from '../../_components/ProtectedDisplay/ProtectedDisplay';

type Props = {
children: React.ReactNode;
Expand Down
21 changes: 21 additions & 0 deletions components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/(pages)/_globals/globals.scss",
"baseColor": "zinc",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@globals/components",
"utils": "@globals/lib/utils",
"ui": "@globals/components/ui",
"lib": "@globals/lib",
"hooks": "@globals/hooks"
},
"iconLibrary": "lucide"
}
Loading

0 comments on commit b91a4b7

Please sign in to comment.