dubey/TerminalTinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animations work, tinder layout

Browse Source
This commit is contained in:
Tanishq Dubey
2024-09-09 13:31:32 -04:00
parent 70b3d7327a
commit 5bbfa98ed3
8 changed files with 158 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/components/ColorSchemeCard.tsx
View File

@ -1,16 +1,21 @@
import React from 'react';
import React, { useState } from 'react';
import Image from 'next/image';
import { ColorScheme } from '../utils/colorSchemes';
import { generateYAML } from '../utils/yamlExport';
import { Highlight, themes } from 'prism-react-renderer';
import { motion, useAnimation } from 'framer-motion';
interface ColorSchemeCardProps {
scheme: ColorScheme;
isSelected: boolean;
onSelect: () => void;
onLike: () => void;
onDislike: () => void;
index: number;
}
const ColorSchemeCard: React.FC<ColorSchemeCardProps> = ({ scheme, isSelected, onSelect }) => {
const ColorSchemeCard: React.FC<ColorSchemeCardProps> = ({ scheme, onLike, onDislike, index }) => {
const [overlayColor, setOverlayColor] = useState('rgba(0, 0, 0, 0)');
const controls = useAnimation();
const codeExample = `
// User object and function
const user = {
@ -54,13 +59,39 @@ fetchData().then(data => console.log(data)); `;
URL.revokeObjectURL(url);
};
const handleLike = () => {
setOverlayColor('rgba(0, 255, 0, 0.1)');
controls.start({ x: 300, opacity: 0, transition: { duration: 0.3 } }).then(onLike);
};
const handleDislike = () => {
setOverlayColor('rgba(255, 0, 0, 0.1)');
controls.start({ x: -300, opacity: 0, transition: { duration: 0.3 } }).then(onDislike);
};
return (
<div
className={`w-96 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 ease-in-out cursor-pointer ${isSelected ? 'ring-4 ring-blue-500' : ''}`}
onClick={onSelect}
<motion.div
className="absolute w-[350px] h-[600px] bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
initial={{ scale: 1 - index * 0.05, y: index * 15, opacity: 1 }}
animate={controls}
style={{
zIndex: 3 - index
}}
drag="x"
dragConstraints={{ left: -100, right: 100 }}
onDragEnd={(e, { offset, velocity }) => {
if (offset.x > 100) handleLike();
else if (offset.x < -100) handleDislike();
}}
>
<div className="p-6">
<div className="flex justify-between items-center mb-4">
<div className="p-6 h-full flex flex-col relative">
<motion.div
className="absolute inset-0 rounded-lg"
animate={{ backgroundColor: overlayColor }}
initial={{ backgroundColor: 'rgba(0, 0, 0, 0)' }}
transition={{ duration: 0.2 }}
/>
<div className="flex justify-between items-center mb-4 z-10">
<h2 className="text-xl font-semibold">{scheme.name}</h2>
<button
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300"
@ -69,11 +100,11 @@ fetchData().then(data => console.log(data)); `;
<Image src="/download-icon.svg" alt="Download" width={24} height={24} />
</button>
</div>
<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-md mb-4 transition-colors duration-300">
<div className="bg-gray-100 dark:bg-gray-700 rounded-md mb-4 flex-grow overflow-hidden z-10 shadow-md">
<Highlight theme={themes.dracula} code={codeExample} language="javascript">
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre className={`${className} text-sm overflow-x-auto`} style={{ ...style, backgroundColor: scheme.colors.primary.background }}>
{tokens.map((line, i) => (
<pre className={`${className} text-xs p-4 overflow-x-auto`} style={{ ...style, backgroundColor: scheme.colors.primary.background }}>
{tokens.slice(0, 20).map((line, i) => (
<div key={i} {...getLineProps({ line, key: i })}>
{line.map((token, key) => {
let color = scheme.colors.primary.foreground;
@ -95,21 +126,35 @@ fetchData().then(data => console.log(data)); `;
)}
</Highlight>
</div>
<div className="grid grid-cols-8 gap-2">
<div className="grid grid-cols-8 gap-2 mb-4 z-10">
{Object.values(scheme.colors.normal).concat(Object.values(scheme.colors.bright)).map((color, index) => (
<div
key={index}
className="w-full pt-full rounded-sm transition-colors duration-300 relative group"
style={{backgroundColor: color}}
>
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50 text-white text-xs">
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50 text-white text-[8px]">
{color}
</div>
</div>
))}
</div>
<div className="flex justify-center space-x-8 mt-4 z-10">
<button
className="bg-red-500 text-white p-3 rounded-full shadow-lg hover:bg-red-600 transition-colors duration-300"
onClick={handleDislike}
>
<Image src="/cross-icon.svg" alt="Dislike" width={28} height={28} />
</button>
<button
className="bg-green-500 text-white p-3 rounded-full shadow-lg hover:bg-green-600 transition-colors duration-300"
onClick={handleLike}
>
<Image src="/heart-icon.svg" alt="Like" width={28} height={28} />
</button>
</div>
</div>
</div>
</motion.div>
);
};