Skip to content

Commit

Permalink
feat: subtle glow effect
Browse files Browse the repository at this point in the history
  • Loading branch information
@asafkorem
asafkorem committed Nov 4, 2024
1 parent 918856d commit 974e822
Showing 1 changed file with 74 additions and 64 deletions.
138 changes: 74 additions & 64 deletions src/components/PatternCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { PatternDefinition, ParamConfig } from '@/types/git-patterns';
import { CodeBlock } from './CodeBlock';
import {CustomNumberInput} from "@/components/CustomNumberInput";
import { CustomNumberInput } from "@/components/CustomNumberInput";

interface PatternCardProps {
pattern: PatternDefinition;
Expand All @@ -27,74 +27,84 @@ export const PatternCard: React.FC<PatternCardProps> = ({ pattern }) => {
const command = pattern.generateCommand(params);

return (
<div className="rounded-xl border border-[#30363d] bg-[#161b22] overflow-hidden shadow-lg shadow-[#0d1117]/50 hover:border-[#3d4449] transition-all duration-200">
<div className="p-5 flex items-center gap-4 border-b border-[#30363d]">
<div className="p-2 rounded-full bg-[#0d1117]/50">
<pattern.icon color={pattern.iconColor} className="w-5 h-5" />
</div>
<div>
<h2 className="text-[#c9d1d9] font-semibold text-lg">{pattern.title}</h2>
<p className="text-[#8b949e] text-sm">{pattern.description}</p>
</div>
<div className="group relative rounded-xl border border-[#30363d] bg-[#161b22] overflow-hidden">
{/* Glow Effects */}
<div className="absolute inset-0 opacity-40">
<div className="absolute -inset-x-2 -top-4 h-48 bg-gradient-to-b from-[#30363d] via-transparent to-transparent blur-2xl" />
<div className="absolute -inset-x-2 -bottom-4 h-48 bg-gradient-to-t from-[#30363d] via-transparent to-transparent blur-2xl" />
</div>

<div className="p-5 space-y-5">
{pattern.params.map(param => (
<div key={param.name} className="space-y-2">
<label className="text-[#c9d1d9] text-sm font-medium block">
{param.label}
{param.description && (
<span className="text-[#8b949e] ml-2 text-xs font-normal">
{param.description}
</span>
{/* Card Content */}
<div className="relative">
{/* Header */}
<div className="p-5 flex items-center gap-4 border-b border-[#30363d] bg-[#161b22]/95">
<div className="p-2 rounded-full bg-[#0d1117]/50">
<pattern.icon color={pattern.iconColor} className="w-5 h-5" />
</div>
<div>
<h2 className="text-[#c9d1d9] font-semibold text-lg">{pattern.title}</h2>
<p className="text-[#8b949e] text-sm">{pattern.description}</p>
</div>
</div>

{/* Body */}
<div className="p-5 space-y-5 bg-[#161b22]/95">
{pattern.params.map(param => (
<div key={param.name} className="space-y-2">
<label className="text-[#c9d1d9] text-sm font-medium block">
{param.label}
{param.description && (
<span className="text-[#8b949e] ml-2 text-xs font-normal">
{param.description}
</span>
)}
</label>

{param.type === 'select' ? (
<select
value={String(params[param.name])}
onChange={(e) => handleParamChange(param, e.target.value)}
className="w-full bg-[#0d1117] border border-[#30363d] rounded-lg pl-3 pr-8 py-2 text-[#c9d1d9] text-sm
focus:outline-none focus:ring-1 focus:ring-[#888b99]/40 focus:border-[#888b99]
hover:border-[#3d4449] transition-colors duration-200
appearance-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM4YjkxOTgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek0xMS4zOTYgN0g0LjYwNGEuMjUuMjUgMCAwMS0uMTc3LS40MjdsMy4zOTYtMy4zOTZhLjI1MS4yNTEgMCAwMS4zNTQgMGwzLjM5NiAzLjM5NkEuMjUuMjUgMCAwMTExLjM5NiA3eiI+PC9wYXRoPjwvc3ZnPg==')]
bg-[length:16px_16px] bg-no-repeat bg-[right_8px_center]"
>
{param.options?.map(option => (
<option
key={option}
value={option}
className="bg-[#0d1117] text-[#c9d1d9]"
>
{option}
</option>
))}
</select>
) : param.type === 'number' ? (
<CustomNumberInput
value={Number(params[param.name])}
onChange={(value) => handleParamChange(param, value)}
min={param.min}
max={param.max}
/>
) : (
<input
type="text"
placeholder={param.placeholder}
value={String(params[param.name])}
onChange={(e) => handleParamChange(param, e.target.value)}
className="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-[#c9d1d9] text-sm
focus:outline-none focus:ring-1 focus:ring-[#888b99]/40 focus:border-[#888b99]
hover:border-[#3d4449] transition-colors duration-200"
/>
)}
</label>
</div>
))}

{param.type === 'select' ? (
<select
value={String(params[param.name])}
onChange={(e) => handleParamChange(param, e.target.value)}
className="w-full bg-[#0d1117] border border-[#30363d] rounded-lg pl-3 pr-8 py-2 text-[#c9d1d9] text-sm
focus:outline-none focus:ring-1 focus:ring-[#888b99]/40 focus:border-[#888b99]
hover:border-[#3d4449] transition-colors duration-200
appearance-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM4YjkxOTgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek0xMS4zOTYgN0g0LjYwNGEuMjUuMjUgMCAwMS0uMTc3LS40MjdsMy4zOTYtMy4zOTZhLjI1MS4yNTEgMCAwMS4zNTQgMGwzLjM5NiAzLjM5NkEuMjUuMjUgMCAwMTExLjM5NiA3eiI+PC9wYXRoPjwvc3ZnPg==')]
bg-[length:16px_16px] bg-no-repeat bg-[right_8px_center]"
>
{param.options?.map(option => (
<option
key={option}
value={option}
className="bg-[#0d1117] text-[#c9d1d9]"
>
{option}
</option>
))}
</select>
) : param.type === 'number' ? (
// Update the number input className:
<CustomNumberInput
value={Number(params[param.name])}
onChange={(value) => handleParamChange(param, value)}
min={param.min}
max={param.max}
/>
) : (
<input
type="text"
placeholder={param.placeholder}
value={String(params[param.name])}
onChange={(e) => handleParamChange(param, e.target.value)}
className="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-[#c9d1d9] text-sm
focus:outline-none focus:ring-1 focus:ring-[#888b99]/40 focus:border-[#888b99]
hover:border-[#3d4449] transition-colors duration-200"
/>
)}
<div className="mt-6">
<label className="text-[#c9d1d9] text-sm font-medium mb-2 block">Generated Command</label>
<CodeBlock code={command.trim()} />
</div>
))}

<div className="mt-6">
<label className="text-[#c9d1d9] text-sm font-medium mb-2 block">Generated Command</label>
<CodeBlock code={command.trim()} />
</div>
</div>
</div>
Expand Down

0 comments on commit 974e822

Please sign in to comment.