Compare commits

...

2 Commits

Author SHA1 Message Date
2e0ed5e3bb added apply button and proper dimensions to icons
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m29s
2024-06-10 01:27:15 +02:00
6d199eb924 title slice length 2024-06-10 00:59:54 +02:00
6 changed files with 83 additions and 5 deletions

1
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"html-react-parser": "^5.1.10",

View File

@ -10,6 +10,7 @@
},
"dependencies": {
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"html-react-parser": "^5.1.10",

View File

@ -8,6 +8,7 @@ import parse from "html-react-parser";
import styles from "./JobCardDescription.module.css";
import Image from "next/image";
import JobCardIconContainer from "./JobCardIconContainer";
import { Button } from "@/components/ui/button";
interface JobPosting {
title: string;
@ -49,7 +50,7 @@ export default async function JobCard(props: { job: JobPosting }) {
/>
<div className="flex flex-col justify-start">
<h2 className="text-xl sm:text-2xl text-left block sm:hidden">
{title.length > 40 ? title.slice(0, 40) + "..." : title}
{title.length > 50 ? title.slice(0, 50) + "..." : title}
</h2>
<h2 className="text-2xl sm:text-2xl text-left sm:block hidden">
{title}
@ -72,8 +73,15 @@ export default async function JobCard(props: { job: JobPosting }) {
</div>
</AccordionTrigger>
<AccordionContent>
<div className={`py-4 ${styles.parsedDescription}`}>
{parsedDescription}
<div className="flex flex-col gap-2">
<div className={`py-4 ${styles.parsedDescription}`}>
{parsedDescription}
</div>
<div className="flex justify-center">
<a href={link}>
<Button variant="outline">Apply here</Button>
</a>
</div>
</div>
</AccordionContent>
</AccordionItem>

View File

@ -3,8 +3,14 @@ import Image from "next/image";
export default function JobCardIcon(props: { src: string }) {
const { src } = props;
return (
<div className="flex justify-center items-center w-6 md:min-w-14">
<Image src={src} alt={`${src} icon`} width={50} height={50} />
<div className="flex justify-center items-center h-auto w-6 md:min-w-14">
<Image
className="h-auto w-6 md:min-w-12"
src={src}
alt={`${src} icon`}
width={50}
height={50}
/>
</div>
);
}

View File

@ -4,6 +4,12 @@ export default async function Home() {
return (
<main className="container">
<div>
<h1 className="text-4xl pt-4">Software Developer Jobs</h1>
<h2 className="text-2xl">
Get entry- and mid level software developer jobs in Denmark as soon as
they are posted!
</h2>
<hr className="stroke stroke-stone-200 my-4" />
<TheHub />
</div>
</main>

View File

@ -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-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300",
{
variants: {
variant: {
default: "bg-stone-900 text-stone-50 hover:bg-stone-900/90 dark:bg-stone-50 dark:text-stone-900 dark:hover:bg-stone-50/90",
destructive:
"bg-red-500 text-stone-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-stone-50 dark:hover:bg-red-900/90",
outline:
"border border-stone-200 bg-white hover:bg-stone-100 hover:text-stone-900 dark:border-stone-800 dark:bg-stone-950 dark:hover:bg-stone-800 dark:hover:text-stone-50",
secondary:
"bg-stone-100 text-stone-900 hover:bg-stone-100/80 dark:bg-stone-800 dark:text-stone-50 dark:hover:bg-stone-800/80",
ghost: "hover:bg-stone-100 hover:text-stone-900 dark:hover:bg-stone-800 dark:hover:text-stone-50",
link: "text-stone-900 underline-offset-4 hover:underline dark:text-stone-50",
},
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<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }