Compare commits
2 Commits
5ebe9bd55f
...
2e0ed5e3bb
Author | SHA1 | Date | |
---|---|---|---|
2e0ed5e3bb | |||
6d199eb924 |
1
package-lock.json
generated
1
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
|
56
src/components/ui/button.tsx
Normal file
56
src/components/ui/button.tsx
Normal 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 }
|
Loading…
Reference in New Issue
Block a user