Skip to content

Commit

Permalink
cooking something
Browse files Browse the repository at this point in the history
  • Loading branch information
brunoblaise committed Apr 7, 2024
1 parent d0d1e23 commit 6c77440
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 0 deletions.
118 changes: 118 additions & 0 deletions components/awards.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
'use client';
import { cn } from '@/utils/cn';
import React from 'react';
//import {BentoGrid, BentoGridItem} from './ui/bento-grid'
import {
IconBoxAlignRightFilled,
IconClipboardCopy,
IconFileBroken,
IconSignature,
IconTableColumn,
} from '@tabler/icons-react';
import { motion } from 'framer-motion';

export function Awards() {
const first = {
initial: {
x: 20,
rotate: -5,
},
hover: {
x: 0,
rotate: 0,
},
};
const second = {
initial: {
x: -20,
rotate: 5,
},
hover: {
x: 0,
rotate: 0,
},
};
return (
<div className="max-w-4xl mx-auto md:auto-rows-[20rem] p-4">
<h1 id="description-heading">Prices</h1>

<motion.div
initial="initial"
animate="animate"
whileHover="hover"
className="flex flex-col justify-center items-center flex-1 w-full h-full min-h-[6rem] bg-dot-white/[0.2] md:flex-row md:space-x-2 md:my-4 "
>
<motion.div
variants={first}
className="h-full w-1/3 rounded-2xl p-4 bg-black border-white/[0.1] border flex flex-col items-center justify-center"
>
x<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">1st place:</p>
<p className="border border-red-500 bg-red-100 bg-red-900/20 text-red-600 text-xs rounded-full px-2 py-0.5 mt-4">
To be updated
</p>
</motion.div>
<motion.div className="h-full relative z-20 w-1/3 rounded-2xl p-4 bg-black border-white/[0.1] border flex flex-col items-center justify-center">
<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">2nd place:</p>
<p className="border border-green-500 bg-green-900/20 text-green-600 text-xs rounded-full px-2 py-0.5 mt-4">
To be updated
</p>
</motion.div>
<motion.div
variants={second}
className="h-full w-1/3 rounded-2xl p-4 bg-black border-white/[0.1] border flex flex-col items-center justify-center"
>
<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">3rd place:</p>
<p className="border border-orange-500 bg-orange-900/20 text-orange-600 text-xs rounded-full px-2 py-0.5 mt-4">
To be updated
</p>
</motion.div>

<motion.div
variants={first}
className="h-full w-1/3 rounded-2xl p-4 bg-black border-white/[0.1] border flex flex-col items-center justify-center"
>
x
<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">
Best Beginner Project
</p>
<p className="border border-red-500 bg-red-900/20 text-red-600 text-xs rounded-full px-2 py-0.5 mt-4">
To be updated
</p>
</motion.div>
<motion.div className="h-full relative z-20 w-1/3 rounded-2xl p-4 bg-black border-white/[0.1] border flex flex-col items-center justify-center">
<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">Best Design</p>
<p className="border border-green-500 bg-green-900/20 text-green-600 text-xs rounded-full px-2 py-0.5 mt-4">
To be updated
</p>
</motion.div>
<motion.div
variants={second}
className="h-full w-1/3 rounded-2xl p-4 bg-black border-white/[0.1] border flex flex-col items-center justify-center"
>
<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">
Most Meme Project
</p>
<p className="border border-orange-500 bg-orange-900/20 text-orange-600 text-xs rounded-full px-2 py-0.5 mt-4">
To be updated
</p>
</motion.div>
</motion.div>

<motion.div
variants={second}
className="h-full rounded-2xl p-4 bg-black border-white/[0.1] border flex flex-col items-center justify-center"
>
x
<p className="sm:text-sm text-xs text-center font-semibold text-neutral-500 mt-4">
Your prize, for attending!
</p>
<p className="border border-green-500 bg-green-900/20 text-green-600 text-xs rounded-full px-2 py-0.5 mt-4">
To be updated
</p>
</motion.div>
</div>
);
}
const Skeleton = () => (
<div className="flex flex-1 w-full h-full min-h-[6rem] rounded-xl bg-dot-white/[0.2] border border-white/[0.2] bg-black"></div>
);
39 changes: 39 additions & 0 deletions components/ui/bento-grid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { cn } from '@/utils/cn';

export const BentoGrid = ({ className, children }: { className?: string; children?: React.ReactNode }) => {
return (
<div className={cn('grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl', className)}>
{children}
</div>
);
};

export const BentoGridItem = ({
className,
title,
description,
header,
icon,
}: {
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
header?: React.ReactNode;
icon?: React.ReactNode;
}) => {
return (
<div
className={cn(
'row-span-1 rounded-xl group/bento transition duration-200 shadow-input p-4 bg-black border-white/[0.2] border border-transparent justify-between flex flex-col space-y-4',
className,
)}
>
{header}
<div className="group-hover/bento:translate-x-2 transition duration-200">
{icon}
<div className="font-sans font-bold text-neutral-200 mb-2 mt-2">{title}</div>
<div className="font-sans font-normal text-xs text-neutral-300">{description}</div>
</div>
</div>
);
};
6 changes: 6 additions & 0 deletions utils/cn.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

0 comments on commit 6c77440

Please sign in to comment.